/* Page layout only. The shared studio tokens own every color and page width.
   T-261024-050: 모양·글자·간격은 공용 톤 값(--tone-*)·공용 부품(.mb-btn)만 — 첫이름 .field·.method·.card 와 같은 값. 회사 홈처럼 라이트 고정. */
@font-face {
  font-family: var(--tone-font);
  src: url("./fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html { background: var(--bg); }
html:root { --page-max: var(--tone-page-max); }
button, input, textarea { font: inherit; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; transition: background .15s, border-color .15s; }
button:disabled { cursor: default; opacity: .45; }
button:not(:disabled):active { transform: translateY(1px); }
svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: var(--tone-space-1); left: var(--tone-gutter); z-index: 1; display: inline-flex; align-items: center; min-height: var(--tone-tap-height); padding: 0 var(--tone-control-padding); background: var(--cta-bg); color: var(--cta-fg); border: 0; border-radius: var(--tone-radius-control); font-weight: var(--tone-weight-bold); text-decoration: none; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

/* 머리말 = 첫이름 .studio-nav(64px, 상호 20/28 굵게, 링크 15/22 굵게 44px). */
.site-header { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: var(--tone-space-3); min-height: var(--tone-header-height); border-bottom: 1px solid var(--border); }
.studio-brand { display: inline-flex; align-items: center; gap: var(--tone-space-2); justify-self: start; min-height: var(--tone-tap-height); color: var(--fg); font: var(--tone-weight-bold) var(--tone-subtitle-size)/var(--tone-subtitle-line) var(--tone-font); letter-spacing: var(--tone-tracking-title); text-decoration: none; }
.studio-brand img { display: block; width: 32px; height: 32px; flex-shrink: 0; }
.studio-name { line-height: var(--tone-subtitle-line); }
.tool-name { display: block; color: var(--fg-dim); font: var(--tone-weight) var(--tone-caption-size)/var(--tone-caption-line) var(--tone-font); letter-spacing: normal; }
.home-link { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tone-tap-height); padding: 0 var(--tone-space-1); color: var(--fg); font: var(--tone-weight-bold) var(--tone-label-size)/var(--tone-label-line) var(--tone-font); text-decoration: none; white-space: nowrap; } /* tone:fixed: 미세 간격(의장) */
.home-link:hover { color: var(--accent); }
.privacy { display: flex; align-items: center; gap: var(--tone-space-1); color: var(--fg-dim); font: var(--tone-weight) var(--tone-caption-size)/var(--tone-caption-line) var(--tone-font); }
.privacy svg { width: 15px; height: 15px; flex-shrink: 0; }
.text-tool main { padding-bottom: var(--tone-section-gap); }
.text-tool .intro { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--tone-space-4); }
.mobile-break { display: none; }
.steps { display: flex; gap: var(--tone-space-3); list-style: none; margin: 0 0 4px; padding: 0; color: var(--fg-dim); font: var(--tone-weight) var(--tone-caption-size)/var(--tone-caption-line) var(--tone-font); white-space: nowrap; } /* tone:fixed: 미세 간격(의장) */
.steps li { display: flex; align-items: center; gap: var(--tone-space-1); }
.steps b { display: grid; place-items: center; width: var(--tone-chip-height); height: var(--tone-chip-height); border-radius: 50%; background: var(--bg-elev); color: var(--fg-dim); font-weight: var(--tone-weight-bold); }

/* 작업판 = 첫이름 .card(회색 둥근 면). 안의 칸·고르는 줄은 .field·.method 값(흰 바탕, 2px 테두리, 초점·선택이면 파랑). */
.workspace { background: var(--bg-elev); border: 0; border-radius: var(--tone-radius-card); overflow: hidden; }
.controls { display: flex; align-items: center; justify-content: space-between; gap: var(--tone-space-3); padding: var(--tone-card-padding); border-bottom: 1px solid var(--border); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { float: left; margin: var(--tone-space-2) var(--tone-space-3) 0 0; color: var(--fg); font: var(--tone-weight-bold) var(--tone-label-size)/var(--tone-label-line) var(--tone-font); }
.segmented { display: flex; gap: var(--tone-space-1); }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented span { display: inline-flex; align-items: center; min-height: var(--tone-tap-height); padding: 0 var(--tone-space-2); border: var(--tone-input-border) solid transparent; border-radius: var(--tone-radius-control); background: var(--bg); color: var(--fg); font: var(--tone-weight-bold) var(--tone-label-size)/var(--tone-label-line) var(--tone-font); white-space: nowrap; }
.segmented input:checked + span { background: var(--accent-tint); border-color: var(--accent); }
.segmented input:focus-visible + span { outline: var(--tone-focus-width) solid var(--accent); outline-offset: var(--tone-focus-offset); }
.mode-help { max-width: 270px; margin: 0; color: var(--fg-dim); font: var(--tone-weight) var(--tone-caption-size)/var(--tone-caption-line) var(--tone-font); text-align: right; } /* tone:fixed: 글·열 폭(편집 의장) */
.editors { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--tone-space-3); padding: var(--tone-card-padding); }
.editor { min-width: 0; display: flex; flex-direction: column; }
.editor-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--tone-space-2); min-height: var(--tone-tap-height); margin-bottom: var(--tone-space-1); }
.text-tool #main-content .editor h2 { display: flex; align-items: center; gap: var(--tone-space-1); margin: 0; font-size: var(--tone-label-size); line-height: var(--tone-label-line); font-weight: var(--tone-weight-bold); letter-spacing: normal; }
.dot { display: block; width: 6px; height: 6px; background: var(--fg-mute); border-radius: 50%; }
.dot.accent { background: var(--accent); }
.text-button { border: 0; background: transparent; padding: 0; min-height: var(--tone-tap-height); color: var(--accent-hover); font: var(--tone-weight-bold) var(--tone-label-size)/var(--tone-label-line) var(--tone-font); }
.text-button:hover:not(:disabled) { text-decoration: underline; text-underline-offset: var(--tone-underline-offset); }
.text-button.muted { color: var(--fg-dim); }
.result-state { display: inline-flex; align-items: center; min-height: var(--tone-chip-height); padding: 0 var(--tone-space-2); border: 0; border-radius: var(--tone-radius-pill); background: var(--accent-tint); color: var(--accent-hover); font: var(--tone-weight-bold) var(--tone-caption-size)/var(--tone-caption-line) var(--tone-font); }
.result-state.stale { color: var(--fg-dim); background: var(--bg); }
textarea { display: block; box-sizing: border-box; width: 100%; height: 264px; min-height: 180px; resize: vertical; padding: var(--tone-control-padding); border: var(--tone-input-border) solid transparent; border-radius: var(--tone-radius-control); background: var(--bg); color: var(--fg); font: var(--tone-weight) var(--tone-body-size)/var(--tone-body-line) var(--tone-font); letter-spacing: normal; outline: none; caret-color: var(--accent); } /* tone:fixed: 고정 높이(편집 의장) */
textarea::placeholder { color: var(--fg-mute); opacity: 1; }
textarea:focus { border-color: var(--accent); }
.editor-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--tone-space-2); min-height: var(--tone-tap-height); color: var(--fg-dim); font: var(--tone-weight) var(--tone-caption-size)/var(--tone-caption-line) var(--tone-font); margin-top: var(--tone-space-1); font-variant-numeric: tabular-nums; }
#difference { color: var(--fg-dim); text-align: right; }
.options { display: flex; align-items: center; gap: var(--tone-space-1) var(--tone-space-4); flex-wrap: wrap; padding: var(--tone-space-3) var(--tone-card-padding); border-block: 1px solid var(--border); }
.options label { display: flex; gap: var(--tone-space-1); align-items: center; min-height: var(--tone-tap-height); color: var(--fg); font: var(--tone-weight) var(--tone-label-size)/var(--tone-label-line) var(--tone-font); cursor: pointer; }
.options input { appearance: none; width: 20px; height: 20px; border: var(--tone-input-border) solid var(--line-strong); border-radius: 6px; display: grid; place-content: center; margin: 0; flex-shrink: 0; background: var(--bg); } /* tone:fixed: 작은 모서리(의장) */
.options input:checked { background: var(--cta-bg); border-color: var(--cta-bg); }
.options input:checked::before { content: ""; width: 8px; height: 4px; border-left: var(--tone-input-border) solid var(--cta-fg); border-bottom: var(--tone-input-border) solid var(--cta-fg); transform: translateY(-1px) rotate(-45deg); }
.action-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--tone-space-3); padding: var(--tone-card-padding); }
.action-notes { display: flex; flex-direction: column; align-items: flex-start; color: var(--fg-dim); font: var(--tone-weight) var(--tone-caption-size)/var(--tone-caption-line) var(--tone-font); }
.actions { display: flex; gap: var(--tone-space-1); flex-shrink: 0; }
/* 버튼은 공용 부품(.mb-btn) — 비활성은 첫이름 primaryDisabled. */
.button:disabled { opacity: 1; }
.button svg { width: 18px; height: 18px; }
kbd { display: inline-block; font-family: inherit; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--fg-dim); font-size: var(--tone-caption-size); line-height: var(--tone-caption-line); padding: 0 4px; margin: 0 2px; } /* tone:fixed: 작은 모서리(의장)·미세 간격(의장) */
.below-editor { display: flex; justify-content: space-between; gap: var(--tone-space-3); color: var(--fg-dim); font: var(--tone-weight) var(--tone-caption-size)/var(--tone-caption-line) var(--tone-font); }
.below-editor p { margin: var(--tone-space-3) 0; }
#status { min-height: var(--tone-label-line); margin: 0 0 var(--tone-space-3); color: var(--accent-hover); font: var(--tone-weight-bold) var(--tone-label-size)/var(--tone-label-line) var(--tone-font); text-align: center; }
.no-script { color: var(--danger); }
footer { border-top: 1px solid var(--border); margin-top: var(--tone-section-gap); padding-top: var(--tone-space-4); color: var(--fg-dim); font: var(--tone-weight) var(--tone-caption-size)/var(--tone-caption-line) var(--tone-font); display: flex; justify-content: space-between; align-items: center; gap: var(--tone-space-3); }
footer a { display: inline-flex; align-items: center; min-height: var(--tone-tap-height); color: var(--fg); font: var(--tone-weight-bold) var(--tone-label-size)/var(--tone-label-line) var(--tone-font); text-decoration: none; }
footer a:hover { color: var(--accent); }

@media (min-width: 1500px) {
  textarea { height: 310px; }
}
@media (max-width: 1100px) {
  .steps { display: none; }
  .mode-help { max-width: 240px; } /* tone:fixed: 글·열 폭(편집 의장) */
  .controls { gap: var(--tone-space-3); }
  legend { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .options { gap: var(--tone-space-3); }
  .action-notes { max-width: 260px; } /* tone:fixed: 글·열 폭(편집 의장) */
}
@media (max-width: 700px) {
  .site-header { grid-template-columns: minmax(0,1fr) auto; gap: 0 var(--tone-space-2); padding-block: var(--tone-space-1); }
  .studio-brand img { width: 28px; height: 28px; }
  .tool-name { display: none; }
  .privacy { grid-column: 1 / -1; min-height: var(--tone-tap-height); }
  .mobile-break { display: initial; }
  .controls { align-items: stretch; flex-direction: column; gap: var(--tone-space-2); }
  .modes { width: 100%; }
  .segmented label { flex: 1; text-align: center; }
  .segmented span { width: 100%; justify-content: center; padding: 0 4px; } /* tone:fixed: 미세 간격(의장) */
  .mode-help { text-align: left; max-width: none; }
  .editors { grid-template-columns: minmax(0,1fr); }
  textarea { height: 184px; min-height: 140px; } /* tone:fixed: 고정 높이(편집 의장) */
  .action-bar { flex-direction: column-reverse; align-items: stretch; }
  .actions { display: grid; grid-template-columns: 1fr 1fr; }
  .action-notes { max-width: none; align-items: center; }
  .below-editor { flex-direction: column; gap: 0; }
  .below-editor p { margin: var(--tone-space-1) 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}