@import url("app_shell.css");
/* ElecBridge 공통 스타일 — 업무 화면과 랜딩·로그인이 같은 규칙을 쓴다.
   색은 app_shell.css 토큰으로만 정하고, 외부 글꼴·CDN을 부르지 않는다. */

/* ===================================================================== 업무 화면 */
/* 아래 규칙은 예전에 base.html 안에 인라인으로 있던 것을 그대로 옮긴 것이다(값 변경 없음).
   색은 공통 토큰으로만 정한다 — 화면마다 각자 색을 정하면 화면들이 조금씩 달라진다.
   토큰 값의 출처와 예외 사유는 저장소 안 디자인 기록에 있고, 여기서는 값만 둔다. */

    :root {
      /* Colors and legacy aliases are imported from app_shell.css. */

      --font-sans: 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
      --font-number: Consolas, D2Coding, 'Courier New', monospace;
      --radius-large: 24px;
      --radius-card: 20px;
      --radius-inner: 16px;
      --radius-pill: 999px;

      --radius: var(--radius-card);
      --gap: 1rem;

      /* ── 간격 (8px 리듬). 지금까지 0.35/0.6/0.9/1.2rem이 규칙 없이 섞여 있었다. ── */
      --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
      --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4.5rem;

      /* ── 타입 스케일. 한글은 라틴보다 행간을 조금 더 준다. 외부 글꼴을 쓰지 않는다. ── */
      --t-cap: .8125rem;   --lh-cap: 1.5;
      --t-body: .9375rem;      --lh-body: 1.65;
      --t-lead: 1.0625rem; --lh-lead: 1.6;
      --t-h3: 1.0625rem;   --lh-h3: 1.4;
      --t-h2: 1.125rem;    --lh-h2: 1.35;
      --t-h1: 1.75rem;     --lh-h1: 1.3;
      --t-display: clamp(2.1rem, 5.6vw, 3.6rem); --lh-display: 1.22;

      /* ── 폭 ── */
      --measure: 34rem;    /* 본문 줄 길이 상한 — 960px에 글이 꽉 차면 읽기 어렵다 */
      --field-max: 26rem;  /* 입력칸이 화면 폭까지 늘어나지 않게 */
      --shell-max: 1180px;
    }
    * { box-sizing: border-box; }
    body {
      font-family: var(--font-sans);
      font-size: var(--t-body);
      margin: 0;
      padding: 32px 48px 64px;
      color: var(--text);
      background: var(--bg);
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }
    .page { max-width: var(--shell-max); margin: 0 auto; }
    a { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; }
    h1 { font-size: var(--t-h1); line-height: var(--lh-h1); font-weight: 700;
         margin: 0 0 var(--s5); letter-spacing: -0.015em; }
    h2 { font-size: var(--t-h2); line-height: var(--lh-h2); font-weight: 700;
         margin: var(--s6) 0 var(--s3); letter-spacing: -0.01em; }
    h2:first-child { margin-top: 0; }
    h3 { font-size: var(--t-h3); line-height: var(--lh-h3); font-weight: 700;
         color: var(--accent); margin: var(--s5) 0 var(--s2); }
    p { margin: 0 0 0.6rem; }
    .breadcrumb { margin: 0 0 1rem; font-size: 0.88rem; }

    /* 카드 — 입력 그룹·정보 블록의 기본 구획. 화면마다 다른 박스를 만들지 않는다. */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1.1rem 1.25rem;
      margin-bottom: var(--gap);
    }
    .card > h2:first-child, .card > h3:first-child { margin-top: 0; }
    .card-head { margin: -0.15rem 0 0.9rem; }
    .card-head h2 { margin-bottom: 0.2rem; }
    .card-head .hint { margin: 0; }
    .step { color: var(--accent); font-weight: 700; margin-right: 0.35rem; }

    table { border-collapse: collapse; width: 100%; margin-top: 1rem; background: var(--surface); }
    /* 브라우저가 한글을
       음절 단위로 강제 줄바꿈하는 문제. keep-all로 단어(공백 없는 한글 연속) 내부의
       줄바꿈 기회를 없애고, 그 결과 첫 컬럼의 min-content 폭이 자동으로 넓어져
       "선택요금비교" 같은 단어가 중간에서 꺾이지 않는다. overflow-wrap은 anywhere가
       아니라 break-word를 써야 한다 — anywhere는 min-content 계산에 참여해
       keep-all이 만든 컬럼 확장 효과를 없애버리지만, break-word는 컬럼이 실제로
       넘칠 때만 마지막 수단으로 끊는 안전판 역할만 한다. */
    th, td { text-align: left; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); word-break: keep-all; overflow-wrap: break-word; }
    th { color: var(--text-muted); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.01em; background: var(--fill); }
    tbody tr:last-child td { border-bottom: none; }
    /* 2026-09-07 사용자 "잘림": 넓은 표는 잘라 버리지 않고 표 안에서 옆으로 스크롤한다. */
    .table-wrap { max-width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; margin-top: 1rem; }
    .table-wrap td.nowrap, .table-wrap th.nowrap { white-space: nowrap; }
    .table-wrap table { margin-top: 0; }

    .chip { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
    .chip-입력중 { background: var(--fill); color: var(--label2); }
    .chip-실행완료 { background: var(--fill); color: var(--good); }
    .chip-BLOCK { background: var(--danger-bg); color: var(--bad); }
    .chip-실행오류 { background: var(--danger-bg); color: var(--bad); }
    /* 결과 표의 배지 색 — 화면 배지와 PDF 배지가 같은 색이어야 한다. */
    .chip-b-ok { background: var(--card); border: 1px solid var(--status-good); color: var(--green); }
    .chip-b-warn { background: var(--card); border: 1px solid var(--status-warning); color: var(--amber); }
    .chip-b-ser { background: var(--card); border: 1px solid var(--status-serious); color: var(--orange); }
    .chip-b-crit { background: var(--card); border: 1px solid var(--status-critical); color: var(--red); }
    .chip-b-mut { background: var(--card); border: 1px solid var(--status-neutral); color: var(--label2); }

    .toolbar { margin: 1rem 0; display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }

    /* 폼 — 라벨은 항상 입력칸 위, 같은 폭·같은 높이로 정렬한다. */
    .field { margin-bottom: 0.9rem; }
    .field > label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.3rem; }
    /* 실제로 쓰는 입력 타입을 전부 적는다. number·month·file이 빠져 있어 그 칸만
       브라우저 기본 모양(높이 21px·Arial 13.33px)으로 나왔다(U-04, 2026-09-08).
       `input:not([type])`도 함께 잡는다 — type을 안 적은 <input>은 HTML 기본이 text지만
       `input[type=text]` 선택자에는 안 걸려 혼자 브라우저 기본 모양으로 남았다
       (2026-09-08 보유 장비 화면에서 실제로 났다). 앞으로 type을 빠뜨려도 같은 모양이 된다. */
    input:not([type]),
    input[type=text], input[type=date], input[type=number], input[type=month],
    input[type=search], input[type=tel], input[type=email], input[type=password], input[type=file],
    select, textarea {
      font: inherit;
      padding: 0.5rem 0.65rem;
      border: 1px solid var(--border-strong);
      border-radius: 7px;
      background: var(--surface);
      color: var(--text);
    }
    /* 손가락으로 누를 수 있는 최소 높이 44px. 모바일에서 칸마다 높이가 달라 보이던 것을 막는다.
       버튼은 자기 padding으로 이미 그 높이라 여기서 건드리지 않는다.
       이 선택자는 :not()이 다섯 개라 특이성이 높아 화면별 min-height 지정을 덮는다.
       그래서 화면마다 고치지 않고 **여기 한 값만** 바꾼다(2026-09-08 실측 42.8px -> 44px). */
    input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]),
    select { min-height: 2.75rem; }
    textarea { min-height: 4rem; }
    .field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea { width: 100%; }
    input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 1px; border-color: var(--accent); }
    .field input[type=checkbox], .field input[type=radio] { width: auto; margin-right: 0.4rem; }
    /* 체크박스·라디오 줄은 라벨이 블록이 되면 안 된다(칸과 글자가 세로로 벌어진다). */
    .field label.inline { display: inline-flex; align-items: center; font-weight: 500; color: var(--text); margin-right: 1rem; margin-bottom: 0; }
    .field-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
    /* display:flex가 [hidden]의 display:none을 이겨버려 안 숨는 것을 막는다. */
    .field-row[hidden] { display: none; }
    .field-row > .field { flex: 1 1 12rem; margin-bottom: 0.9rem; }
    .field-group { border: 1px solid var(--border-strong); border-radius: 7px; padding: 0.7rem 0.9rem; margin: 0.9rem 0; background: var(--surface); }
    .field-group > summary { cursor: pointer; font-weight: 600; color: var(--text); }
    .field-group[open] > summary { margin-bottom: 0.7rem; }
    .field-group > .field:last-child { margin-bottom: 0; }

    .btn {
      display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 44px;
      padding: 0.5rem 1.05rem; border-radius: var(--radius-inner);
      background: var(--accent); color: var(--on-ink); border: 1px solid var(--accent);
      cursor: pointer; font: inherit; font-weight: 600; text-decoration: none;
    }
    .btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); text-decoration: none; }
    .btn-secondary { min-height: 44px; background: var(--surface); color: var(--text); border-color: var(--border-strong); font-weight: 500; }
    .btn-secondary:hover { background: var(--fill); border-color: var(--border-strong); }
    .btn-lg { padding: 0.65rem 1.6rem; font-size: 1rem; }
    /* 되돌릴 수 있어도 "목록에서 사라지는" 동작은 저장 버튼과 달라 보여야 한다(2026-09-08). */
    .btn-danger { background: var(--surface); color: var(--bad); border-color: var(--red); font-weight: 600; }
    .btn-danger:hover { background: var(--danger-bg); border-color: var(--bad); }

    /* 그래프 — 내부 크기는 JS가 실제 표시 폭·화면 배율에 맞춰 다시 잡는다(U-01).
       그래서 여기서는 폭만 정하고 높이는 건드리지 않는다. */
    canvas.chart, canvas.chart-usage, canvas.chart-peak, canvas.chart-bill {
      display: block; width: 100%; max-width: 100%;
      border: 1px solid var(--border); border-radius: 10px; background: var(--card);
    }
    canvas.chart:focus-visible, canvas.chart-usage:focus-visible, canvas.chart-peak:focus-visible, canvas.chart-bill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    /* 고른 지점의 값을 글자로도 보여 준다 — 마우스가 없거나 그림을 못 봐도 읽을 수 있다(U-02). */
    .chart-readout {
      min-height: 1.2rem; margin: 0.25rem 0 0.2rem;
      font-size: 0.85rem; color: var(--text-muted);
    }
    .chart-readout:empty::before { content: "그래프를 누르거나, 눌러서 고른 뒤 화살표 키로 옮기면 값이 여기에 나옵니다."; opacity: 0.75; }
    .chart-table summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--accent); }
    .chart-table table { font-size: 0.85rem; }

    /* 목록 행 안의 접히는 동작 묶음. 행마다 버튼이 늘어서 무엇이 주 행동인지
       안 보이던 것을 줄인다 — 갈 수 있는 곳은 그대로 두고 접기만 한다. */
    .row-actions > summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--accent); }
    .row-actions[open] > summary { margin-bottom: 0.4rem; }
    .row-actions .hint { margin: 0.35rem 0 0.2rem; }
    .row-actions form { display: inline; }

    .error { color: var(--bad); margin-bottom: 1rem; }
    .card.error-card { border-color: var(--red); background: var(--danger-bg); color: var(--bad); }
    .card.error-card ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
    .empty { color: var(--label2); padding: 1.5rem 0; }
    .hint { color: var(--text-muted); font-size: 0.85rem; margin: 0.3rem 0 0; }
    /* 경고 박스 — "계산이 아직 없다/검증되지 않았다"를 알리는 자리.
       힌트(회색)와 같은 톤이면 상담자가 그냥 지나친다. */
    .warn-note {
      background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text);
      border-radius: 7px; padding: 0.6rem 0.75rem; font-size: 0.85rem; margin: 0.4rem 0 0;
    }
    /* 저장·삭제 직후 확인 배너 — 화면마다 확인 방식이 달랐던 것을 (
       2번)을 "항상 명시적으로 알린다"로 통일하는 자리. 새 사건 저장(case_saved.html)처럼
       재현 후보 등 알려줄 내용이 많은 화면은 계속 전용 페이지를 쓴다 — 이 배너는 그 외
       화면(고객 등록·편집·삭제, 사건 편집)에서 조용히 넘어가던 것만 없앤다. */
    .flash-good {
      background: var(--success-bg); border: 1px solid var(--good); color: var(--green);
      border-radius: 7px; padding: 0.6rem 0.75rem; font-size: 0.9rem; margin: 0 0 1rem;
    }
    .match-panel { background: var(--fill); border: 1px solid var(--sep); border-radius: var(--radius); padding: 0.8rem 1rem; margin-bottom: var(--gap); }
    .match-panel p:last-child { margin-bottom: 0; }

    fieldset.invoice-row { margin: 0 0 0.9rem; border: 1px solid var(--border); border-radius: 8px; padding: 0.9rem 1rem 1rem; background: var(--fill); }
    fieldset.invoice-row legend { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); padding: 0 0.4rem; }
    .calc-check { font-size: 0.85rem; font-weight: 600; margin: 0.4rem 0 0; }
    .saved-case { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
    .run-log { background: var(--rail-bg); color: var(--rail-fg); padding: 1rem; border-radius: 8px; min-height: 4rem; max-height: 24rem; overflow-y: auto; white-space: pre-wrap; font-family: Consolas, monospace; font-size: 0.85rem; }
    .report-frame { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: 8px; margin-top: 1rem; background: var(--surface); }

    /* 상단 고정 내비게이션 — 화면마다 자기 자신을 가리키는 되돌이 breadcrumb
       대신 "지금 어디에 있는가"를 항상 보여준다(사용자 브리프 디자인 방향:
       "상단에 고정된 작은 브랜드 영역과 홈/고객/상담/간편 도구"). */
    /* ── 앱 껍데기: 2단 헤더 ──────────────────────────────────────────
       1단은 "지금 누가·어디서"(브랜드·현재 현장·계정), 2단은 "무슨 일"(업무 영역).
       예전에는 이 둘이 한 줄에 같은 무게로 섞여 링크 뭉치로 보였다. */
    .app-bar {
      display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
      padding: var(--s3) 0;
    }
    .app-bar .brand {
      display: inline-flex; align-items: center; gap: var(--s2);
      font-weight: 700; color: var(--text); letter-spacing: -0.01em;
    }
    .app-bar .brand:hover { text-decoration: none; }
    /* ── 누르는 것은 전부 44px 이상 ────────────────────────────────
       실측에서 브랜드 24.8 · 현장 슬롯 30.1 · 계정 17 · 로그아웃 30.1px로
       손가락 크기에 못 미쳤다(2026-09-08 header-check.json). 2단 탭은 이미
       48.8px였지만 "현장"만 폭 32px이라 좌우도 함께 못 박는다. */
    .app-bar a, .app-bar button, .app-bar .who a {
      display: inline-flex; align-items: center;
      min-height: 44px; min-width: 44px;
    }
    .app-bar .btn-quiet { padding: var(--s2) var(--s3); font-size: var(--t-cap); }
    .app-bar .brand img.selected-wordmark { display: block; width: 224px; height: auto; }
    .app-bar .spacer { flex: 1 1 auto; }

    /* 현재 현장 — 이 앱의 모든 기록이 매이는 축이라 헤더의 독립 슬롯으로 둔다. */
    .site-slot {
      display: inline-flex; align-items: center; gap: var(--s2);
      padding: var(--s1) var(--s3); border: 1px solid var(--border-strong);
      border-radius: 999px; background: var(--surface);
      font-size: var(--t-cap); color: var(--text); max-width: 22rem;
    }
    .site-slot:hover { border-color: var(--accent); text-decoration: none; }
    /* 좁은 화면에서 알약이 눌리면 "현/장"으로 세로로 쪼개진다. 라벨은 안 접는다. */
    .site-slot .k { color: var(--text-muted); white-space: nowrap; }
    .site-slot .v { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .site-slot.empty .v { font-weight: 500; color: var(--text-muted); }

    .app-bar .who { font-size: var(--t-cap); color: var(--text-muted); }
    .app-bar .who a { color: var(--text-muted); }
    .app-bar .who a:hover { color: var(--accent); }
    .app-bar form { display: inline; }

    /* 2단: 업무 영역. 같은 무게·같은 간격, 현재 위치만 밑줄로 표시. */
    .work-tabs {
      display: flex; gap: var(--s5); border-bottom: 1px solid var(--border);
      margin-bottom: var(--s6); overflow-x: auto; scrollbar-width: thin;
    }
    .work-tabs .work-tab-form { margin: 0; display: flex; flex: 0 0 auto; }
    .work-tabs .work-tab-button { background: none; border: 0; border-radius: 0; font-family: inherit; cursor: pointer; }
    .work-tabs a, .work-tabs .work-tab-button {
      flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
      min-width: 44px; min-height: 44px;
      padding: var(--s3) 0 calc(var(--s3) - 2px);
      color: var(--text-muted); font-weight: 600; font-size: var(--t-body);
      border-bottom: 2px solid transparent; white-space: nowrap;
    }
    .work-tabs a:hover, .work-tabs .work-tab-button:hover { color: var(--text); text-decoration: none; }
    .work-tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

    /* 영역 안의 하위 이동 — 최상단에 늘어놓지 않고 그 영역에서만 보인다. */
    .sub-nav { display: flex; gap: var(--s4); flex-wrap: wrap; margin: calc(var(--s6) * -1 + var(--s4)) 0 var(--s5); }
    .sub-nav a {
      display: inline-flex; align-items: center; justify-content: center;
      min-height: 44px; min-width: 44px;
      font-size: var(--t-cap); font-weight: 600; color: var(--text-muted);
    }
    .sub-nav a[aria-current="page"] { color: var(--accent); }

    @media (max-width: 40rem) {
      .app-bar { gap: var(--s3); padding: var(--s3) 0; }
      .app-bar .brand { order: 1; }
      .app-bar > form { order: 2; margin-left: auto; }
      .app-bar .site-slot { order: 3; }
      .app-bar .who { order: 4; }
      .app-bar .spacer { display: none; }
      .app-bar .brand img.selected-wordmark { width: 192px; }
      .site-slot { max-width: 12rem; }
      .work-tabs { gap: var(--s1); justify-content: space-between; margin-bottom: var(--s5); }
    }

    /* ── 표면 세 가지 — "전부 카드"를 끝낸다 ──────────────────────
       .panel 기본(테두리 없음) · .card 셀 수 있는 항목 · .rail 한 단 뒤의 참고 */
    .panel { margin: 0 0 var(--s6); }
    .panel > :last-child { margin-bottom: 0; }
    .rail {
      background: var(--fill); border-radius: var(--radius);
      padding: var(--s4) var(--s5); margin: 0 0 var(--s5);
      color: var(--text-muted); font-size: var(--t-cap);
    }
    .rail > :last-child { margin-bottom: 0; }
    .measure { max-width: var(--measure); }

    /* ── 표: 이 제품의 주인공. 숫자를 읽기 좋게. ── */
    .table-wrap table { border-collapse: collapse; }
    .table-wrap th, .table-wrap td { padding: var(--s3) var(--s3); }
    .table-wrap thead th {
      position: sticky; top: 0; z-index: 1; background: var(--surface);
      border-bottom: 1px solid var(--border-strong);
      font-size: var(--t-cap); color: var(--text-muted); font-weight: 700; text-align: left;
    }
    .table-wrap tbody td, .table-wrap tbody th { border-bottom: 1px solid var(--border); }
    /* 숫자는 자릿수가 흔들리지 않게 고정폭 숫자로 우측 정렬 */
    .table-wrap td[align=right], .table-wrap th[align=right],
    .table-wrap .num { text-align: right; font-family: var(--font-number); font-variant-numeric: tabular-nums; }

    /* ── 폼: 입력칸이 화면 폭까지 늘어나지 않게 ── */
    .field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea { max-width: var(--field-max); }
    .field .hint { font-size: var(--t-cap); color: var(--text-muted); margin: var(--s1) 0 0; }

    /* ── 버튼: 조용한 텍스트 버튼 하나를 더한다(취소·되돌아가기용) ── */
    .btn-quiet {
      min-height: 44px; background: transparent; border-color: transparent; color: var(--text-muted); font-weight: 600;
    }
    .btn-quiet:hover { background: transparent; border-color: var(--border-strong); color: var(--text); }

    /* 입력 폼(D2/F2)의 단계 진행 표시 — 한 페이지 안에 이미 나뉜 4개 구획
       (계약정보/청구서/추가입력/확인)에 "지금 몇 단계인가"를 얹는다. 필드
       순서·name 속성은 건드리지 않는다(사용자 브리프 3번 — 실제 페이지
       분리·단계별 저장까지는 이번 변경 범위 밖이다). */
    .step-nav {
      position: sticky; top: 0; z-index: 5; display: flex; gap: 0.5rem; flex-wrap: wrap;
      background: var(--bg); padding: 0.6rem 0; margin-bottom: 1rem; border-bottom: 1px solid var(--border);
    }
    .step-nav a {
      display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem;
      border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-muted);
      font-size: 0.85rem; font-weight: 600; background: var(--surface);
    }
    .step-nav a:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
    .step-nav a.current { border-color: var(--accent); color: var(--accent); background: var(--fill); }

/* ================================================================ 랜딩·로그인 */
/* 세로선 하나를 축으로 삼고 나머지는 조용하게. 색은 위 토큰만 쓰고 외부 자원을 부르지 않는다. */

/* 공개 화면은 업무 화면보다 여백을 더 준다. body 기본 padding을 덮어쓴다. */
body.public { padding: 0 0 4rem; }
/* .page는 좌우 여백이 body에 있었다. 공개 화면은 body 여백을 없앴으므로 여기서 준다. */
.public .page { max-width: 60rem; padding: 0 1.25rem; }

/* --- 상단 막대 (로그인 전) --- */
.shell-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; padding: 1.1rem 0; margin-bottom: 0;
  border-bottom: 1px solid var(--border);
}
.shell-bar .brand { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 600; color: var(--text); }
.shell-bar .brand:hover { text-decoration: none; }
.shell-bar .brand { min-height: 44px; }
.shell-bar .brand img.selected-wordmark,
.landing .intro-bar .brand img.selected-wordmark { display: block; width: 224px; height: auto; border-radius: 0; }
.landing .intro-bar .brand:has(.selected-wordmark) { min-height: 44px; }
.shell-bar .brand small { display: block; font-size: 0.75rem; font-weight: 400; color: var(--text-muted); }
.shell-bar .bar-right { display: inline-flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.shell-bar .who { font-size: 0.85rem; color: var(--text-muted); }
.shell-bar form { display: inline; }

/* --- 세로선: 이 페이지를 관통하는 하나의 형태 --- */
.threaded { position: relative; padding-left: 2.25rem; }
.threaded::before {
  content: ""; position: absolute; left: 0.5rem; top: 0; bottom: 0;
  width: 1px; background: var(--border-strong);
}

/* 히어로 규칙은 landing.css가 전부 갖는다.
   여기 있던 옛 .hero 규칙(max-width: 34rem 등)은 지웠다. 새 소개 화면은 히어로를
   화면 폭 전체로 쓰는데, 특이성이 낮아도 새 규칙이 선언하지 않은 max-width가 그대로
   살아남아 제목이 화면 왼쪽 절반에 갇혔다. 같은 이름의 규칙을 두 파일에 두지 않는다. */

/* --- 섹션 --- */
.band { padding: 2.6rem 0; border-top: 1px solid var(--border); }
.band h2 { font-size: 1.02rem; font-weight: 700; margin: 0 0 0.35rem; color: var(--text); letter-spacing: -0.005em; }
.band .lead { color: var(--text-muted); margin: 0 0 1.4rem; max-width: 34rem; }

/* 업무 셋 — 카드. 여기만 상자를 쓴다. */
.work-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.9rem; }
.work-set article {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.15rem 1.2rem;
}
.work-set h3 { margin: 0 0 0.5rem; font-size: 0.97rem; font-weight: 700; color: var(--accent); }
.work-set p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.work-set .bound { display: block; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--border);
  font-size: 0.85rem; color: var(--text-muted); }

/* 순서 — 상자 대신 줄. 실제로 순서가 있는 내용이라 번호를 쓴다. */
.order { margin: 0; padding: 0; list-style: none; max-width: 40rem; }
.order li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.9rem;
  padding: 0.95rem 0; border-top: 1px solid var(--border); align-items: baseline; }
.order li:first-child { border-top: 0; }
.order .n { font-variant-numeric: tabular-nums; font-size: 0.9rem; font-weight: 700; color: var(--border-strong); }
.order strong { display: block; font-size: 0.97rem; margin-bottom: 0.2rem; }
.order span { color: var(--text-muted); font-size: 0.92rem; }

/* --- 로그인·계정 --- */
.auth-wrap { max-width: 25rem; margin: 3.5rem auto 0; }
.auth-wrap .card { padding: 1.7rem 1.6rem; }
.auth-wrap h1 { font-size: 1.25rem; margin: 0 0 0.4rem; color: var(--accent); letter-spacing: -0.01em; }
.auth-wrap .auth-lead { color: var(--text-muted); margin: 0 0 1.4rem; font-size: 0.92rem; }
.auth-wrap .btn { width: 100%; text-align: center; }
.auth-foot { margin-top: 1.1rem; font-size: 0.87rem; color: var(--text-muted); text-align: center; }

/* --- 바닥글 --- */
.shell-foot { margin-top: 3rem; padding-top: 1.3rem; border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.85rem; }
.shell-foot p { margin: 0.25rem 0; }

/* 키보드로 옮겨 다닐 때 어디에 있는지 늘 보이게 한다. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}
.skip-link {
  position: absolute; left: 0.6rem; top: -3rem; z-index: 20;
  background: var(--surface); border: 1px solid var(--accent); color: var(--accent);
  padding: 0.5rem 0.9rem; border-radius: 7px; font-weight: 600;
}
.skip-link:focus { top: 0.6rem; text-decoration: none; }

/* 움직임을 줄여 달라고 설정한 사람에게는 전환을 없앤다. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media (max-width: 40rem) {
  .threaded { padding-left: 1.4rem; }
  .threaded::before { left: 0.25rem; }
  .shell-bar { padding: 0.9rem 0; }
  .shell-bar .brand img.selected-wordmark,
  .landing .intro-bar .brand img.selected-wordmark { width: 192px; }
  .auth-wrap { margin-top: 1.6rem; padding: 0 1rem; }
}

/* First-use guidance for the three site-based workflows. */
.work-start-guide{border-left:3px solid var(--outline)}.work-start-guide h2{font-size:1.2rem;margin:8px 0}.work-start-guide>p{font-size:.9rem}.work-start-guide ol{padding-left:24px;margin:20px 0 0}.work-start-guide li{padding-left:5px;margin:14px 0}.work-start-guide li p{margin:5px 0;line-height:1.6}.work-start-guide li::marker{color:var(--green);font-weight:700}

.work-entry{max-width:920px;margin:35px auto}.work-entry header h1{font-size:2rem;margin:8px 0 14px}.work-entry header>p:last-child{color:var(--text-muted);line-height:1.7}.work-entry-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0;margin:30px 0;list-style:none}.work-entry-steps li{display:flex;flex-direction:column;gap:14px;background:var(--fill);border:1px solid var(--sep);border-radius:12px;padding:23px}.work-entry-steps span{font-size:12px;color:var(--green)}.work-entry-choice{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0;border-bottom:1px solid var(--border)}.work-entry input{max-width:440px}.work-entry .card{padding:28px}.work-entry .card h2{font-size:1.2rem}.work-entry-choice strong{overflow-wrap:anywhere}.work-entry-choice button{flex-shrink:0}@media(max-width:600px){.work-entry{margin:22px auto}.work-entry-steps{gap:8px}.work-entry-steps li{padding:15px 11px;font-size:13px}.work-entry-choice{align-items:start;flex-direction:column}.work-entry .card{padding:20px}}

/* DESIGN.md §4 — 공통 부품. 기존 화면은 현재 클래스/동작을 그대로 쓴다. */
body { font-family: var(--font-sans); background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23111' opacity='.025' filter='url(%23paper)' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }
::selection { background: var(--pill); color: var(--ink); }
input, textarea { caret-color: var(--ink); }
a { text-underline-offset: .2em; }
.table-wrap { scrollbar-color: var(--line-strong) var(--surface-sub); }
.table-wrap:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-secondary, .btn-danger, .btn-quiet, .step-nav a { min-height: 44px; min-width: 44px; }
.btn:disabled { cursor: not-allowed; background: var(--pill); color: var(--ink-muted); border-color: var(--line-strong); }
.chip-b-mut, .empty { color: var(--ink-muted); }
.eb-verdict, .eb-empty, .eb-category { background: var(--surface); border-radius: var(--radius-large); padding: 24px; }
.eb-verdict h2 { font-size: clamp(22px, 3vw, 30px); color: var(--ink); }
.eb-number { font-family: var(--font-number); font-variant-numeric: tabular-nums; }
.eb-number-hero { font-size: clamp(96px, 10vw, 120px); line-height: 1.1; }
.eb-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.eb-metric, .eb-next, .eb-evidence-body { background: var(--surface-sub); padding: 16px; border-radius: var(--radius-inner); }
.eb-metric .label, .eb-metric .unit { color: var(--ink-muted); font-size: 13px; }
.eb-metric .value { font-family: var(--font-number); font-size: clamp(26px, 3vw, 34px); overflow-wrap: anywhere; }
.eb-status { --status-color: var(--st-wait); display: inline-flex; align-items: center; gap: 8px; color: var(--status-color); font-size: 13px; }
.eb-status::before { content: ''; flex: 0 0 8px; height: 8px; border-radius: 50%; background: currentColor; }
.eb-status-effect { --status-color: var(--st-effect); }
.eb-status-keep { --status-color: var(--st-keep); }
.eb-status-warn { --status-color: var(--st-warn); }
.eb-status-need { --status-color: var(--st-need); }
.eb-status-danger { --status-color: var(--danger); }
.eb-results { border-top: 2px solid var(--ink); }
.eb-results > article { padding: 16px 0; border-bottom: 1px solid var(--line); }
.eb-evidence > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-inner); cursor: pointer; list-style: none; }
.eb-evidence > summary::-webkit-details-marker { display: none; }
.eb-evidence-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--primary); color: var(--surface); }
.eb-evidence-description { color: var(--ink-muted); font-size: 13px; }
.eb-evidence > summary::after { content: '펼치기 ↓'; margin-left: auto; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--pill); color: var(--ink); }
.eb-evidence[open] > summary { border-color: var(--ink); }
.eb-evidence[open] > summary::after { content: '접기 ↑'; }
.eb-evidence-body { margin-top: 8px; }
.eb-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--surface); }
.eb-tabs > a, .eb-tabs > button { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; min-height: 44px; min-width: 44px; border: 0; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.eb-tabs > [aria-pressed=true], .eb-tabs > [aria-selected=true], .eb-tabs > [aria-current=page] { background: var(--primary); color: var(--surface); }
.eb-category { border: 1.5px solid var(--line); }
.eb-category[aria-pressed=true] { border-color: var(--status-color, var(--primary)); }
.eb-locked { border: 1.5px dashed var(--line-strong); border-radius: var(--radius-inner); padding: 20px; background: var(--surface); }
.eb-measure { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.eb-measure label { display: inline-flex; align-items: center; min-height: 44px; }
.eb-stamp { display: inline-block; border: 3px solid var(--st-warn); border-radius: 18px; padding: 8px 16px; transform: rotate(-7deg); color: var(--st-warn); font-weight: 700; filter: url(#eb-ink-stamp); }
@media (max-width: 40rem) {
  body { padding-inline: 16px; }
  .eb-metrics { grid-template-columns: 1fr; }
  .eb-verdict, .eb-empty, .eb-category { padding: 20px; }
}
@media print { body { background-image: none; } .table-wrap { overflow: visible; } }

.eb-chart { display: block; max-width: 100%; height: auto; }
.eb-chart .bar { rx: 8px; }
.eb-chart .baseline { stroke: var(--ink); stroke-width: 2; }
.eb-chart .candidate { stroke: var(--st-warn); stroke-dasharray: 3 6; stroke-linecap: round; }
.eb-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--ink-muted); }
.eb-chart-source { text-align: right; color: var(--ink-muted); font-size: 12px; }