/* web/src/site.css — 민간인 웹 디자인 (DESIGN.md 2026-09-26 기준 · d4)
 *
 * 방향: «선명한 타이포그래피와 절제된 색으로 만든, 읽고 쓰기 편한 전역 이후의 경험 아카이브.»
 *   · 밝고 따뜻한 배경 위의 강한 검정 타이포 · 제목 ↔ 보조 문구의 큰 대비 · 제한적인 민간인 초록 포인트(앱의 링크·선택 초록 #006B50 · 2026-09-27 대표님)
 *   · 왼쪽 정렬 · 여백·굵기·구분선으로 위계 · 상자(카드)로 감싸지 않는다 · 주요 버튼은 검정
 *   · d4: 선택·현재 위치·링크 강조는 «자라나는 밑줄» 하나로 말한다(필터 · 메뉴 · 목록 제목 · 단계).
 *   · d4 움직임: 첫 화면 제목의 줄 단위 등장 한 번 · 목록 행이 화면에 들어올 때 차례로 떠오름 ·
 *     스크롤을 시작하면 머리 구분선 · 상세 읽기 진행선. 스크롤 자체는 브라우저 그대로 둔다(DESIGN.md §10).
 * 토큰은 :root 변수 하나로 관리한다(DESIGN.md §4 표와 같은 값). 컴포넌트마다 임의 색을 더하지 않는다.
 * 글자 크기는 rem이다 — 브라우저 글자 크기 설정(200%)을 따라간다.
 */
:root {
  /* 간격 — 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48px(2026-09-29 polish). 새 여백은 이 토큰으로 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;
  /* 글자 크기 — 역할 이름(2026-09-29 typeset). 0.5px 간격으로 흩어져 있던 13단계를 일곱 역할로 묶었다(13 · 14 · 15 · 16.5 · 17 · 18 · 20px).
     제목(clamp)은 따로다. 새 화면은 이 토큰만 쓴다. */
  --fs-micro: 0.8125rem;   /* 13 — 로고 곁글자 · 글자 수 · 아주 작은 표시 */
  --fs-meta: 0.875rem;     /* 14 — 메타 줄 · 도움말 · 상태 */
  --fs-ui: 0.9375rem;      /* 15 — 메뉴 · 필터 · 버튼 · 라벨 · 보조 본문 */
  --fs-body: 1.03125rem;   /* 16.5 — 본문 · 입력칸(DESIGN §5) */
  --fs-read: 1.0625rem;    /* 17 — 읽기 본문 · 짧은 리드 */
  --fs-h4: 1.125rem;       /* 18 — 작은 제목 */
  --fs-h3: 1.25rem;        /* 20 — 구획 제목 */
  --page: #F4F5F1;           /* 달력 종이 — 초록 쪽으로 아주 조금 기운 회백(2026-09-30 «전역 달력») */
  --surface: #FFFFFF;        /* surface — 입력창 · 확인창 */
  --field: #FFFFFF;          /* 입력칸 면 — 흰 칸(§56 · 칸 선은 .input의 안쪽 1px · 쓰는 중 2px 초록) */
  --mark-danger: #F8DAD6;    /* 삭제 글자 형광펜(빨간 글자 5.01:1) */
  --mark: #CDE9DC;           /* 형광펜 — 지금 답하고 있는 질문 라벨 · 강조 선택지(검정 글자 13.6:1) */
  --band: #EAECE6;           /* 홈 구획 띠 — 내용 종류가 바뀌는 구획(답을 기다리는 고민)의 바탕. 초록 링크 5.68:1 */
  --ink: #121412;            /* text-primary — 초록 쪽 검정 */
  --ink-2: #565B56;          /* text-secondary — 종이 위 6.3:1 */
  --line: #D5D9D2;           /* border-subtle — 장식용 구분선 */
  --line-strong: #7F857F;    /* border-control — 입력창 등 식별이 필요한 경계(3.68:1) */
  --accent: #006B50;         /* accent — 민간인 초록(앱 C.accent와 같은 값) · 링크 · 선택 밑줄 · 초점 · 작은 브랜드 포인트 · 바탕 위 6.20:1 */
  --accent-soft: #E1EFE8;    /* accent-soft — 글자 선택 영역(앱 C.ad와 같은 값) */
  --action: #121412;         /* action — 주요 버튼 배경 */
  --action-press: #2A2E2A;
  --on-action: #FFFFFF;
  --danger: #B42318;
  --danger-soft: #FBEAE8;
  --success: #006B50;        /* 제출 완료 체크 — 강조색과 같은 초록(초록이 두 가지로 갈리지 않게) */
  --amber-bg: #F6EFD8;       /* 개발 미리보기 표시 전용 */
  --amber-fg: #5C4A10;
  --amber-line: #E7DDB8;
  --skeleton: #E8EBE5;       /* 불러오는 중 자리 */
  --disabled-bg: #E3E6E1;
  --disabled-fg: #5A5F5A;
  --scrim: rgba(18, 20, 18, 0.5);
  --shadow-dialog: 0 12px 40px rgba(0, 0, 0, 0.18);
  --spinner-track: rgba(255, 255, 255, 0.45);
  --spinner-track-dark: rgba(0, 0, 0, 0.15);
  --r-ctl: 3px;              /* 버튼 · 입력 — 달력 칸의 모서리 */
  --r-dialog: 6px;
  --cal-line: #C9CEC6;       /* 달력 칸 선 — 장식선보다 한 단 진하게(칸이 칸으로 읽히게) */
  --cal-past: #9AA09A;       /* 흐린 날 숫자(D+3 · 짙어지기 전) */
  --holiday: #C4401D;        /* 전역일 = 빨간 날(공휴일 인쇄 · 사이트 전체 · 오류 빨강 --danger와 다른 주홍 쪽 · 흰 면 5.1:1) */
  --gutter: 20px;
  --w-wide: 1200px;          /* 홈 · 목록 */
  --w-read: 720px;           /* 상세 본문 */
  --w-form: 680px;           /* 글쓰기 · 상황 입력 */
  --measure: 40em;           /* 한글 한 줄 약 40자 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms;
  --head-h: 56px;            /* 붙어 있는 머리의 높이 — 초점·앵커가 그 아래에 서도록(좁은 화면은 메뉴가 둘째 줄이라 더 높다) */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
}
@media (max-width: 359px) { :root { --gutter: 16px; } }
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; --head-h: 72px; } }
@media (max-width: 639px) { :root { --head-h: 96px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--page); color: var(--ink); font-family: var(--font);
  font-size: var(--fs-body); line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased;
  min-width: 320px; min-height: 100dvh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
::selection { background: var(--accent-soft); color: var(--ink); }
input, textarea { caret-color: var(--accent); }
a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }   /* 화면이 옮긴 초점(제목·완료 표시) — 조작 대상이 아니다(critique 2026-09-28) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: 8px; transform: translateY(calc(-100% - 16px)); z-index: 100; background: var(--ink); color: var(--on-action); padding: 10px 14px; border-radius: var(--r-ctl); text-decoration: none; }
.skip:focus { transform: none; }   /* 글자를 키워도 머리 위로 비치지 않게 위치 대신 transform으로 숨긴다 */
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }
.long-url { word-break: break-all; }
/* 초점을 옮기며 스크롤할 때 붙어 있는 머리 아래에 선다(머리 높이 + 20 · 좁은 화면은 메뉴 줄까지) */
h1, h2, h3, [tabindex="-1"], :target, .field { scroll-margin-top: calc(var(--head-h) + 20px); }
/* 키보드로 거슬러 올라갈 때(Shift+Tab) 붙은 머리가 초점을 가리지 않게 — WCAG 2.4.11. --head-h는 core.js가 실제 머리 높이로 맞춘다(글자 200%에서도) */
html { scroll-padding-top: calc(var(--head-h) + 12px); }
.count, .tabular { font-variant-numeric: tabular-nums; }

/* ── 폭 ── */
.wrap { max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--gutter); width: 100%; }
.wrap-read { max-width: var(--w-read); margin: 0 auto; padding: 0 var(--gutter); width: 100%; }
.wrap-form { max-width: var(--w-form); margin: 0 auto; padding: 0 var(--gutter); width: 100%; }

/* ── 선택은 밑줄, 가리킴은 형광펜(2026-09-27 대표님) ──
 * 선택 · 현재 위치(켜진 필터 · 지금 메뉴 · 글쓰기 단계)는 글자 아래 2px 초록 밑줄로 남는다.
 * 마우스를 올리면 밑줄 대신 글자 아래쪽 절반에 형광펜(--mark)이 왼쪽부터 칠해진다 — 질문 라벨의 형광펜과 같은 말투다. */
.nav a, .filter-opt, .tab-opt, .step-tabs > span { position: relative; }
.nav a, .filter-opt, .tab-opt { isolation: isolate; }   /* 형광펜(z-index −1)이 글자 뒤 · 이 요소 안에만 깔리게 */
.nav a::after, .filter-opt::after, .tab-opt::after, .step-tabs > span::after {
  content: ""; position: absolute; left: var(--u-inset, 0); right: var(--u-inset, 0); bottom: var(--u-bottom, 9px);
  height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center;
  transition: transform 240ms var(--ease-out);
}
.nav a[aria-current="page"]::after, .filter-opt[aria-pressed="true"]::after, .filter-opt[aria-current="true"]::after, .tab-opt[aria-selected="true"]::after, .step-tabs [aria-current="step"]::after { transform: scaleX(1); }
.nav a::before, .filter-opt::before, .tab-opt::before {
  content: ""; position: absolute; z-index: -1; left: calc(var(--u-inset, 0px) - 2px); right: calc(var(--u-inset, 0px) - 2px); top: calc(50% - 0.02em); height: 0.56em;
  background: var(--mark); transform: scaleX(0); transform-origin: left center; transition: transform 280ms var(--ease-out);
}
@media (hover: hover) { .nav a:hover::before, .filter-opt:hover::before, .tab-opt:hover::before { transform: scaleX(1); } }

/* 목록 제목 · 대표 인용 — 가리키면 형광펜이 줄마다 칠해진다(여러 줄이어도 줄마다) */
.u { background: linear-gradient(var(--mark), var(--mark)) 0 88% / 0 0.5em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 360ms var(--ease-out); }
@media (hover: hover) { .item-link:hover .u, .feature:hover .u { background-size: 100% 0.5em; } }
.item-link:focus-visible .u, .feature:focus-visible .u { background-size: 100% 0.5em; }

/* 그린 꺾쇠 — 글자 기호 대신 */
.go { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.go::after { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .item-link:hover .go::after, .feature:hover .go::after { transform: translateX(3px) rotate(45deg); } }
/* 문장 밖에 홀로 선 이동 링크(전부 보기 · 상황 바꾸기 · 질문 보기 …)는 이동 버튼과 같은 굵은 글자 + 꺾쇠다.
 * 밑줄은 문장 속 링크에만 남는다. 누르는 영역은 위아래로 넓히되 줄 간격은 그대로 둔다. */
a.go, .section-head > a { color: var(--ink); font-weight: 700; text-decoration: none; }
a.go { padding: 11px 0; margin: -11px 0; min-height: 44px; }   /* 홀로 선 이동 글자 — 누르는 높이 44px(글자 줄 높이가 22 아래여도 · critique B2 43.7) */
.section-head > a { gap: 8px; }
.section-head > a::after { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { a.go:hover, .section-head > a:hover { color: var(--accent); } }
@media (hover: hover) and (pointer: fine) { a.go:hover::after, .section-head > a:hover::after { transform: translateX(3px) rotate(45deg); } }

/* ── 머리 ── */
.top { background: var(--page); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; transition: border-color 200ms linear; }
.js .top { border-bottom-color: transparent; }   /* 스크립트가 있으면 맨 위에서는 선을 걷고, 스크롤을 시작하면 다시 긋는다 */
.js .top.is-scrolled { border-bottom-color: var(--line); }
.top-inner { display: flex; align-items: center; gap: 4px; min-height: 56px; }
@media (min-width: 1024px) { .top-inner { min-height: 72px; } }
.logo { font-weight: 800; font-size: var(--fs-h3); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; margin-right: 10px; display: inline-flex; align-items: center; min-height: 44px; }
.nav { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav a { --u-inset: 10px; --u-bottom: 8px; color: var(--ink-2); text-decoration: none; font-size: var(--fs-ui); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; transition: color var(--t-fast); }
.nav a[aria-current="page"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--ink); } }
.top-right { display: flex; align-items: center; gap: 6px; }
.top-right .btn-write { display: inline-flex; min-height: 44px; padding: 0 4px; font-size: var(--fs-ui); }
.top-right .btn-write .long { display: none; }
@media (min-width: 600px) { .top-right .btn-write .long { display: inline; } .top-right .btn-write .short { display: none; } }
@media (max-width: 359px) { .nav a { padding: 0 8px; --u-inset: 8px; } }
/* 상세 읽기 진행선 — 스크롤에 직접 묶인 표시(자동 재생 아님). 지원하지 않는 브라우저는 그리지 않는다. */
.read-progress { display: none; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  body:has(#view-detail:not([hidden])) .read-progress,
  body:has(#q-detail-view:not([hidden])) .read-progress { display: block; animation: read-progress linear both; animation-timeline: scroll(root block); }
}
@keyframes read-progress { to { transform: scaleX(1); } }

/* ── 미리보기(개발) 표시 ── */
.preview-flag { font-size: var(--fs-micro); color: var(--amber-fg); background: var(--amber-bg); border-bottom: 1px solid var(--amber-line); }
.preview-flag summary { cursor: pointer; padding: 0 var(--gutter); list-style: none; display: flex; align-items: center; gap: 8px; max-width: var(--w-wide); margin: 0 auto; min-height: 44px; }
.preview-flag summary::-webkit-details-marker { display: none; }
.preview-flag summary::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.preview-flag p { padding: 0 var(--gutter) 10px; max-width: var(--w-wide); margin: 0 auto; line-height: 1.5; }

/* ── 타이포 ── */
.h-home { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 4.5rem); line-height: 1.16; font-weight: 900; letter-spacing: -0.03em; margin-bottom: 20px; text-wrap: balance; }   /* 900 — 실제 Pretendard Variable을 불러온 뒤(2026-09-30) 무게 대비를 낸다 */
.h-page { font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.625rem); line-height: 1.28; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.h-detail { font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem); line-height: 1.28; font-weight: 800; letter-spacing: -0.02em; margin: 8px 0 12px; text-wrap: balance; }
.h-section { font-size: clamp(1.4375rem, 1.3rem + 0.5vw, 1.875rem); line-height: 1.35; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.h-sub { font-size: var(--fs-ui); font-weight: 700; color: var(--ink-2); margin: 28px 0 6px; }
.lead { font-size: var(--fs-read); line-height: 1.7; color: var(--ink-2); max-width: var(--measure); }
@media (min-width: 1024px) { .lead { font-size: var(--fs-h4); } body { font-size: var(--fs-read); } }
.meta { font-size: var(--fs-meta); color: var(--ink-2); line-height: 1.55; }
.small { font-size: var(--fs-meta); }
.muted { color: var(--ink-2); }
.body-text { font-size: var(--fs-read); line-height: 1.8; white-space: pre-line; max-width: var(--measure); }
@media (min-width: 1024px) { .body-text { font-size: var(--fs-h4); } }
.body-text + .h-sub { margin-top: 32px; }

/* 첫 화면 제목 — 연출 없이 선다(2026-09-30 critique: 줄 단위 등장은 템플릿 연출 · 이 화면의 연출은 달력 한 줄뿐). 줄 나눔만 남긴다. */
.h-home .ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.h-home .ln > span { display: inline-block; }

/* ── 구획 ──
 * 구획끼리는 줄로 가르지 않는다. 줄은 «같은 목록 안의 다음 글»에만 쓰고, 구획이 바뀌는 건 여백과 바탕(띠)으로 말한다. */
.section { padding: 48px 0; }
.section .list { border-top: 0; }
.section .list > .item:first-child .item-link { padding-top: 4px; }
.section .list > .item:last-child { border-bottom: 0; }
.section-band { background: var(--band); padding: 56px 0; margin-top: 48px; }
.section-band + .section { padding-top: 56px; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; margin-bottom: 12px; }
.section-head > h2 { grid-column: 1; grid-row: 1; }
.section-head > a { grid-column: 2; grid-row: 1; font-size: var(--fs-meta); font-weight: 700; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.section-head > .meta { grid-column: 1 / -1; grid-row: 2; margin-top: 6px; max-width: var(--measure); }
.page-head { padding: 28px 0 12px; }
.page-head .meta { margin-top: 8px; max-width: var(--measure); }
.divider { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
/* 데스크톱 홈: 왼쪽 구획 제목이 붙어서 따라오고 오른쪽 목록이 흐른다 */
@media (min-width: 1024px) {
  .section { padding: 72px 0; }
  .section + .section { padding-top: 112px; }
  .section-band { padding: 96px 0; margin-top: 40px; }
  .section + .section-band { padding-top: 96px; }
  .section-band + .section { padding-top: 104px; }
  .split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 48px; align-items: start; }
  .split > .section-head { display: block; position: sticky; top: 112px; margin: 0; }
  .split > .section-head > .meta { margin-top: 12px; max-width: 24em; }
  .split > .section-head > a { margin-top: 12px; }
}

/* ── 버튼 ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-ctl); font-weight: 700; font-size: var(--fs-body); text-decoration: none; cursor: pointer; border: 1px solid transparent; min-height: 48px; padding: 0 20px; line-height: 1.25; font-family: inherit; text-align: center; -webkit-tap-highlight-color: transparent; transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out), transform 140ms var(--ease-out); }
.btn-primary { background: var(--action); color: var(--on-action); }
.btn-primary:active { background: var(--action-press); }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--action-press); } }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] { background: var(--disabled-bg); color: var(--disabled-fg); cursor: default; }
/* 버튼은 세 층이다(2026-09-27 대표님 A안) — 테두리 상자 버튼은 없다.
 *   주요 행동  = 검정 면(.btn-primary · 화면당 하나)
 *   이동       = 굵은 글자 + 그린 꺾쇠(.btn-outline.btn-go · 목록의 «경험 읽기 ›»와 같은 말투)
 *   그 자리 조작 = 꺾쇠 없는 굵은 글자(.btn-outline · 수정하기 · 다시 시도 · 닫기 · 복사 · 이전 · 취소)
 *   삭제       = 빨간 글자(.btn-danger) · 확인창의 최종 삭제만 빨간 면
 * 누르는 높이는 모두 44px 이상 그대로다. */
.btn-outline { background: transparent; color: var(--ink); border-color: transparent; }
@media (hover: hover) and (pointer: fine) { .btn-outline:hover { color: var(--accent); } }
.btn-outline:disabled { color: var(--disabled-fg); cursor: default; }
.btn.btn-go { justify-content: flex-start; padding-left: 2px; padding-right: 2px; gap: 8px; }
.btn-go::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-top: 1.75px solid currentColor; border-right: 1.75px solid currentColor; transform: rotate(45deg); transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn-go:hover::after { transform: translateX(3px) rotate(45deg); } }
.btn-row > .btn.btn-go, .cta .btn.btn-go { flex: 0 0 auto; width: auto; min-width: 0; }
.btn-go-lg { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); font-weight: 800; letter-spacing: -0.015em; gap: 12px; min-height: 48px; }
.btn-go-lg::after { width: 11px; height: 11px; border-width: 2.25px 2.25px 0 0; }
/* 조작·삭제 글자 버튼은 글자만큼만 폭을 쓰고(옆의 검정 버튼이 남은 폭을 가진다), 줄의 첫 버튼은 본문 왼쪽 선에 맞춘다 */
.btn.btn-outline:not(.btn-go), .btn.btn-danger { padding-left: 12px; padding-right: 12px; }
.btn-row > .btn.btn-outline, .btn-row > .btn.btn-danger:not(:last-child) { flex: 0 0 auto; }
.btn-row > .btn-outline:first-child:not(.btn-go), .btn-row-inline > .btn-outline:first-child:not(.btn-go), .btn-row-inline > .btn-danger:first-child { margin-left: -12px; }
/* 작은 조작(전부 해제 · 신고 · 초안 지우기 · 연결 끊기) — 조작 버튼과 같은 글자 말투를 한 단 가볍게. 밑줄 없음 */
.btn-text { display: inline-flex; align-items: center; background: transparent; color: var(--ink); border: 0; min-height: 44px; padding: 0 8px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .btn-text:hover { color: var(--accent); } }
.btn-danger { background: transparent; color: var(--danger); border-color: transparent; }
/* 삭제 글자도 가리키면 밑줄 대신 연붉은 형광펜 */
.btn.btn-danger { position: relative; isolation: isolate; }
.btn.btn-danger::before { content: ""; position: absolute; z-index: -1; left: 10px; right: 10px; top: calc(50% - 0.02em); height: 0.56em; background: var(--mark-danger); transform: scaleX(0); transform-origin: left center; transition: transform 280ms var(--ease-out); }
@media (hover: hover) { .btn.btn-danger:hover::before { transform: scaleX(1); } }
dialog.confirm .btn-danger { background: var(--danger); color: var(--on-action); }   /* 확인창의 최종 삭제만 빨간 면(흰 글자 6.5:1) */
dialog.confirm .btn-danger::before { display: none; }   /* 확인창의 빨간 면 버튼에는 형광펜 없음 */
.btn-sm { min-height: 44px; padding: 0 14px; font-size: var(--fs-ui); }
.btn-lg { font-size: var(--fs-read); min-height: 52px; padding: 0 24px; }
.btn-block { width: 100%; }
.btn-busy { display: inline-flex; align-items: center; gap: 8px; }
.btn-busy::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--spinner-track); border-top-color: var(--on-action); animation: spin .8s linear infinite; }
.btn-outline .btn-busy::before, .btn-text .btn-busy::before { border-color: var(--spinner-track-dark); border-top-color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.btn-row > .btn { flex: 1 1 160px; }
.btn-row > .btn.btn-text { flex: 0 0 auto; }
.btn-row-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-top: 28px; }
.cta .btn { width: 100%; }
@media (min-width: 600px) { .cta { flex-direction: row; align-items: center; gap: 24px; } .cta .btn { width: auto; min-width: 220px; } }
/* 첫 화면의 둘째 행동 — 이동 버튼과 같은 굵은 글자 + 꺾쇠(문장 속 초록 밑줄 링크와 구별) */
.link-secondary { font-size: var(--fs-read); font-weight: 700; color: var(--ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 2px; }
.link-secondary::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-top: 1.75px solid currentColor; border-right: 1.75px solid currentColor; transform: rotate(45deg); transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-secondary:hover { color: var(--accent); } }
@media (hover: hover) and (pointer: fine) { .link-secondary:hover::after { transform: translateX(3px) rotate(45deg); } }

/* ── 홈 ── */
.hero { padding: 44px 0 36px; }
.hero-grid { display: grid; gap: 28px; }
.hero-side { display: none; } /* 모바일·태블릿: 바로 아래 목록이 같은 글을 보여 주므로 대표 인용은 데스크톱에서만 */
@media (min-width: 1024px) {
  .hero-side { display: block; }
  [data-layout="two"] .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: end; }
  .hero { padding: 88px 0 64px; }
}
.hero-note { font-size: var(--fs-meta); color: var(--ink-2); margin-top: 18px; }
/* 대표 인용 — 상자가 아니라 위쪽 굵은 선 하나와 큰 인용문 */
.feature { display: block; text-decoration: none; color: inherit; border-top: 2px solid var(--ink); padding-top: 18px; }
.feature-quote { position: relative; font-size: clamp(1.375rem, 1.05rem + 0.6vw, 1.75rem); line-height: 1.5; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); margin: 10px 0 20px; quotes: "\201C" "\201D"; }
.feature-quote::before { content: open-quote; position: absolute; left: -0.62em; top: 0.06em; font-size: 1.7em; font-weight: 900; color: var(--accent); line-height: 1; }   /* 걸린 여는 따옴표(hanging punctuation) — 인용을 지면 인용문처럼 */
.feature-quote::after { content: close-quote; }
.feature-foot { font-size: var(--fs-meta); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.feature-title { color: var(--ink); font-weight: 700; }
/* 내 차례(해볼 일 · 해본 일 나누기) — 한 목록의 두 글. 줄은 둘 사이에만(목록 위·아래 줄 없음 · §14) */

/* ── 목록(구분선형) ── */
.list { list-style: none; border-top: 1px solid var(--line); }
.item { border-bottom: 1px solid var(--line); }
.item-link { display: block; padding: 20px 0 18px; text-decoration: none; color: inherit; }
.item-meta { font-size: var(--fs-meta); color: var(--ink-2); margin-bottom: 6px; }
.item-title { font-size: clamp(1.25rem, 1.15rem + 0.3vw, 1.5rem); line-height: 1.4; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; max-width: var(--measure); }
.item-body { font-size: var(--fs-body); line-height: 1.65; color: var(--ink-2); max-width: var(--measure); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.item-foot { font-size: var(--fs-meta); color: var(--ink-2); margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
@media (min-width: 1024px) {
  .item-link { display: grid; grid-template-columns: minmax(0, 1fr) 190px; column-gap: 32px; padding: 26px 0 24px; }
  .item-link .item-meta, .item-link .item-title, .item-link .item-body { grid-column: 1; }
  .item-link .item-foot { grid-column: 2; grid-row: 1 / span 3; align-self: start; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 2px; }
  .item-link .item-foot .go { margin-top: 6px; }
}
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-micro); font-weight: 600; color: var(--ink-2); }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); }
.tag.is-open::before, .tag.is-active::before { background: var(--accent); }
.tag.is-done::before { background: var(--ink); }   /* 진행 중 = 초록 · 완료 = 검정 · 중단/마감 = 회색(글자와 함께) */
.tag.is-stopped::before, .tag.is-closed::before { background: var(--ink-2); }
.match-line { font-size: var(--fs-ui); font-weight: 700; color: var(--ink); margin: 20px 0 10px; line-height: 1.5; }
.match-line.is-broadened { color: var(--ink-2); }
.status-line { font-size: var(--fs-meta); color: var(--ink-2); min-height: 1em; }
.skeleton { height: 88px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, var(--skeleton), var(--page), var(--skeleton)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media print { .motion .reveal { opacity: 1; transform: none; } }

/* 스크롤 등장 — 목록 행만. 스크립트가 html.motion을 붙였고 아직 화면 밖이던 행만 숨겼다가 들어올 때 띄운다. */
.motion .reveal { opacity: 0; transform: translateY(20px); }
.motion .reveal.is-in { opacity: 1; transform: none; transition: opacity 320ms var(--ease-out) var(--d, 0ms), transform 360ms var(--ease-out) var(--d, 0ms); }

/* ── 빈 상태 · 오류 · 안내 ── */
.empty { padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.empty h2, .empty h1 { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 8px; }   /* 빈·막힘 화면이 그 페이지의 전부일 때는 h1(audit 2026-09-29) */
.empty p { color: var(--ink-2); font-size: var(--fs-ui); max-width: var(--measure); }
.note { font-size: var(--fs-ui); color: var(--ink-2); border-top: 1px solid var(--line); padding: 12px 0 0; margin-top: 16px; line-height: 1.6; }
.notice { font-size: var(--fs-ui); color: var(--ink-2); border-top: 1px solid var(--line); padding: 12px 0; line-height: 1.6; }
.notice summary { cursor: pointer; font-weight: 600; color: var(--ink); min-height: 44px; display: flex; align-items: center; gap: 6px; list-style: none; }
.notice ul { margin: 8px 0 0 18px; }
.notice li { margin-bottom: 4px; }
.callout { font-size: var(--fs-ui); color: var(--ink-2); margin: 24px 0; line-height: 1.65; }

/* ── 필터 — 둥근 칩 대신 글자와 밑줄 ── */
.filters, .filter-group { display: flex; flex-wrap: wrap; align-items: center; column-gap: 22px; row-gap: 0; }
.filters { margin: 12px 0 0; }
.filter-label { flex: 0 0 100%; font-size: var(--fs-micro); font-weight: 600; color: var(--ink-2); margin-top: 6px; }
.filter-opt { --u-bottom: 8px; min-height: 44px; min-width: 44px; padding: 0 9px; margin-inline: -9px; --u-inset: 9px; background: none; border: 0; border-radius: 0; font-family: inherit; font-size: var(--fs-ui); font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: color var(--t-fast); }
.filter-opt[aria-pressed="true"], .filter-opt[aria-current="true"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .filter-opt:hover { color: var(--ink); } }
.filters-more { margin-top: 4px; }
.filters-more summary { cursor: pointer; font-size: var(--fs-meta); font-weight: 600; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; gap: 8px; list-style: none; }
.filters-more summary::-webkit-details-marker { display: none; }
.filters-more summary::after, .fold summary::after {
  content: ""; width: 12px; height: 12px; flex: 0 0 auto;
  background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
  transition: transform 240ms var(--ease-out);
}
.filters-more[open] summary::after, .fold[open] summary::after { background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat; transform: rotate(180deg); }
.filters-more .filter-group { margin-top: 2px; }
.applied { font-size: var(--fs-meta); color: var(--ink-2); margin: 4px 0 4px; display: flex; flex-wrap: wrap; gap: 0 12px; align-items: center; }
.applied .btn-text { min-height: 44px; padding: 0 4px; font-size: var(--fs-meta); }
@media (min-width: 1024px) {
  .browse-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .filter-col { position: sticky; top: 104px; }
  /* 옆 열은 좁아도 글자 선택지를 한 줄에 여럿 흘린다 — 세로로 늘어세우면 붙어 있는 열이 화면보다 길어진다 */
  .filter-col .filters, .filter-col .filter-group { column-gap: 18px; }
  .filter-col .filters { margin-top: 0; }
  .filter-col .filter-label { margin: 16px 0 0; }
  .filter-col .filters .filter-label { margin-top: 0; }
  .filter-col .filter-opt { min-height: 44px; --u-bottom: 6px; }
  .filters-more summary { margin-top: 8px; }
}

/* ── 상세 읽기 ── */
.read { padding: 20px 0 8px; }
.back-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--fs-ui); font-weight: 600; color: var(--ink-2); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .back-link:hover { color: var(--ink); } }
.back-link::before { content: ""; width: 7px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .back-link:hover::before { transform: translateX(-3px) rotate(45deg); } }
.read-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: var(--fs-meta); color: var(--ink-2); margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.read-foot { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ── 반응 — 네모 버튼 대신 구분선 행. 고르면 그린 체크가 선다 ── */
.react { padding: 32px 0; border-top: 1px solid var(--line); }
.react h2 { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 12px; line-height: 1.4; }
.reactions { border-top: 1px solid var(--line); }
.reaction { position: relative; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; color: var(--ink); font-family: inherit; font-size: var(--fs-body); font-weight: 600; text-align: left; cursor: pointer; line-height: 1.45; transition: color var(--t-fast); }
.reaction::after { content: ""; flex: 0 0 auto; width: 7px; height: 13px; margin-right: 6px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg) scale(0); transition: transform 240ms var(--ease-out); }
.reaction[aria-pressed="true"]::after { transform: translateY(-2px) rotate(45deg) scale(1); }
@media (hover: hover) { .reaction:not(:disabled):hover { color: var(--accent); } }
.reaction:disabled { cursor: default; color: var(--ink-2); }
.reaction[aria-pressed="true"] { color: var(--ink); }
.followup { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
/* 내가 남긴 것 · 질문자 피드백 · 공개 물어보기 — 상자 대신 위쪽 검은 선 하나 */
.summary, .helpful, .prompt { border-top: 2px solid var(--ink); padding-top: 18px; }
.summary { margin-top: 24px; }
.summary h2 { font-size: var(--fs-body); font-weight: 700; margin-bottom: 10px; }
.summary dl { display: grid; grid-template-columns: 6.5em 1fr; gap: 8px 12px; font-size: var(--fs-ui); }
.summary dt { color: var(--ink-2); font-weight: 600; }

/* ── 답변 목록 ── */
.answers { list-style: none; border-top: 1px solid var(--line); }
.answer { padding: 24px 0 20px; border-bottom: 1px solid var(--line); }
.answer .h-sub:first-of-type { margin-top: 12px; }
.answer-foot { display: flex; justify-content: flex-end; margin-top: 6px; }
.helpful { margin-top: 20px; }
.feedback { margin-top: 14px; font-size: var(--fs-ui); }
.feedback .label { font-size: var(--fs-micro); font-weight: 700; color: var(--accent); margin-bottom: 4px; }

/* ── 폼 ── */
.field { margin-bottom: 24px; border: 0; min-width: 0; }
.label, legend.label { display: block; font-weight: 700; font-size: var(--fs-ui); margin-bottom: 8px; line-height: 1.4; }
.label-sub { display: block; font-weight: 400; font-size: var(--fs-meta); color: var(--ink-2); margin-top: 2px; }
.req { color: var(--danger); }
.opt { color: var(--ink-2); font-weight: 500; font-size: var(--fs-meta); }
/* 입력칸 — 옅은 면 하나. 테두리·밑줄·초점 고리 없이, 쓰는 중이면 면이 흰색이 되고 그 칸의 질문(라벨)에 형광펜이 그어진다 */
.input { width: 100%; min-height: 48px; padding: 12px 14px; font-size: var(--fs-body); font-family: inherit; color: var(--ink); background: var(--field); border: 0; border-radius: var(--r-ctl); line-height: 1.5; transition: background-color var(--t-fast); }
.input::placeholder { color: var(--ink-2); opacity: 1; }
.input:focus, .input:focus-visible { outline: none; background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }   /* 쓰는 중에만 아래 2px 초록 선 */
.input[aria-invalid="true"]:focus { box-shadow: inset 0 -2px 0 var(--danger); }
.input[aria-invalid="true"], .input[aria-invalid="true"]:focus { background: var(--danger-soft); }
.label, legend.label { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 0.55em; text-underline-offset: -0.62em; text-decoration-skip-ink: none; transition: text-decoration-color 200ms var(--ease-out); }
.field:focus-within > .label, .field:focus-within > legend.label { text-decoration-color: var(--mark); }
.label .label-sub { display: inline-block; width: 100%; }   /* 부가 설명은 형광펜 밖(인라인 블록에는 밑줄이 번지지 않는다) */
textarea.input { resize: vertical; min-height: 120px; }
textarea.input.grow { resize: none; overflow: hidden; }
/* ── 경험 쓰기 — 안내형 템플릿(네 질문 · 각 질문에 안내 한 줄과 «예)» 예시) ──
 * 빈 화면 앞의 막막함을 줄인다. 질문은 경험 상세의 네 구획과 같은 순서다. 첫 질문만 필수. */
.share-lead { margin-bottom: 28px; max-width: var(--measure); }
.guide-q { margin-bottom: 28px; }
.guide-q .label { font-size: var(--fs-read); margin-bottom: 4px; }
.guide-hint { font-size: var(--fs-meta); color: var(--ink-2); line-height: 1.55; margin-bottom: 10px; max-width: var(--measure); }
.guide-q textarea.input { min-height: 88px; }
.guide-q textarea#story-body { min-height: 120px; }
.guide-progress { font-size: var(--fs-meta); color: var(--ink-2); min-height: 1.4em; margin: 4px 0 10px; }
/* 분류 질문(당시 상황 · 대표 활동 · exp5) — 필수 · 기본 선택 없음. 짧은 선택지라 320px에서도 두 칸, 넓으면 세 칸으로 줄인다 */
.choices-tight { grid-template-columns: 1fr 1fr; column-gap: 16px; }
@media (min-width: 560px) { .choices-tight { grid-template-columns: repeat(3, 1fr); } }
.class-q[data-invalid] .choices { border-top-color: var(--danger); }
.pv-class b, .me-class b { color: var(--ink); font-weight: 700; }
.help { font-size: var(--fs-meta); color: var(--ink-2); margin-top: 6px; line-height: 1.5; }
.error { color: var(--danger); font-size: var(--fs-meta); margin-top: 6px; display: none; }
.error:not(:empty) { display: block; }
.form-error:not(:empty) { font-weight: 600; border-top: 1px solid var(--danger); padding-top: 10px; margin: 0 0 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* 선택지 — 네모 상자 대신 구분선 행. 표시는 기본 라디오·체크 그대로 둔다 */
.choices { display: grid; border-top: 1px solid var(--line); }
.choices-2 { grid-template-columns: 1fr 1fr; column-gap: 24px; }
@media (max-width: 399px) { .choices-2 { grid-template-columns: 1fr; } }
.choice { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: var(--fs-ui); line-height: 1.45; transition: color var(--t-fast); }
.choice input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; flex: 0 0 auto; }
.choice:has(input:checked) { font-weight: 700; }
/* 고른 선택지의 이름에 2px 초록 밑줄(필터·탭·단계와 같은 «선택 = 밑줄» 말투 · 색만이 아니라 굵기·네이티브 표시도 함께) */
.choice:not(.choice-col) > span, .choice-col > span > span:first-child { text-decoration: underline 2px transparent; text-underline-offset: 0.34em; text-decoration-skip-ink: none; transition: text-decoration-color 200ms var(--ease-out); }
.choice:not(.choice-col):has(input:checked) > span, .choice-col:has(input:checked) > span > span:first-child { text-decoration-color: var(--accent); }
.choice:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.choice input:focus-visible { outline: none; }   /* 줄 전체가 초점을 보인다 — 라디오에 한 겹 더 두지 않는다(critique S-05) */
.choice-col { align-items: flex-start; }
.choice-col input { margin-top: 2px; }
.choice-col > span { display: block; }
.choice-desc { display: block; font-size: var(--fs-meta); font-weight: 400; color: var(--ink-2); margin-top: 2px; }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: var(--fs-ui); line-height: 1.55; padding: 10px 0; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); margin: 2px 0 0; flex: 0 0 auto; }
/* 지금 보고 온 것과 맞는 선택지 — 형광펜 한 줄(상자 없이) */
.check.is-highlight strong { background: linear-gradient(transparent 58%, var(--mark) 58%); }
.fold { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px 0; margin: 20px 0; }
.fold summary { cursor: pointer; font-weight: 600; font-size: var(--fs-ui); min-height: 48px; display: flex; align-items: center; gap: 6px; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { color: var(--ink-2); margin-left: auto; }
.fold-body { padding: 4px 0 14px; }
.draft-status { font-size: var(--fs-meta); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; min-height: 24px; }
.draft-status .btn-text { min-height: 44px; font-size: var(--fs-meta); }
.step-tabs { display: flex; gap: 20px; font-size: var(--fs-meta); color: var(--ink-2); margin: 22px 0 10px; }
.step-tabs > span { --u-bottom: -4px; }
.step-tabs > span.sr-only { position: absolute; }   /* 화면 읽기용 «1 / 3 · 이름»이 flex 간격을 먹어 탭이 38px 밀렸다(polish 2026-09-29) */
.step-tabs [aria-current="step"] { color: var(--ink); font-weight: 700; }

/* ── 상황 입력 ── */
.progress { display: flex; align-items: center; gap: 12px; font-size: var(--fs-meta); color: var(--ink-2); margin: 20px 0 8px; }
.progress-bar { flex: 1; height: 2px; background: var(--line); overflow: hidden; }
.progress-bar > span { display: block; height: 100%; background: var(--ink); width: 100%; transform: scaleX(.33); transform-origin: left; transition: transform 320ms var(--ease-out); }
.step { padding: 8px 0 24px; }
.step h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 1.875rem); line-height: 1.3; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 6px; text-wrap: balance; }
.step .lead { font-size: var(--fs-body); margin-bottom: 18px; }
.subq { margin-top: 20px; }
.nav-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 20px; }
.nav-row.single { grid-template-columns: 1fr; }
.nav-row .btn-outline { min-width: 88px; }

/* ── 프롬프트(물어볼까요) · 완료 ── */
.prompt { margin: 8px 0 24px; }
.prompt h2 { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 8px; }
.done { padding: 32px 0; }
.done h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 1.875rem); font-weight: 800; letter-spacing: -0.015em; margin-bottom: 8px; text-wrap: balance; }
.done .lead { font-size: var(--fs-body); margin-bottom: 8px; }
/* 완료 표시 — 원 배지 대신 그린 체크 하나 */
.done-mark { display: block; width: 12px; height: 22px; margin: 0 0 18px 6px; border: solid var(--success); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); font-size: 0; color: transparent; }
.key-fold { margin-top: 20px; }
.key-value { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-meta); color: var(--ink); background: var(--field); padding: 12px 14px; border-radius: var(--r-ctl); word-break: break-all; user-select: all; }

/* ── 내 공간(2026-09-27) — 세 영역 탭 · 저장·구독 목록 · 새 소식 표시 ──
 * 탭은 필터·메뉴와 같은 글자 말투다: 고른 영역은 초록 밑줄, 가리키면 형광펜. 상자·알약 없음.
 * «새 N»·«새 답변»·«새 반응»은 글자로 말한다(색만으로 가르지 않는다). 헤더 점은 모양 + 화면 읽기 문구. */
.tab-new, .new-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-micro); font-weight: 700; color: var(--accent); white-space: nowrap; }
.tab-new::before, .new-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.new-badge { margin-left: 10px; vertical-align: middle; }
.read-meta .new-badge, .item-foot .new-badge { margin-left: 0; }
.space-panel { padding-top: 8px; }
.space-note { max-width: var(--measure); margin: 6px 0 14px; }
.space-panel .note { margin: 0 0 14px; border-top: 0; padding-top: 0; color: var(--danger); font-weight: 600; }
.space-item .space-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; padding: 0 0 12px; margin: -6px 0 0 -12px; }
.space-item.is-gone .space-actions, .space-item.is-error .space-actions { margin-top: 0; }
.space-gone { padding: 18px 0 8px; }
.space-gone-title { font-size: var(--fs-read); font-weight: 700; color: var(--ink-2); }
.space-gone .meta { margin-top: 2px; }
/* 헤더 «내 공간» 옆 새 소식 점 */
.news-dot { display: inline-block; width: 7px; height: 7px; margin: 0 0 8px 3px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
/* 경험 저장 · 질문 구독 — 지금 자리에서 상태를 바꾸는 보조 조작(주요 행동보다 약하게 · 꺾쇠 없음) */
.keep { margin: -8px 0 22px; }
.keep-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.keep-state { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-ui); font-weight: 700; color: var(--ink); }
.keep-state::before { content: ""; width: 5px; height: 10px; margin: 0 2px -1px 3px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.keep .keep-btn { padding-left: 0; padding-right: 0; font-size: var(--fs-ui); }
.keep-state + .keep-btn { padding-left: 4px; }
/* 저장·구독 전(«저장하기» · «질문 구독»)은 누를 수 있다는 걸 보이게 초록 글자 + 그린 아이콘(책갈피 · +) — 대표님 2026-09-28.
   저장·구독 뒤의 «저장 취소» · «구독 취소»는 주 행동이 아니라 그대로 검정 글자 · 아이콘 없음(앞의 «✓ 저장됨/구독 중»이 상태를 말한다). */
.keep .keep-btn { gap: 8px; }
.keep .keep-btn:not(.is-on) { color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .keep .keep-btn:not(.is-on):hover { color: var(--ink); } }
.keep .keep-btn.is-on .keep-icon { display: none; }
.keep-icon { flex: 0 0 auto; }
.keep-help, .keep-status { font-size: var(--fs-meta); color: var(--ink-2); line-height: 1.5; max-width: var(--measure); }
.keep-status:empty { display: none; }
.keep-status { margin-top: 2px; }

/* ── 간편 로그인(2026-09-27 · 카카오) ──
 * 로그인은 선택이다: 머리의 조용한 글자 링크 하나 · 내 공간의 안내 · 저장/구독/제출 뒤 한 줄. 팝업·강제 차단 없음.
 * 카카오 버튼만 카카오 공식 디자인 가이드를 따른다(#FEE500 면 · 검정 심볼 · 85% 검정 글자 · 모서리 12px) — 사이트의 버튼 세 층(§16) 밖의 예외. */
.nav-login { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--ink-2); font-size: var(--fs-ui); font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .nav-login:hover { color: var(--ink); } }
/* 좁은 폭: 메뉴 글자는 절대 줄바꿈하지 않는다. 374px 이하는 간격을 줄이고(누름 높이 44 유지),
 * 350px 미만(320px급)은 머리 «로그인»을 숨긴다 — 44px 누름 영역을 지키며 들어갈 자리가 없다. 그 폭에서도 로그인은
 * 내 공간의 «다른 기기에서도 이어서 사용하기»와 저장·구독·제출 뒤 한 줄에서 그대로 할 수 있다. */
.nav a, .nav-login { white-space: nowrap; }
/* 글자를 키워(200%) 한 줄에 안 들어가면 머리 항목이 다음 줄로 내려간다(가로 넘침 · 글자 세로 꺾임 대신 reflow). 보통 크기에서는 한 줄. */
.top-inner { flex-wrap: wrap; }
.nav { flex-wrap: wrap; min-width: 0; }
@media (max-width: 374px) { .nav a { padding: 0 8px; --u-inset: 8px; } .nav-login { padding: 0 5px; font-size: var(--fs-meta); } .top-right { gap: 2px; } }
/* 640px 미만(휴대폰) — 머리는 한 줄: 로고 · 경험 · 내 경로 · 내 계획 · 프로필(대표님 2026-09-29).
 * «기록하기»는 홈·내 경로·빈 화면의 주 행동과 겹쳐 뺐고, 손님의 «로그인»은 «프로필»(로그인 문)이 대신한다.
 * 글자를 키워(200%) 한 줄에 안 들어가면 그때만 메뉴가 다음 줄로 내려간다(위 flex-wrap). */
@media (max-width: 639px) {
  .top-right .btn-write, .top-right .nav-login { display: none; }
  .logo { margin-right: 6px; }
  .nav a { padding: 0 8px; --u-inset: 8px; }
}
@media (max-width: 374px) { .logo { font-size: var(--fs-h4); margin-right: 2px; } .nav a { padding: 0 6px; --u-inset: 6px; } }
.auth-note { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: var(--fs-ui); }
.auth-note p { margin: 0; padding-top: 10px; line-height: 1.6; max-width: var(--measure); }
.auth-note a { color: var(--accent); font-weight: 600; }
.auth-note .auth-note-close { flex: 0 0 auto; min-height: 44px; }
.kakao-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 360px; min-height: 48px; padding: 0 48px; border-radius: 12px;
  background: #FEE500; color: rgba(0, 0, 0, 0.85); font-size: var(--fs-ui); font-weight: 600; text-decoration: none; }
.kakao-btn img { position: absolute; left: 18px; top: 50%; width: 18px; height: auto; transform: translateY(-50%); }
@media (hover: hover) and (pointer: fine) { .kakao-btn:hover { background: #F5DC00; } }
.kakao-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.login-card, .link-card { margin: 4px 0 28px; padding: 20px 0 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.login-card h2, .login-card h3, .link-card h2 { font-size: var(--fs-h3); line-height: 1.4; margin: 0 0 8px; }
.login-card > p, .link-card > p { color: var(--ink-2); max-width: var(--measure); }
.login-facts { margin: 12px 0 18px 18px; color: var(--ink-2); font-size: var(--fs-ui); line-height: 1.65; max-width: var(--measure); }
.login-facts li { margin-bottom: 4px; }
.link-list { margin: 10px 0 12px 18px; font-weight: 600; }
.link-card .meta { margin-top: 8px; }
.link-card.is-collapsed { padding: 6px 0; }
.link-card.is-collapsed p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--ink-2); }
.link-card:focus { outline: none; }
.login-nudge { display: block; margin-top: 4px; color: var(--ink-2); }
.login-nudge a, .login-line a { color: var(--accent); font-weight: 600; }
.account-saved, .login-line { margin-top: 12px; }

/* ── 내 글 ── */
.me-item { padding: 20px 0 18px; border-bottom: 1px solid var(--line); }
.me-item h3 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.4; margin-bottom: 4px; }
.me-status { font-size: var(--fs-ui); margin-bottom: 4px; }
.me-status strong { color: var(--ink); }
.me-next { font-size: var(--fs-ui); color: var(--ink-2); }
.me-item .clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-ui); color: var(--ink-2); margin-top: 6px; max-width: var(--measure); }
.me-actions { margin-top: 12px; }
.me-edit { margin-top: 18px; padding: 4px 0 6px; }
.me-edit .field { margin-bottom: 16px; }

/* ── 내 계획(2026-09-27 · exp6) — 새 모양을 만들지 않는다 ──
 * 목록 = 내 글과 같은 구분선 행(.me-item) · 필터·상태 바꾸기 = 글자 + 초록 밑줄(.filter-opt) · 돌아볼 경험 구획 = 위쪽 2px 검정 선(.summary와 같은 말투)
 * 상태·활동·일정은 일반 메타 글자(배지·알약 없음). 입력은 기존 옅은 면 + 라벨 형광펜(.field:focus-within). */
.plan-rows { list-style: none; }
/* 상황 입력 3단계의 다른 선택 — 구분선 행(이동 글자 + 한 줄 설명 · 상자 없음) */
.page-head-action { margin-top: 12px; }   /* 제목 아래 이동 하나(«내 고민 남기기 ›» 등) */
.start-more { list-style: none; margin-top: 28px; border-top: 1px solid var(--line); }
.start-more li { padding: 10px 0 14px; border-bottom: 1px solid var(--line); }
.start-more .help { margin-top: 0; }
.plan-due { border-top: 2px solid var(--ink); padding-top: 18px; margin: 20px 0 8px; }
.plan-due > h2 { font-size: var(--fs-h4); font-weight: 700; margin-bottom: 4px; }
.plan-due .me-item:last-child { border-bottom: 0; }
.plan-list-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-top: 28px; }
.plan-list-head h2 { font-size: var(--fs-h4); font-weight: 700; }
.plan-meta { font-size: var(--fs-ui); color: var(--ink-2); margin-top: 2px; }
.plan-meta + .plan-meta { margin-top: 0; }
.plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 6px; }
.plan-actions .btn-primary { min-height: 44px; padding: 0 20px; }
/* 목록 행 제목 = 계획으로 가는 링크(가리키면 사이트의 목록 제목처럼 형광펜 · 누르는 영역은 위아래로 넓힘) */
.plan-title-link { display: block; color: var(--ink); text-decoration: none; padding: 10px 0; margin: -10px 0; }
@media (hover: hover) { .plan-title-link:hover .u { background-size: 100% 0.5em; } }
.plan-title-link:focus-visible .u { background-size: 100% 0.5em; }
.plan-status-set { margin: 4px 0 6px; }
#status-set + .status-line:empty { display: none; }   /* 바꾼 직후에만 버튼 바로 아래 한 줄(비어 있을 땐 자리를 두지 않는다) */
.plan-section { padding: 24px 0 8px; border-top: 1px solid var(--line); margin-top: 24px; }
.plan-section > h2 { font-size: var(--fs-h4); font-weight: 700; margin-bottom: 8px; }
.plan-private { font-size: var(--fs-meta); color: var(--ink-2); }
.plan-snooze { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-top: 12px; }
.plan-snooze .field { margin: 0; }
.plan-snooze .input { max-width: 200px; }
.plan-source { font-size: var(--fs-ui); color: var(--ink-2); margin-top: 6px; }
/* 계획 날짜 격자(.date-grid): 모바일은 한 열(칸마다 전체 폭) · 600px 이상은 시작일 | 종료 예정일.
 *   2026-09-30 모바일 점검: 이 격자와 아래 «날짜 + 버튼» 한 줄(.date-row)이 같은 이름이라 뒤 규칙이 덮어 칸이 170px로 줄고 나란히 서며 겹쳐 보였다 — 이름을 나눴다. */
.date-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; }
.date-grid .input { width: 100%; max-width: 100%; }
@media (min-width: 600px) {
  .date-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .date-grid .field-span { grid-column: 1 / -1; }
  .date-grid .field-span .input { max-width: calc(50% - 8px); }
}
/* 날짜 입력칸 공통 — 아이폰 Safari는 기본 모양의 날짜 칸이 제 폭을 고집해 칸 밖으로 넘치거나 옆 칸과 겹친다: 모양을 풀고 폭을 따르게 한다.
 *   값이 없을 때 높이가 줄어드는 것(iOS)도 막는다. 달력 버튼(크롬 · 안드로이드)은 그대로 남는다. */
.input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; display: block; min-height: 50px; text-align: left; }
.input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.5em; }
/* 자세히 적기(접힘 · 기존 .fold 행) — 접힌 동안 안에 적힌 항목 수를 요약 줄에 */
.plan-more.fold { margin: 16px 0 4px; }   /* 접힌 채로 제목 다음에 저장하기가 바로 오게(임시 저장 줄 자리 24px는 그대로) */
.plan-more ~ .btn-row { margin-top: 12px; }
.plan-more .fold-count { font-weight: 400; color: var(--ink-2); }
.plan-more .fold-body > .field:first-child { margin-top: 8px; }
.plan-foot { margin-top: 12px; }
/* 첫 사용 화면의 예시 — 저장된 계획이 아니라 이동 글자(꺾쇠) 세 줄 · 상자·칩 없음 */
.empty .plan-examples-label { margin-top: 18px; font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2); }
.plan-examples { list-style: none; margin-top: 2px; }
.plan-examples li { padding: 2px 0; }
.plan-examples a.go { margin: 0; min-height: 44px; padding: 8px 0; line-height: 1.45; max-width: var(--measure); }
.review-read dt { color: var(--ink-2); font-weight: 600; font-size: var(--fs-meta); margin-top: 12px; }
.review-read dd { margin: 2px 0 0; white-space: pre-line; max-width: var(--measure); }
.share-state { margin-top: 12px; font-size: var(--fs-ui); }
.share-state strong { color: var(--ink); }
.clear-choice { margin: -4px 0 8px -8px; }

/* ── 다이얼로그(확인창) — 떠 있는 층이라 그림자를 쓴다(DESIGN.md) ── */
dialog.confirm { border: 0; border-radius: var(--r-dialog); padding: 0; max-width: min(92vw, 440px); width: 100%; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-dialog); }
dialog.confirm::backdrop { background: var(--scrim); }
dialog.confirm .dlg-body { padding: 22px 22px 18px; }
dialog.confirm h2 { font-size: var(--fs-h4); font-weight: 700; margin-bottom: 8px; }
dialog.confirm p { font-size: var(--fs-ui); color: var(--ink-2); line-height: 1.6; }
dialog.confirm .btn-row { margin-top: 18px; }
@media (max-width: 599px) { dialog.confirm { margin: auto 0 0; max-width: 100vw; width: 100vw; border-radius: var(--r-dialog) var(--r-dialog) 0 0; max-height: 80vh; } }
dialog.confirm[open] { animation: dlg-in 200ms var(--ease-out); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(12px); } }

/* ── 푸터 ── */
.footer { border-top: 1px solid var(--line); padding: 28px 0 44px; font-size: var(--fs-meta); color: var(--ink-2); margin-top: 32px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.footer-brand { font-weight: 700; color: var(--ink); }
.footer a { color: var(--ink-2); min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; margin: 0 -10px; text-decoration: none; }   /* 누르는 자리 44px은 좌우 여백으로(옛 min-width 44가 두 글자 «고민» 뒤에 빈 틈을 만들었다) · 밑줄은 문장 속 링크에만(critique 2026-09-30) */
@media (hover: hover) and (pointer: fine) { .footer a:hover { color: var(--ink); }   /* 한 글자 링크(«홈» · «고민»)도 누를 자리 44×44(WCAG 2.5.8 · audit 2026-09-29) */ }
.footer .aside { margin-left: auto; font-size: var(--fs-meta); }

/* ── 문서(개인정보 안내) ── */
.doc h1 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem); line-height: 1.3; margin-bottom: 8px; font-weight: 800; letter-spacing: -0.015em; }
.doc .meta { margin-bottom: 24px; }
.doc h2 { font-size: var(--fs-h4); margin: 30px 0 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.doc p, .doc li { color: var(--ink-2); font-size: var(--fs-ui); margin-bottom: 10px; max-width: var(--measure); }
.doc ul { margin: 0 0 12px 20px; }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); margin-bottom: 14px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.doc th { color: var(--ink); white-space: nowrap; }
.doc td { color: var(--ink-2); }
.table-scroll { overflow-x: auto; }
.todo { background: var(--amber-bg); color: var(--amber-fg); padding: 0 4px; border-radius: 4px; font-weight: 700; }

/* ── 움직임 줄이기 — 이동과 반복을 걷고 상태 변화(색)만 남긴다 ── */
@media (prefers-reduced-motion: reduce) {
  dialog.confirm[open] { animation: none; }
  .motion .reveal { opacity: 1; transform: none; transition: none; }
  .skeleton { animation: none; background: var(--skeleton); }
  .btn-busy::before { animation: none; }
  .read-progress { display: none !important; }
  .label, legend.label, .input, .btn-go::after, .link-secondary::after, .section-head > a::after,
  .nav a::after, .filter-opt::after, .tab-opt::after, .step-tabs > span::after, .nav a::before, .filter-opt::before, .tab-opt::before, .btn.btn-danger::before, .u, .go::after, .back-link::before, .reaction::after, .progress-bar > span, .filters-more summary::after, .fold summary::after,
  .choice:not(.choice-col) > span, .choice-col > span > span:first-child { transition: none; }
}

/* 009 바로 공개 — 연락처·링크가 있어 바로 공개되지 않는다는 안내(제출 전에 보이는 한 줄 · 상자 없이 굵은 글자) */
.notice-hold { color: var(--ink); font-weight: 600; }

/* 경험 쓰기 개편(2026-09-28) — «전체 활동 보기»·«선택 지우기» 줄 · 접힌 구획의 «답변 있음» 표시 · 기타 활동명 하위 칸 */
.more-row { margin: 8px 0 0; }
.more-row .btn-text { min-height: 44px; padding-left: 0; }
/* «활동 6개 더 보기» — 굵은 글자만으로는 누를 수 있는지 안 보여(대표님 2026-09-28) 초록 글자 + 그린 «+»(펼치면 «−») */
.btn-more { gap: 8px; color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .btn-more:hover { color: var(--ink); } }
.more-icon, .plus-icon { position: relative; flex: 0 0 auto; width: 12px; height: 12px; }
.more-icon::before, .more-icon::after, .plus-icon::before, .plus-icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 2px; margin-top: -1px; border-radius: 1px; background: currentColor; }
.plus-icon::after { transform: rotate(90deg); }
.more-icon::after { transform: rotate(90deg); transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); }
.btn-more[aria-expanded="true"] .more-icon::after { transform: rotate(0deg); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .more-icon::after { transition: none; } }
.fold-badge { font-size: var(--fs-micro); font-weight: 600; color: var(--accent); margin-left: 8px; }
#activity-other-field { margin: 14px 0 0; padding-left: 0; }
.choices-tight + .choices-tight { border-top: 0; }
.choices-tight + .choices-tight .choice:nth-child(-n+2) { border-top: 0; }

/* «경험이 준비되면 받기» — 기다리는 경험(011 · 2026-09-28): 체크 바로 아래에 붙는 하위 질문 */
.wanted { margin: 4px 0 12px 32px; }
.wanted .choices { margin-top: 8px; }
.wanted-carry { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 12px 0 0; }
.wanted-carry .btn-text { min-height: 44px; padding: 0 4px; font-size: var(--fs-meta); }
@media (max-width: 420px) { .wanted { margin-left: 0; } }

/* 내 계획 작성 화면 후속(2026-09-28): 짧은 칸은 두세 줄에서 시작 · 일정 안내 · 옛 초안의 설정 · 임시 보관 보조 안내 · 상세의 조용한 조작 */
textarea.input.grow.compact { min-height: 0; }
.date-lead { margin: 0 0 10px; }
.plan-legacy { margin: 12px 0 8px; padding: 0 0 4px; }
.plan-legacy > .label { margin-bottom: 4px; }
.plan-legacy > .help { margin: 0 0 12px; }
.draft-sub { color: var(--ink-2); }
.draft-sub::before { content: "·"; margin-right: 8px; }
.plan-later { margin: 2px 0 0; }
.plan-later p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.plan-later .btn-text { min-height: 44px; padding: 0 2px; font-size: var(--fs-ui); }
.plan-inline { margin: 12px 0 12px; padding: 0 0 4px; }
.plan-inline .field { margin-bottom: 12px; }
.plan-inline .input[type="date"] { max-width: 260px; }

/* 내 계획 흐름 줄(2026-09-28 A안) — 달력이 아니라 «지금 어디쯤» 한 줄. 카드·칩·배지 없이 구분선과 글자만.
   모바일은 칸이 세로로 쌓이고(왼쪽 칸 이름 · 오른쪽 계획), 768px 이상은 가로 한 줄. «이번 주»만 위쪽 2px 초록 선. */
.plan-flow { margin: 8px 0 28px; }
.flow-title { font-size: var(--fs-meta); font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.flow-cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
.flow-col { display: grid; grid-template-columns: 5.5em 1fr; column-gap: 12px; padding: 1px 0 12px; border-top: 1px solid var(--line); min-width: 0; }
.flow-col.is-now { border-top: 2px solid var(--accent); }
.flow-head { font-size: var(--fs-meta); font-weight: 700; margin: 0; line-height: 1.5; }
.flow-head .tabular { color: var(--ink-2); font-weight: 600; margin-left: 2px; }
.flow-col.is-now .flow-head { color: var(--accent); }
.flow-col.is-empty .flow-head { color: var(--ink-2); font-weight: 600; }
.flow-none { font-size: var(--fs-meta); color: var(--ink-2); margin: 0; line-height: 1.5; }
.flow-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.flow-items li { min-width: 0; }
.flow-items { gap: 0; }
.flow-link { display: block; min-height: 44px; padding: 11px 0 2px; font-weight: 600; font-size: var(--fs-ui); line-height: 1.45; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
@media (hover: hover) { .flow-link:hover .u { background-size: 100% 0.5em; } }
.flow-link:focus-visible .u { background-size: 100% 0.5em; }
.flow-col > .flow-head, .flow-none { padding-top: 11px; }
.flow-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.flow-when { display: block; font-size: var(--fs-micro); color: var(--ink-2); line-height: 1.5; font-variant-numeric: tabular-nums; }
.flow-more { font-size: var(--fs-micro); color: var(--ink-2); }
.flow-undated { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
@media (min-width: 768px) {
  .flow-cols { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 20px; }
  .flow-col { display: block; }
  .flow-head { margin-bottom: 8px; }
}

/* 경험을 읽은 뒤(critique 2026-09-28) — 반응 행은 쉬는 동안에도 누를 수 있다는 표시(꺾쇠)를, 고르면 초록 체크로 바뀐다 */
.reaction:not([aria-pressed="true"])::after { width: 7px; height: 7px; margin-right: 4px; border-color: var(--ink-2); border-width: 1.75px 1.75px 0 0; transform: rotate(45deg); }
@media (hover: hover) { .reaction:not(:disabled):not([aria-pressed="true"]):hover::after { border-color: currentColor; transform: translateX(3px) rotate(45deg); } }
.reaction:disabled:not([aria-pressed="true"])::after { opacity: 0; }
/* 접히는 안내(.notice)도 .fold처럼 +/− — 펼칠 수 있다는 걸 보인다 */
.notice summary::-webkit-details-marker { display: none; }
.notice summary::after { content: ""; margin-left: auto; flex: 0 0 auto; width: 12px; height: 12px; color: var(--ink-2);
  background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat; transition: transform 200ms var(--ease-out); }
.notice[open] > summary::after { background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat; transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .notice summary::after { transition: none; } }
.read-after { padding-top: 4px; }   /* 반응 목록의 마지막 구분선이 경계 — 선을 두 번 긋지 않는다 */
.read-after .callout { margin-top: 0; }
/* 입력칸: 쓰는 중에만 아래 2px 초록 선(대표님 2026-09-28) — 테두리 없는 d4 칸은 그대로 두고 «지금 쓰는 칸»만 알린다 */
/* 되찾기 접힘은 빈 상태 안에서 버튼 줄 아래 */
.restore-fold { margin-top: 20px; }

/* 경험 본문 끝과 «어떤 생각이 들었나요?» 사이 — 마지막 문단이 구분선에 붙지 않게(critique 2026-09-28) */
#detail-card + .react, #detail-card ~ #reaction-card { margin-top: 32px; }

/* ── polish(2026-09-29) ─────────────────────────────────────
 * 누르는 영역 44px: 두 글자 필터·탭은 글자 폭(26px)만큼만 눌렸다 — 좌우 9px 안쪽 여백을 주고 같은 만큼 바깥으로 당겨
 * 보이는 간격·밑줄·형광펜 폭은 그대로 둔다(--u-inset). 데스크톱 필터 열도 44px. 홀로 선 이동 글자(a.go)는 위아래 11px.
 * 건너뛰기 링크: 글자를 키워도 머리 위로 비치지 않게 위치 대신 transform으로 숨긴다. */
/* 계획의 «지금 상태»는 목록 필터가 아니라 이 계획의 설정 — 동그라미 선택 줄로(고르면 바로 저장) */
.plan-status-set.choices { margin-top: 4px; }
.nav-row > .btn-outline:only-child { justify-self: start; }   /* «이전»만 있을 때 가운데 뜨지 않게(polish) */

/* 스크립트를 불러오지 못했을 때(optimize 2026-09-29) — 목록·상세가 스켈레톤에 멈춰 있지 않게, 10초가 지나도 스크립트가 돌지 않으면
   안내 한 줄이 선다. 스크립트가 돌면(html.js) 늘 숨는다. 움직임이 아니라 «때가 되면 보이기»라 움직임 줄이기와 상관없이 쓴다. */
.js-fallback { max-height: 0; overflow: hidden; visibility: hidden; margin: 0; color: var(--ink-2); font-size: var(--fs-meta); animation: js-fallback-in 0s linear 10s forwards; }
html.js .js-fallback { display: none; }
@keyframes js-fallback-in { to { max-height: 12em; margin: 16px 0; visibility: visible; } }   /* 나타나기 전에는 초점·화면 읽기에서도 빠진다 */

/* 다음 한 편(2026-09-29) — 경험 목록과 같은 구분선 행 · 제목만 조용히 */
.next-read { margin-top: 32px; }
.next-title { font-size: var(--fs-ui); font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
/* «해보고 싶어요» 요약의 버튼 줄 — 아래 안내 줄과 꼬리 사이에 숨 쉴 틈 */
.summary-actions { margin-top: 20px; }
.summary-actions + .help { margin-bottom: 8px; }

/* ── 간격 유틸리티(2026-09-29) — HTML·스크립트에 직접 쓰던 style=""(77곳)을 대신한다. 값은 간격 토큰에만 묶인다 ── */
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: var(--sp-1) !important; } .mt-2 { margin-top: var(--sp-2) !important; } .mt-3 { margin-top: var(--sp-3) !important; }
.mt-4 { margin-top: var(--sp-4) !important; } .mt-5 { margin-top: var(--sp-5) !important; } .mt-6 { margin-top: var(--sp-6) !important; } .mt-7 { margin-top: var(--sp-7) !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: var(--sp-1) !important; } .mb-2 { margin-bottom: var(--sp-2) !important; } .mb-3 { margin-bottom: var(--sp-3) !important; }
.mb-4 { margin-bottom: var(--sp-4) !important; } .mb-6 { margin-bottom: var(--sp-6) !important; }
.m-0 { margin: 0 !important; } .pt-3 { padding-top: var(--sp-3) !important; } .pt-7 { padding-top: var(--sp-7) !important; } .pb-0 { padding-bottom: 0 !important; }
.no-rule { border-top: 0 !important; } .rule-top { border-top: 1px solid var(--line) !important; } .no-border { border: 0 !important; }
.d-contents:not([hidden]) { display: contents; } .fs-read { font-size: var(--fs-read) !important; } .full-row { flex-basis: 100% !important; } .no-shrink { flex: 0 0 auto !important; }

/* ═══ 2026-09-29 «내 전역 후 경로»(DESIGN.md §39) — 기록 흐름 · 타임라인 · 빠른 필터 · 붙는 CTA ═══ */
.record-head { padding-top: 28px; margin-bottom: 4px; }   /* 제목 위 여백을 다른 페이지(.page-head 28px)와 맞춘다(polish 2026-09-29) */
.path-context { margin: 0 0 12px; }
.path-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--fs-meta); color: var(--ink); font-weight: 600; }
.path-chips .arrow { color: var(--ink-2); font-weight: 400; }
.path-chips .next { color: var(--ink-2); font-weight: 400; }
.step { animation: step-in 220ms var(--ease-out); }
.step[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .step { animation: none; } }
@keyframes step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.step-nav { justify-content: space-between; align-items: center; margin-top: 8px; }
.step-nav .btn-primary { margin-left: auto; white-space: nowrap; }   /* «경로에 추가하고 공유»가 390에서 두 줄로 꺾였다(critique B2) */
.step-nav > .btn-text { flex: 0 0 auto; padding-inline: 12px; }   /* «이전»은 글자 폭만 — 주 버튼과 한 줄에(390에서 두 줄로 쌓였다) */
@media (max-width: 359px) { .step-nav .btn-primary { white-space: normal; } }
.date-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }   /* 날짜 + 버튼·선택 한 줄(전역일 · 기록 고치기) — 좁으면 다음 줄로 */
.date-row .input[type="date"] { flex: 1 1 180px; width: auto; max-width: 240px; }
.date-row > :not(.input[type="date"]) { flex: 0 0 auto; }
.month-row { display: flex; flex-wrap: wrap; gap: 8px; }
#when-field .date-row > .month-row { flex: 1 1 100%; min-width: 0; }   /* 줄 폭 안에서 접힌다(위 ‘0 0 auto’가 연·월을 화면 밖으로 밀었다) */   /* 글자 200%면 연·월이 두 줄로(가로 넘침 없음 · 2026-10-01) */
.month-row .input { flex: 1 1 0; min-width: 0; max-width: 150px; }   /* 390에서 «2026년»이 잘렸다(critique S-01) */
.rel-line { font-size: var(--fs-ui); color: var(--ink); font-weight: 600; min-height: 1.5em; margin-top: 8px; }
.rel-line .rel-when { color: var(--ink-2); font-weight: 400; }
.rel-line .rel-days { color: var(--accent); }

/* 내 전역 후 경로 — 세로 타임라인. 거대한 카드가 아니라 시간을 빠르게 훑는 줄. 상세는 펼침. */
.path-day { font-size: var(--fs-h4); font-weight: 700; margin: -4px 0 8px; }
.path-day .path-day-sub { color: var(--ink-2); font-weight: 400; font-size: var(--fs-meta); margin-left: 8px; }
.discharge { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; margin: 4px 0 20px; }
.discharge-line { font-size: var(--fs-ui); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.discharge-line strong { color: var(--ink); }
.discharge-line .btn-text { padding-inline: 0; }   /* 줄이 꺾여도 버튼 글자가 본문 왼쪽 선에 맞는다(polish 2026-09-29) */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding: 4px 0 20px 28px; }
.tl-item::before { content: ""; position: absolute; left: 3px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink-2); box-sizing: border-box; }
.tl-item.is-discharge::before { background: var(--ink); border-color: var(--ink); }
.tl-item.is-public::before { border-color: var(--accent); }
.tl-item.is-current::before { background: var(--accent); border-color: var(--accent); }
.tl-when { font-size: var(--fs-meta); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 8px; }
.tl-when .rel-days { color: var(--accent); font-weight: 600; }
.tl-title { font-size: var(--fs-h4); font-weight: 700; line-height: 1.4; margin: 2px 0 4px; }
.tl-title.is-discharge { font-size: var(--fs-body); }
.tl-meta { font-size: var(--fs-micro); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.tl-meta .tag { font-size: inherit; }
.tl-more { margin-top: 6px; }
.tl-more > summary { cursor: pointer; font-size: var(--fs-meta); font-weight: 600; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; list-style: none; }
.tl-more > summary::-webkit-details-marker { display: none; }
.tl-more > summary::after { content: ""; width: 7px; height: 7px; border: solid var(--ink-2); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); margin-left: 8px; transition: transform var(--t-fast); }
.tl-more[open] > summary::after { transform: rotate(-135deg); }
.tl-body { font-size: var(--fs-ui); line-height: 1.65; max-width: var(--measure); }
.tl-body h4 { font-size: var(--fs-meta); color: var(--ink-2); font-weight: 600; margin: 10px 0 2px; }
.tl-body p { white-space: pre-line; }
.tl-actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.timeline.is-undated::before { display: none; }
.timeline.is-undated .tl-item::before { display: none; }
.timeline.is-undated .tl-item { padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
.sticky-cta { position: sticky; bottom: 0; padding: 12px 0 max(12px, env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--paper) 70%, transparent); margin-top: 8px; }
.path-page { padding-bottom: 8px; }

/* 공개 경험 상세 — 사례 구조(경로 · 왜 · 결과 · 다시 돌아간다면 · 비슷한 사람에게) */
.case-path { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--fs-meta); color: var(--ink-2); }
.case-path li { display: inline-flex; align-items: center; gap: 6px; }
.case-path li.is-current { color: var(--ink); font-weight: 700; }
.case-path li + li::before { content: "→"; color: var(--ink-2); font-weight: 400; }
.case-path a, .case-path li > span { color: inherit; text-decoration: none; display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 2px 0; }
.case-path-name { font-weight: 600; }
.case-path-sub { font-size: var(--fs-micro); color: var(--ink-2); font-weight: 400; }
@media (hover: hover) and (pointer: fine) { .case-path a:hover { text-decoration: underline; } }
.case-choice { font-size: var(--fs-meta); color: var(--ink-2); margin: -4px 0 6px; }
.case-advice { font-size: var(--fs-h4); font-weight: 600; line-height: 1.6; margin-top: 4px; max-width: var(--measure); }   /* 옆선 없이 글자 위계로(critique E-05 · d4 «상자 없는 표면») */

/* 경험 목록 — «나와 비슷한 사람» 빠른 필터(밑줄 필터와 같은 표현) */
.quick { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 4px 0 8px; }
.quick .filter-opt { min-height: 44px; }

/* ═══ 2026-09-29 재비평 수정(DESIGN.md §41) ═══ */
/* 내 경로: 달 머리글 · 기간 · 진행 중 선 · 같은 시기 · 공유 표시 · 비어 있는 칸 덧붙이기 · 쓴 날 */
.tl-month { list-style: none; position: relative; padding: 14px 0 6px 28px; font-size: var(--fs-micro); font-weight: 700; color: var(--ink-2); letter-spacing: .02em; }
.tl-item.is-ongoing::after { content: ""; position: absolute; left: 7px; top: 20px; bottom: -6px; width: 2px; background: var(--accent); }   /* 진행 중 — 초록 선이 다음 칸까지 이어진다 */
.tl-item.is-ongoing::before { border-color: var(--accent); }
.tl-item.is-overlap { margin-left: 18px; }
.tl-item.is-overlap::before { left: -15px; }
.tl-overlap { color: var(--ink-2); }
.tl-share { color: var(--ink-2); }
.tl-share.is-on { color: var(--accent); font-weight: 700; }
.tl-fills { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 2px; }
.tl-fills .go { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--fs-meta); font-weight: 700; }
.tl-written { font-size: var(--fs-micro); color: var(--ink-2); margin-top: 10px; }
.page-head-action { margin-bottom: 8px; }   /* 위 여백은 공통 12px(594행) — 음수 여백이 설명 줄에 링크를 붙였다(polish 2026-09-29) */
.path-day { font-size: var(--fs-h4); font-weight: 700; margin: -4px 0 4px; }
/* 기록: 공유되면 이렇게 보여요 · 이 브라우저 연결 안내 */
.share-preview { border-top: 1px solid var(--line); margin: 16px 0 12px; padding-top: 4px; }
.share-preview-card { padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
.share-preview-card .item-title { font-size: var(--fs-h4); font-weight: 700; line-height: 1.4; margin: 2px 0 4px; }
.share-preview-card .item-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-micro); color: var(--ink-2); margin-top: 6px; }
#share-link-note { margin-top: 8px; }
.keep-note { border-top: 1px solid var(--line); margin-top: 12px; }
.select-sm { max-width: 150px; }

/* 기록을 고친 뒤 그 항목 안의 확인 줄(critique M-03) */
.me-saved { margin-top: 10px; font-weight: 600; color: var(--accent); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.me-saved:focus { outline: none; }
.me-saved:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* 8단계 동의: 한 줄 + 접힌 «무엇이 공유되나요»(critique S-07) */
.fold-inline summary { cursor: pointer; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; color: var(--ink); list-style: none; }
.fold-inline summary::-webkit-details-marker { display: none; }
.fold-inline summary::after { content: ""; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.fold-inline[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.fold-inline p { margin-top: 4px; }
#pv-consent-note > p { margin: 0; }
/* 내 경로 안에서 바로 덧붙이기(critique M-03) */
.tl-fill { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.tl-fill .field { margin: 0; }
.tl-fills .tl-fill-btn { padding: 0; font-size: var(--fs-meta); font-weight: 700; }   /* 그 자리에서 여는 조작 = 꺾쇠 없는 굵은 글자(§16) */
/* 공유 이름 — 경로 단위로 한 번 */
.share-names { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.share-names ul { list-style: none; display: grid; gap: 8px; margin: 8px 0; }
.share-names li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.share-names form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; }
.share-names form .input { flex: 1 1 180px; max-width: 280px; }

/* 2026-09-29 UX 재설계 §2: 주 메뉴 셋 + 오른쪽 끝 «프로필»(옛 내 공간 · 계정·저장한 경험·내 기록) */
.nav .nav-end { margin-left: auto; }

/* 내 경로의 끝 = 지금 · 첫 사용자의 예시 경로(UX 재설계 §5·§6) */
.tl-now { position: relative; list-style: none; padding: 4px 0 0 28px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.tl-now::before { content: ""; position: absolute; left: 2px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.tl-now-label { font-weight: 700; color: var(--ink); }
.path-example { margin: 20px 0 8px; text-align: left; }
.timeline.is-example .tl-title { font-weight: 600; font-size: var(--fs-body); color: var(--ink-2); margin: 0; }
.timeline.is-example .tl-when { color: var(--ink-2); }
.timeline.is-example .tl-item::before { border-color: var(--ink-2); }
/* 한 묶음 안의 이어지는 구획(UX 재설계 §7): 단계 사이 여백이 아니라 질문 사이 여백 · 접힘 두 개는 붙여서 한 목록처럼 */
.step.step-part { padding-top: 0; }
.step:has(+ .step-part:not([hidden])) { padding-bottom: 8px; }
.step-part .fold, .step .fold + .fold { margin: 0; }
.step-part > .fold:first-child { border-top: 0; }
#fold-context { margin: 16px 0 0; }

/* «월만 적을게요» 줄 — 누르는 높이 44(critique B3 · 43px) */
#when-field .check { min-height: 44px; }
.record-done { font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }

/* 개인 화면의 문(UX 통합 지시서 §13) — 오류 화면이 아니라 «무엇을 하는 곳 + 카카오로 시작하기» */
.auth-gate { padding: 8px 0 32px; }
.auth-gate .lead { margin-top: 8px; }
.kakao-btn-sm { max-width: 280px; min-height: 44px; }
.gate-inline { display: block; margin: 12px 0 4px; padding: 14px 0 6px; border-top: 1px solid var(--line); }   /* span 안에서도 선이 글자를 가로지르지 않게(critique B4) */
.gate-inline p { margin: 0 0 10px; }

.account-state { margin: 0 0 8px; }
body[data-gated] #main > :not(#auth-gate):not(.auth-note):not(.js-fallback) { display: none !important; }

/* 기록 단계 이름은 단어 중간에서 꺾이지 않는다(320에서 «돌아보/면» · critique B4) */
.step-tabs { flex-wrap: wrap; row-gap: 6px; }
.step-tabs > span { white-space: nowrap; }
@media (max-width: 359px) { .step-tabs { gap: 14px; } }

/* 개인 화면(내 경로 · 내 계획 · 프로필): 로그인 여부를 확인하는 동안 본문 대신 불러오는 줄만 — 로그인한 사람용 버튼이 먼저 보였다가
   문으로 바뀌지 않게(harden 2026-09-29 · 느린 망에서 재현). 확인이 끝나면 account.js가 data-auth-ready를 단다. 스크립트가 실패하면 10초 뒤 안내가 선다. */
body[data-auth-page]:not([data-auth-ready]) #main > :not(.js-fallback) { display: none !important; }
body[data-auth-page]:not([data-auth-ready]) #main::before { content: ""; display: block; height: 88px; margin-top: 32px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, var(--skeleton), var(--page), var(--skeleton)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { body[data-auth-page]:not([data-auth-ready]) #main::before { animation: none; background: var(--skeleton); } }
/* 로그인 문 안의 작성 예시 */
.auth-gate .path-example { margin: 24px 0 4px; }
.plan-examples.is-static li { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-weight: 600; line-height: 1.45; }
.plan-examples.is-static li:first-child { border-top: 1px solid var(--line); }
/* 저장할 기록 요약(기록하기 3단계 끝 · critique 2026-09-29 H6) — 상자 없이 위 선 하나 · 항목은 이름 / 값 + «고치기» */
.save-summary { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 20px; }
.save-summary .h-sub { margin-bottom: 8px; }
.sum-list { margin: 0; }
.sum-row { display: grid; grid-template-columns: 7.5em 1fr; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sum-row dt { font-size: var(--fs-meta); color: var(--ink-2); padding-top: 11px; }
.sum-row dd { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 12px; font-size: var(--fs-ui); line-height: 1.5; min-width: 0; }
.sum-row dd span { min-width: 0; overflow-wrap: anywhere; padding: 10px 0; }
.sum-edit { min-height: 44px; padding-inline: 0; }
@media (max-width: 359px) { .sum-row { grid-template-columns: 1fr; } .sum-row dt { padding-top: 0; } }
/* 기록 1단계(대표님 결정 B): 주 행동 «기록 저장하기»가 위에 꽉 차게 · «결과·돌아보기 더 적기 ›»는 아래 보조 글자 */
.step-nav.is-first { flex-direction: column-reverse; align-items: stretch; gap: 4px; }
.step-nav.is-first .btn-primary { margin-left: 0; width: 100%; }
.step-nav.is-first .btn-go { align-self: flex-start; }
@media (min-width: 600px) { .step-nav.is-first { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 24px; } .step-nav.is-first .btn-primary { width: auto; } }
.step-nav.is-first > * { flex: none; }
.opt { white-space: nowrap; }   /* «(선택)»이 «(선택 / )»으로 꺾이지 않게 */

/* ── 모바일이 밋밋하다(대표님 2026-09-29) — 색을 늘리지 않고 «경로»에만 민간인 초록을 쓴다(DESIGN.md §48) ── */
.cat { color: var(--accent); font-weight: 600; }   /* 시간 종류 — 글자색만(알약 없음) */
.timeline::before { background: var(--mark); }
.tl-item::before { border-color: var(--accent); }
.tl-item.is-discharge::before { background: var(--accent); border-color: var(--accent); }
.timeline.is-example .tl-item::before { border-color: var(--accent); }
.timeline.is-example .tl-item.is-discharge::before { background: var(--accent); }
.tl-month { color: var(--accent); }
/* ── 경로 = 수첩(대표님 2026-09-29 «기록하는 게 하나의 멋진 느낌») ─────────────────────────────
 * 군에서 전역을 D−로 세던 사람이 이제 D+로 센다. 기록마다 왼쪽에 그날의 날수를 큰 숫자로 찍고(«D+ / 23»),
 * 가운데 초록 줄이 그 날들을 잇는다. 그림·아이콘을 더하지 않고 이 제품만 가진 숫자로 표정을 만든다.
 * 날수는 서버와 같은 계산(전역일을 알 때만) · 모르면 «4월 / 2»(달력 날) · 날짜 없는 기록은 도장 없음. */
.timeline.is-log { --day-w: 3.5rem; --rail: calc(var(--day-w) + 16px); }
.timeline.is-log::before { left: calc(var(--rail) - 1px); top: 14px; bottom: 14px; }
.timeline.is-log .tl-item { padding: 0 0 28px calc(var(--rail) + 20px); min-height: 60px; }
.timeline.is-log .tl-item::before { left: calc(var(--rail) - 6px); top: 7px; width: 12px; height: 12px; background: var(--page); }
.timeline.is-log .tl-item.is-discharge::before, .timeline.is-log .tl-item.is-current::before { background: var(--accent); }
.timeline.is-log .tl-item.is-ongoing::after { left: calc(var(--rail) - 1px); top: 19px; bottom: 0; }
.timeline.is-log .tl-item.is-overlap { margin-left: 0; padding-left: calc(var(--rail) + 38px); }
.timeline.is-log .tl-item.is-overlap::before { left: calc(var(--rail) - 6px); }
.timeline.is-log .tl-month { padding-left: calc(var(--rail) + 20px); padding-top: 4px; padding-bottom: 14px; }
.timeline.is-log .tl-when { line-height: 1.6; }
.timeline.is-log .tl-item > .tl-when .rel-days { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* 도장이 같은 날수를 크게 보인다 — 글자는 화면 읽기에만 */
.timeline.is-log .tl-title { margin-top: 2px; }
.tl-day { position: absolute; left: 0; top: 0; width: var(--day-w); display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1; font-variant-numeric: tabular-nums; }
.tl-day-k { font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em; color: var(--accent); height: 20px; display: flex; align-items: center; white-space: nowrap; }
.tl-day-n { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.045em; color: var(--ink); white-space: nowrap; }
.tl-day.is-long .tl-day-n { font-size: 1.375rem; }
.tl-day.is-word .tl-day-n { font-size: 0.9375rem; letter-spacing: -0.01em; }
.tl-day.is-word:not(:has(.tl-day-k)) .tl-day-n { height: 20px; display: flex; align-items: center; color: var(--accent); }   /* D-DAY — 한 줄 초록 */
/* 지금 = 경로의 끝 · 도장은 오늘의 날수 */
.timeline.is-log .tl-now { padding: 0 0 0 calc(var(--rail) + 20px); min-height: 52px; align-items: flex-start; }
.timeline.is-log .tl-now::before { left: calc(var(--rail) - 7px); top: 6px; width: 14px; height: 14px; box-shadow: 0 0 0 4px var(--accent-soft); }
.timeline.is-log .tl-now .tl-now-label { line-height: 1.6; color: var(--accent); }
.timeline.is-log .tl-now .rel-days { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.timeline.is-log .tl-now .tl-day-n { color: var(--accent); }
/* 작성 예시도 실제와 같은 옷(흐리게 두지 않는다 · «작성 예시» 표시는 그대로) */
.timeline.is-log.is-example .tl-title { color: var(--ink); font-weight: 700; font-size: var(--fs-body); }
.timeline.is-log.is-example .tl-meta { margin-top: 2px; }
@media (min-width: 600px) { .timeline.is-log { --day-w: 4rem; } .tl-day-n { font-size: 2rem; } }
/* 저장 완료 — 방금 남긴 한 줄이 도장처럼 찍힌다(움직임 줄이기면 그대로) */
.done-entry { margin: 20px 0 8px; padding: 20px 0 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.timeline.is-single::before { display: none; }
.timeline.is-single .tl-item { padding-bottom: 16px; }
.done.has-entry .done-mark { display: none; }
.is-single .tl-day-n { animation: stamp-in .5s cubic-bezier(.16, 1, .3, 1) both .15s; }
.is-single .tl-item::before { animation: dot-in .4s cubic-bezier(.16, 1, .3, 1) both .35s; }
@keyframes stamp-in { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: none; } }
@keyframes dot-in { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .is-single .tl-day-n, .is-single .tl-item::before { animation: none; } }

/* ── 한글 줄바꿈(대표님 2026-09-29 · 모바일) — 단어는 keep-all로 이미 안 쪼갠다. 여기서는 마지막 줄에 한 어절만
 * 떨어지는 것(«돼요.» · «있어요.»)을 막는다: 문단은 pretty, 짧은 제목·선택지 설명은 balance. 지원하지 않는 브라우저는 예전처럼 꺾는다. */
p, li, dd, .choice-desc, .label, legend, .help, .meta { text-wrap: pretty; }
.item-title, .done h1, .h-sub, .choice-desc, .step h1 { text-wrap: balance; }
.tl-title { text-wrap: pretty; }   /* 기록 제목은 균형을 맞추면 «회사 세 / 곳에»처럼 짧게 꺾인다 — 줄을 채우고 끝만 다듬는다 */
.nw { white-space: nowrap; }
.timeline.is-log .tl-now::after { content: ""; position: absolute; left: calc(var(--rail) - 2px); top: 21px; bottom: 0; width: 4px; background: var(--page); }   /* 줄은 «지금»에서 끝난다 */

/* ── 경험 읽기(참고 이미지 01 · 02 · 03 · 대표님 2026-09-29 · DESIGN.md §50) ─────────────────────────── */
/* 01 목록 — 제목은 질문 · 아래 한 줄 · «내 상황에 맞춰 보기»는 옅은 면의 한 줄 · 필터는 짧은 이름 */
.page-sub { font-size: var(--fs-read); color: var(--ink-2); margin-top: 6px; }
#view-list .ctx { display: grid; gap: 6px; margin-top: 18px; }
#view-list .ctx #ctx-browse { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* 필터가 이미 말한다 — 화면 읽기에만 */
#view-list .ctx a.go { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 12px 16px; min-height: 48px; background: var(--field); border-radius: var(--r-ctl); font-size: var(--fs-ui); }
.exp-item { position: relative; }
/* 카드 = 도장 · 한 줄 · 제목 · 두 줄(2026-09-30 distill) — 저장 표시는 오른쪽 위, 한 줄과 제목만 그 자리를 비켜 준다 */
.exp-item .item-meta, .exp-item .item-title { padding-right: 40px; }
.keep-mini { position: absolute; right: -10px; top: 10px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; color: var(--ink-2); cursor: pointer; border-radius: var(--r-ctl); }
@media (hover: hover) and (pointer: fine) { .keep-mini:hover { color: var(--ink); } }
.keep-mini.is-on { color: var(--accent); }
.keep-mini.is-on path { fill: currentColor; }
.keep-mini:disabled { opacity: .5; }
/* 02 상세 — 초록 시간 종류 → 큰 제목 → 공유 이름 · 결과 → 그때의 사실(굵은 윗줄의 짧은 표) → 본문 */
.kicker { font-size: var(--fs-meta); font-weight: 700; margin: 4px 0 0; }
.kicker .cat { font-weight: 700; }
.kicker.is-meta, .kicker.is-meta .cat { color: var(--ink-2); font-weight: 600; }   /* 상세 제목 위 분류 = 회색 메타 한 줄(초록 킥커 아님 · 2026-09-30 critique) */
#view-detail .h-detail { margin-top: 6px; }
.byline { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: var(--fs-meta); color: var(--ink-2); margin: 0 0 20px; }
.case-facts { margin: 0 0 28px; }
.case-facts > div { font-size: var(--fs-ui); line-height: 1.5; }
.case-facts > div[hidden] { display: none; }
.case-facts dt { color: var(--ink-2); }
.case-facts dd { margin: 0; color: var(--ink); }
#detail-card .h-sub { margin-top: 28px; }
.case-next { margin: 28px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.case-next a.go { color: var(--accent); }
/* 03 이어지는 경험 — 같은 공유 이름의 공개 기록을 수첩 모양으로(§49) · 달 도장 · 지금 읽은 기록 표시 */
.case-path-block { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--head-h, 56px) + 16px); }
.path-note { margin: 10px 0 22px; padding: 12px 14px; background: var(--field); border-radius: var(--r-ctl); font-size: var(--fs-meta); color: var(--ink-2); line-height: 1.6; }
.timeline.case-path { display: block; margin: 0; font-size: inherit; color: inherit; }
.timeline.case-path li { display: block; }
.timeline.case-path li + li::before { content: ""; color: inherit; }
.timeline.case-path .tl-when { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
.timeline.case-path .case-path-name { font-weight: 600; }
.timeline.case-path .case-path-sub { font-size: var(--fs-meta); }
.timeline.case-path .tl-day-n { font-size: 1.25rem; }
.timeline.case-path a.go { display: inline-flex; flex-direction: row; align-items: center; min-height: 44px; padding: 0; font-size: var(--fs-meta); color: var(--accent); }
.tl-here { display: inline-block; margin-top: 6px; font-size: var(--fs-meta); font-weight: 700; color: var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: 1px; }
/* 아래 고정 줄(상세에서만) — 저장 · «나도 해볼래요» · 기기 아래 여백만큼 올린다 */
.read-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; background: var(--page); border-top: 1px solid var(--line); padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom, 0px)); }
.read-dock .keep-status { max-width: var(--w-read); margin: 0 auto 4px; }
.read-dock .keep-status:empty { display: none; }
.dock-row { max-width: calc(var(--w-read) - 2 * var(--gutter)); margin: 0 auto; display: flex; align-items: center; gap: 4px 14px; min-height: 52px; }
.dock-row .keep-btn { min-height: 44px; }
.dock-row #dock-want { margin-left: auto; min-width: 9.5em; }
body.has-dock { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
/* polish(2026-09-29 critique·audit) — 경험 화면 */
.empty-example { margin: 20px 0 8px; }
.empty-example .exp-item { border-top: 1px solid var(--line); }
.empty-example .item-title { font-size: var(--fs-h4); font-weight: 700; line-height: 1.4; }
.case-choice.is-solo { font-size: var(--fs-body); color: var(--ink); }   /* 서술 없이 고른 답 = 그 구획의 본문 */
#d-path-more-row { margin: 4px 0 0; }
#d-path-more-row:has(> [hidden]) { display: none; }
.timeline.case-path .tl-item:not(:has(.tl-day)) { min-height: 0; }   /* 같은 달이 이어지는 줄 — 도장 없이 점만 */
@media (min-width: 1024px) {
  .exp-item .keep-mini { top: 16px; }
}
/* 아래 고정 줄 — 실제 높이만큼 본문을 띄우고(글자 확대 · 두 줄) 초점이 줄 뒤에 숨지 않게(WCAG 2.4.11 · audit P1) */
.dock-row { flex-wrap: wrap; }
.dock-row .keep-btn, .dock-row .keep-state { white-space: nowrap; }
body.has-dock { padding-bottom: calc(var(--dock-h, 72px) + 8px); }
html:has(body.has-dock) { scroll-padding-bottom: calc(var(--dock-h, 72px) + 16px); }
.share-preview-card .item-meta { display: flex; flex-wrap: wrap; gap: 0 6px; }
.share-preview-card .item-meta > span + span::before { content: "·"; margin-right: 6px; color: var(--ink-2); }
/* 완료 화면의 공유 제안 — 이제 저장 뒤의 주 제안이라 구획 제목이 칸 이름보다 작지 않게 · 설명과 첫 칸 사이를 띄운다 */
.done-share { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.done-share > .h-sub { font-size: var(--fs-h4); font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.done-share > .meta { margin-bottom: 20px; max-width: var(--measure); }
/* 프로필 맨 위 계정 줄의 «로그아웃»(대표님 2026-09-30) — 그 자리 조작 = 굵은 글자(§16) · 44px */
#logout-top-error:empty { display: none; }

/* ── §51 내 계획 = 절제된 티켓(2026-09-30 대표님 «내가 고른 다음 경험의 티켓») ──
 *   얇은 선 하나 · 양옆 작은 반원 홈 · 본문과 행동 사이 가는 점선. 그림자 · 알약 · 질감 · 그라데이션 · 계획별 색 없음.
 *   이 목록(.plan-rows.is-tickets)과 기록 화면의 원본 요약(.plan-origin)에만 — 다른 목록·페이지의 모양은 그대로다.
 *   상태: 해볼 일 = 바탕 그대로 · 진행 중 = 옅은 초록 면 + 초록 선 · 해봤음 = 체크 + 글자 · 보류 = 쉼표 + 글자(흐리게 하지 않는다). 색만으로 가르지 않는다. */
.plan-rows.is-tickets { display: grid; gap: 12px; margin-top: 8px; }
.plan-due .plan-rows.is-tickets { margin-top: 12px; }
.plan-ticket { --tk-bg: var(--band); --tk-pad: 16px;
  position: relative; background: var(--band); border: 0; border-radius: var(--r-ctl); }
.plan-ticket.is-doing { --tk-bg: var(--surface); background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); }
.plan-ticket.is-done, .plan-ticket.is-linked { --tk-bg: var(--surface); background: var(--surface); }   /* 기록으로 이어진 해볼 일 = 끝난 칸처럼 흰 면 · 초록 테두리(진행 중 활성)는 없다 */
.tk-main { padding: 14px var(--tk-pad) 12px; }
.tk-title { font-size: var(--fs-h4); font-weight: 700; line-height: 1.45; }
.tk-toggle { display: block; width: 100%; min-height: 44px; margin: -6px 0; padding: 6px 0; background: none; border: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; border-radius: 4px; }
.tk-title-text { display: block; text-wrap: pretty; }
.plan-ticket:not(.is-open) .tk-title-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) { .tk-toggle:hover .u { background-size: 100% 0.5em; } }
.tk-meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0; margin-top: 10px; }
.tk-toggle:focus-visible { outline-offset: 1px; }
.tk-meta .tk-sep { padding: 0 6px; }
.tk-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); }
.tk-status svg { flex: 0 0 auto; width: 12px; height: 12px; }
.is-doing .tk-status { color: var(--accent); }
.tk-detail { padding: 0 var(--tk-pad) 14px; }
.tk-facts { display: grid; gap: 10px; margin: 6px 0 0; }
.tk-facts dt { font-size: var(--fs-meta); color: var(--ink-2); }
.tk-facts dd { margin: 0; font-size: var(--fs-ui); line-height: 1.65; white-space: pre-wrap; max-width: var(--measure); }
.tk-more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin-top: 6px; }
.tk-detail > .tk-more:first-child { padding-top: 2px; }
.tk-more:empty { display: none; }
.tk-more + .tk-more { margin-top: 0; }   /* 두 줄의 누르는 영역(44px)이 겹치지 않게 */
.tk-part { margin-top: 12px; }
.tk-detail > .tk-part:first-child { padding-top: 6px; margin-top: 0; }
.tk-sub { font-size: var(--fs-meta); font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.tk-facts.is-plain { border-top: 0; padding-top: 0; }
.tk-rd-line .btn-text { padding: 0 2px; margin-left: 10px; }
.plan-ticket.is-open .tk-review-line { display: none; }   /* 펼치면 아래 «돌아볼 날짜» · «경험 돌아보기»가 같은 말을 한다 — 한 번만 */
.tk-rd .plan-inline { margin-top: 8px; }
.tk-go .btn-danger { min-height: 44px; }
#plan-gone { margin-top: 16px; }
.tk-more .btn-text { padding: 0; }
/* 행동 영역 — 선 없이 여백으로(2026-09-30 점선 없음) */
.tk-foot { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px;
  margin: 0; padding: 0 var(--tk-pad) 4px; min-height: 52px; }
.tk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.tk-acts .btn-text { padding: 0; }
.tk-acts .btn-primary { min-height: 44px; padding: 0 20px; margin: 4px 0; }
.tk-acts a.go, .tk-more a.go { margin: 0; }
.tk-acts [aria-busy="true"] { color: var(--ink-2); }
.tk-open { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; margin-left: auto; background: none; border: 0; font: inherit; font-size: var(--fs-ui); font-weight: 600; color: var(--ink-2); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .tk-open:hover { color: var(--ink); } }
.tk-open::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 200ms var(--ease-out); }
.tk-open[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.tk-row-status { padding: 0 var(--tk-pad); }
.tk-row-status:empty { display: none; }
.tk-row-status { padding-bottom: 12px; margin-top: -4px; }
.tk-row-status.is-error { color: var(--danger); }
.plan-ticket .plan-meta + .plan-meta { margin-top: 2px; }
#list-status { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
#list-status:empty { display: none; }
#list-status .btn-text { padding: 0; }
@media (prefers-reduced-motion: reduce) { .tk-open::after { transition: none; } }

/* 기록 화면 위 원본 계획 요약 — 같은 티켓 선(홈·점선 없이 작게) · 본문으로 옮기지 않는다 */
.plan-origin { margin-top: 12px; padding: 12px 16px; background: var(--band); border-radius: var(--r-ctl); }
.plan-origin-lead { font-size: var(--fs-meta); color: var(--ink-2); }
.plan-origin-title { font-weight: 700; line-height: 1.45; margin-top: 2px; }
.plan-origin-date { font-size: var(--fs-meta); color: var(--ink-2); margin-top: 2px; }

/* 내 경로 기록 «고치기» 폼(2026-09-30 모바일 점검): 타임라인 들여쓰기(도장 칸 + 선 ≈ 92px) 안에 폼이 들어가 360px에서 선택지가 좁은 두 줄로 찌그러졌다.
 *   휴대폰에서는 폼만 들여쓰기를 벗어나 전체 폭을 쓰고, 뒤의 타임라인 선을 페이지 바탕으로 덮는다(읽는 기록은 그대로 타임라인 안). */
@media (max-width: 599px) {
  .timeline.is-log .tl-item .me-edit { position: relative; z-index: 1; margin-left: calc(-1 * (var(--rail) + 20px)); padding-top: 16px; background: var(--page); }
  .timeline.is-log .tl-item.is-overlap .me-edit { margin-left: calc(-1 * (var(--rail) + 38px)); }
}

/* ═══ §53 프로필 = 내 기록의 인덱스(대표님 2026-09-30) ═══
 * 내가 쓴 것(경로 기록 · 고민 · 답변)은 파일 탭 셋 · 다시 꺼내볼 것(저장 · 구독)은 따로 · 설정은 관리로 떼어 둔다.
 * 파일 모양 = 얇은 선 + 작은 귀(::before) · 선택 = 옅은 초록 면 + 초록 막대(좁은 화면 아래 · 넓은 화면 왼쪽) + 굵은 글자. 그림자·질감·둥근 알약 없음.
 * 귀는 테두리 위에만 앉고 초점 표시는 안쪽(-4px)에 그려 가려지지 않는다. */
.pf { padding-bottom: var(--sp-8); }
.pf-head { padding: 28px 0 4px; }
.pf-account { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-top: 10px; font-size: var(--fs-meta); color: var(--ink-2); }
.pf-private { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.pf-ico-s { width: 1.125em; height: 1.125em; flex: 0 0 auto; }   /* 글자를 키우면 같이 커진다(audit · 200%) */
.pf-ico { width: 1.375em; height: 1.375em; flex: 0 0 auto; color: var(--ink); }
.pf-n { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600; }
.pf-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin-top: 8px; }
.pf-quick-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--fs-ui); font-weight: 600; color: var(--ink); text-decoration: none; }
.pf-quick-link[aria-current] { text-decoration: underline 2px var(--accent); text-underline-offset: 6px; }
.pf-quick-settings { margin-left: auto; }
@media (hover: hover) and (pointer: fine) { .pf-quick-link:hover { color: var(--accent); } }

.pf-body { margin-top: 20px; }
.pf-files { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-bottom: 0; }
.pf-file { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; align-items: center; gap: 6px 4px; min-height: 64px; height: 100%; margin: 0; padding: 10px 10px 12px; border: 0; border-radius: var(--r-ctl); background: var(--surface); color: var(--ink-2); text-decoration: none; transition: background-color var(--t-fast); }
.pf-file:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; }
.pf-no { font-size: var(--fs-micro); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--ink-2); }
.pf-file .pf-ico { grid-column: 2; grid-row: 1; width: 1.25rem; height: 1.25rem; }
.pf-file .pf-name, .pf-file .pf-desc { grid-column: 1 / -1; }
.pf-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: var(--fs-ui); font-weight: 700; color: var(--ink); line-height: 1.35; word-break: keep-all; }
.pf-desc { display: none; font-size: var(--fs-meta); color: var(--ink-2); }
@media (hover: hover) { .pf-file:not([aria-current]):hover { background: var(--band); } }
.pf-file[aria-current] { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.pf-file[aria-current] .pf-no { color: var(--accent); }
.pf-setting { display: none; }
.pf-sheet { padding-top: 6px; }
.pf-sheet:focus { outline: none; }
.pf-later { display: none; }

.pf-panel { padding-top: 14px; }
.pf-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pf-panel-head h2 { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.01em; }
.pf-panel-head h2:focus { outline: none; }
.pf-count { font-size: var(--fs-meta); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pf-panel-head a.go { margin-left: auto; font-size: var(--fs-ui); }
.pf-panel .space-note { margin-top: 12px; }
.pf-panel > .list { border-top: 0; }
.pf-rows { margin: 0; }
.pf-row { padding: 18px 0 16px; }
.pf-row-meta { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: var(--fs-meta); color: var(--ink-2); margin-bottom: 4px; }
.pf-row-meta > span + span::before { content: "·"; margin-right: 8px; }
.me-item .pf-row-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; word-break: keep-all; }
.pf-state { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; color: var(--ink-2); }
.pf-state strong { font-weight: 600; color: var(--ink); }
.pf-state.is-shared { color: var(--accent); }
.pf-acts { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 2px; }
.pf-acts a.go { font-size: var(--fs-ui); }
.pf-mine { margin-top: 10px; }
.pf-mine-label { font-size: var(--fs-meta); color: var(--ink-2); font-weight: 600; }
.pf-mine .clamp { margin-top: 2px; }
.pf-mine + .me-status { margin-top: 8px; }
.pf-empty { padding: 28px 0 8px; }
.pf-empty-title { font-size: var(--fs-body); font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.pf-empty p + p { color: var(--ink-2); }
.pf-empty .go { margin-top: 6px; }
.pf-foot { margin-top: 14px; font-size: var(--fs-meta); color: var(--ink-2); }
.pf-set { padding-top: 18px; }
.pf-set-title { font-size: var(--fs-h4); font-weight: 700; margin-bottom: 4px; }
.pf-set .btn-row-inline { margin-top: 12px; }
.pf-danger { margin-top: 28px; }
#panel-settings .login-card { border-top: 0; margin-top: 0; }

@media (min-width: 900px) {
  .pf-quick { display: none; }
  .pf-body { display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: start; margin-top: 32px; }
  .pf-index { position: sticky; top: calc(var(--head-h) + 20px); }
  .pf-files { grid-template-columns: 1fr; gap: 8px; padding: 0; border-bottom: 0; }
  .pf-file { display: flex; flex-direction: column; align-items: flex-start; min-height: 0; margin: 0; padding: 14px 16px; gap: 3px; border: 0; border-radius: var(--r-ctl); }
  .pf-file[aria-current] { position: relative; z-index: 1; box-shadow: inset 4px 0 0 var(--accent); background: var(--accent-soft); }
  .pf-file .pf-ico { width: 1.375rem; height: 1.375rem; margin: 4px 0 2px; }
  .pf-name { font-size: var(--fs-h4); }
  .pf-desc { display: block; }
  .pf-setting { display: flex; align-items: flex-start; gap: 12px; margin: 28px 20px 0 0; padding: 20px 0 0 22px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; min-height: 44px; }
  .pf-setting .pf-name { font-size: var(--fs-ui); }
  .pf-setting > span { display: flex; flex-direction: column; gap: 2px; }
  .pf-setting[aria-current] .pf-name { text-decoration: underline 2px var(--accent); text-underline-offset: 6px; }
  @media (hover: hover) and (pointer: fine) { .pf-setting:hover .pf-name { color: var(--accent); } }
  .pf-setting:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .pf-sheet { position: relative; min-height: 420px; padding: 8px 36px 32px; border: 0; border-radius: var(--r-ctl); background: var(--surface); margin-top: 0; margin-left: 20px; }
  .pf-panel { padding-top: 22px; }
  .pf-later { display: block; margin-top: 20px; padding: 16px 36px 8px; background: var(--surface); border-radius: var(--r-ctl); margin-left: 20px; }
  .pf-later h2 { font-size: var(--fs-ui); font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .pf-later ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
  .pf-later li + li { border-left: 1px solid var(--line); padding-left: 28px; }
  .pf-later-link { display: flex; align-items: center; gap: 10px; min-height: 56px; font-size: var(--fs-ui); font-weight: 600; color: var(--ink); text-decoration: none; }
  @media (hover: hover) and (pointer: fine) { .pf-later-link:hover { color: var(--accent); } }
  .pf-later-link[aria-current] > span:first-of-type { text-decoration: underline 2px var(--accent); text-underline-offset: 6px; }
}
@media (prefers-reduced-motion: reduce) { .pf-file { transition: none; } }

/* ═══ §56 전역 달력(2026-09-30 · 대표님 «가장 독창적인 디자인으로 재탄생» → 방향 «전역 달력 D−→D+») ═══════════════
 * 복무 중에는 달력에 하루씩 ✕를 치며 D−를 센다. 전역한 다음 날부터 숫자는 D+로 넘어간다 — 민간인은 그 다음 칸들의 이야기다.
 * 상태 문법 하나로 사이트 전체를 말한다:
 *   ✕ 친 회색 칸 = 지난 복무일(첫 화면 장식에만) · 검정 칸 = 전역일 · 채운 흰 칸 = 남긴 기록(과거) ·
 *   초록 = 지금 · 다음 한 칸 · 고른 것 · 점선 칸 = 아직 오지 않은 날(계획 · 예시의 빈칸).
 * 숫자는 가는 무게(250)로 크게, «D+»·«D−» 머리글자는 작고 굵게. 모서리는 칸처럼 거의 각지게(3px). 그림자 · 그라데이션 · 알약 없음.
 * 글씨체는 Pretendard Variable 하나(무게 축 250~900으로 대비) · 초록은 앱과 같은 #006B50. */

body { background: var(--page); }

/* ── 머리 = 벽걸이 달력의 제본 띠 ── */
.top { border-top: 4px solid var(--ink); }
.logo { font-weight: 900; letter-spacing: -0.035em; color: var(--ink); }
.nav a::after { height: 3px; }

/* ── D+ 도장(목록 · 상세 · 내 경로가 같은 모양) ── */
.dstamp, .tl-day { font-variant-numeric: tabular-nums; }
.dstamp { display: inline-flex; align-items: baseline; gap: 3px; line-height: 1; white-space: nowrap; color: var(--ink); }
.dstamp-k { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.03em; color: var(--accent); }
.dstamp-n { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.045em; }
.dstamp-q { font-size: 0.8125rem; font-weight: 700; color: var(--ink-2); letter-spacing: -0.01em; }
.dstamp.is-long .dstamp-n { font-size: 1.375rem; }
.dstamp.is-unknown .dstamp-n { color: var(--cal-past); font-weight: 400; }
/* 홈 경험 칸의 도장 줄은 높이가 같다(긴 범위 · 모르는 «—»도) → 칸마다 제목 줄이 맞는다 */
.cal-week .dstamp { min-height: 1.75rem; }
@media (min-width: 768px) { .cal-week .dstamp { min-height: 2.5rem; } }   /* 구간을 모르는 경험 — 날수를 지어내지 않는 흐린 한 칸 */
.dstamp.is-before .dstamp-k { color: var(--ink-2); font-size: 1rem; }
.dstamp.is-lg .dstamp-k { font-size: 0.9375rem; }
.dstamp.is-lg .dstamp-n { font-size: clamp(3rem, 2.2rem + 3vw, 4.75rem); letter-spacing: -0.05em; }
.dstamp.is-lg .dstamp-q { font-size: 1.0625rem; }
.tl-day-k { font-weight: 800; }
.tl-day-n { font-weight: 800; letter-spacing: -0.04em; }
.timeline.is-log .tl-now .tl-day-n { font-weight: 700; }

/* ── 버튼 · 입력 = 칸 ── */
.btn-primary { letter-spacing: -0.01em; }
@media (hover: hover) and (pointer: fine) { .btn-primary:not(:disabled):not([aria-disabled="true"]):hover { background: var(--accent); } }
.input { background: var(--surface); box-shadow: none; }
@media (hover: hover) { .input:hover { box-shadow: inset 0 0 0 1px var(--ink); } }
.input:focus, .input:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.input[aria-invalid="true"], .input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 2px var(--danger); }
.field:focus-within > .label, .field:focus-within > legend.label { text-decoration-color: transparent; color: var(--accent); }
.label, legend.label { transition: color 160ms linear; }

/* 선택지 = 달력 칸. 고르면 초록 테두리 + 옅은 초록 면(색 · 굵기 · 라디오 표시가 함께 말한다) */
.choices { border-top: 0; gap: 8px; }
.choices-2 { column-gap: 8px; }
.choices-tight { column-gap: 8px; }
.choices-tight + .choices-tight { margin-top: 8px; }
.choice { border: 0; border-radius: var(--r-ctl); background: var(--surface); padding: 12px 14px; transition: background-color 160ms linear, box-shadow 160ms linear; }
@media (hover: hover) and (pointer: fine) { .choice:hover { box-shadow: inset 0 0 0 1px var(--ink); } }
.choice:has(input:checked) { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
@media (hover: hover) and (pointer: fine) { .choice:has(input:checked):hover { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); } }
.choice:not(.choice-col):has(input:checked) > span, .choice-col:has(input:checked) > span > span:first-child { text-decoration-color: transparent; }
.class-q[data-invalid] .choice { box-shadow: inset 0 0 0 1px var(--danger); }
.plan-status-set.choices { gap: 6px; }
.check input { accent-color: var(--accent); }

/* 접힘 · 안내 — 칸의 윗선 한 줄 */
.fold { border-color: var(--line); }

/* ── 첫 화면 = 전역 달력 한 줄 ── */
.hero-cal { padding: 36px 0 40px; }
.hero-cal .h-home { font-size: clamp(2.5rem, 1.7rem + 3.4vw, 5.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 18px; }
.hero-cal .lead { font-size: var(--fs-read); }
.cal-k { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1; color: var(--ink-2); white-space: nowrap; }
.cal-n { align-self: flex-end; font-size: clamp(1.25rem, 0.6rem + 3.2vw, 4.25rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.9; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 지난 복무일 = 전역일로 갈수록 짙어지는 칸(D−3 → D−2 → D−1 → 검정 전역일 · ✕ 대신 · 2026-09-30 대표님) */
.hero-cal .cta { margin-top: 24px; }
.hero-cal .hero-note { max-width: 44em; }
@media (min-width: 1024px) {
  .hero-cal { padding: 64px 0 72px; }
  .cal-k { font-size: 0.8125rem; }
  .hero-cal .cta { margin-top: 32px; }
}

/* ── 구획 머리 = 달력의 달 이름 ── */
.cal-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 12px; padding-bottom: 14px; margin-bottom: 0; border-bottom: 2px solid var(--ink); }
.cal-head > h2 { grid-column: 1; grid-row: 1; }
.cal-head > a { grid-column: 2; grid-row: 1; align-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: -10px; color: var(--ink); text-decoration: none; font-size: var(--fs-meta); font-weight: 700; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .cal-head > a:hover { color: var(--accent); } }

/* 최근 공개된 경험 = 이번 주 칸들(휴대폰은 칸이 세로로 쌓인다 · 넓으면 나란히) */
.cal-week { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; border-top: 0; }
.cal-week > .item { border: 0; background: var(--surface); }
.cal-week > .item .item-link { position: relative; display: flex; flex-direction: column; height: 100%; padding: 16px 18px 18px; }
.cal-week > .item:first-child .item-link { padding-top: 16px; }
.cal-week .dstamp { margin-bottom: 14px; }
.cal-week .item-title { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.625rem); line-height: 1.34; }
@media (hover: hover) { .cal-week > .item { transition: background-color 200ms linear; } .cal-week > .item:hover { background: #FBFCFA; } }
@media (min-width: 768px) {
  .cal-week { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .cal-week > .item .item-link { padding: 18px 22px 22px; }
  .cal-week .dstamp-n { font-size: 2.5rem; }
  .cal-week .dstamp.is-long .dstamp-n { font-size: 1.875rem; }
  .cal-week .item-body { -webkit-line-clamp: 4; }
}

/* 기록하기 · 계획하기 = 두 장의 달력 쪽 — 내가 남긴 칸(채움) · 아직 오지 않은 칸(점선) */
.home-turn { padding-top: 40px; }
.home-turn .lead { margin-top: 10px; max-width: 36em; }
.turn-go { display: flex; flex-wrap: wrap; gap: 4px 32px; margin: 20px 0 0 -2px; }
@media (min-width: 900px) {
  .home-turn { padding-top: 56px; }
  .turn-go { margin-top: 28px; }
}

/* 기록 칸 아래 한 줄(자물쇠 + 나만 보는 기록) */
.home-note { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--fs-meta); color: var(--ink-2); }
.home-ico { width: 1.125em; height: 1.125em; flex: 0 0 auto; }
.section .cal-week > .item:first-child .item-link { padding-top: 16px; }
@media (min-width: 768px) { .section .cal-week > .item:first-child .item-link { padding-top: 18px; } }
@media (min-width: 1024px) {
  /* 제목 → 리드 → 달력 → 버튼 한 줄기(critique 2026-09-30 P1: 리드가 오른쪽 열 바닥에 붙어 시선이 지그재그였다) */
  .hero-cal > .wrap > .lead { max-width: 30em; font-size: var(--fs-h4); }
}
/* 구획 사이 — 휴대폰에서 목록이 뜨기 전 빈 자리가 생기지 않게 스크롤 등장은 쓰지 않는다(가만히 있어도 다 보인다) */
.motion .reveal, .motion .reveal.is-in { opacity: 1; transform: none; transition: none; }

/* ── 경험 목록 = 날수 도장이 왼쪽에 찍힌 기록 줄(내 경로 수첩과 같은 모양) ── */
.exp-item > .item-link:has(> .dstamp) { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); column-gap: 14px; }
.exp-item > .item-link:has(> .dstamp) > * { grid-column: 2; }
.exp-item > .item-link > .dstamp { grid-column: 1; grid-row: 1 / span 4; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 2px; padding-right: 0; align-self: stretch; }
.exp-item > .item-link > .dstamp .dstamp-n { font-size: 1.3125rem; letter-spacing: -0.05em; }
.exp-item > .item-link > .dstamp.is-long .dstamp-n { font-size: 1rem; letter-spacing: -0.03em; }
.exp-item .item-foot { padding-right: 52px; }
.exp-item.is-example > .item-link { grid-template-columns: minmax(0, 1fr); }
.exp-item.is-example > .item-link > * { grid-column: 1; }
@media (min-width: 1024px) {
  .exp-item > .item-link:has(> .dstamp) { grid-template-columns: 6rem minmax(0, 1fr); column-gap: 24px; }
  .exp-item > .item-link > .dstamp .dstamp-n { font-size: 2rem; }
  .exp-item > .item-link > .dstamp.is-long .dstamp-n { font-size: 1.375rem; }
}
#view-list .ctx a.go { background: var(--surface); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { #view-list .ctx a.go:hover { box-shadow: inset 0 0 0 1px var(--accent); } }

/* ── 경험 상세: 큰 날수 도장 → 시간 종류 → 제목 · 그때의 사실은 달력 칸 셋 ── */
.d-head { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 4px; }
.d-stamp-slot:empty { display: none; }
.case-facts { border-top: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.case-facts > div { background: none; }
@media (min-width: 600px) {
  .case-facts { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; }
  .case-facts > div { grid-template-columns: 1fr; gap: 4px; align-content: start; }
  .case-facts dt { font-size: var(--fs-micro); font-weight: 700; }
}
#detail-card .h-sub { color: var(--ink); font-size: var(--fs-ui); }
.read-dock { border-top: 2px solid var(--ink); }

/* ── 내 경로 · 공유된 경로 — 숫자는 가늘게, 지금은 초록 칸 ── */
.timeline.is-log .tl-now::before { border-radius: 2px; }
.tl-item::before { border-radius: 2px; }

/* ── 내 계획 = 아직 오지 않은 날의 점선 칸(§51 티켓을 대신한다 · 반원 홈 없음) ── */
/* (§51 티켓의 선·모서리·반원 홈은 위 §51 자리에서 달력 칸 값으로 바꿨다 — 2026-09-30 audit 정리) */

/* ── 프로필 = 달력 칸 인덱스(파일 귀 없음) ── */
@media (hover: hover) { .pf-file:not([aria-current]):hover { background: var(--accent-soft); } }
@media (min-width: 900px) {
  .pf-setting { margin-right: 0; padding-left: 16px; }
}

/* ── 고민 띠 · 빈 상태 · 확인창 · 바닥 ── */
.section-band { background: var(--band); }
.empty { border-color: var(--line); }
.progress-bar { height: 4px; background: var(--cal-line); }
.progress-bar > span { background: var(--accent); }
.footer { border-top: 2px solid var(--ink); margin-top: 48px; }
.footer-brand { font-weight: 900; letter-spacing: -0.03em; }
.skeleton { border-bottom-color: var(--line); }

@media (prefers-reduced-motion: reduce) {
  .choice, .input, .label, legend.label { transition: none; }
}

/* ── 내 계획 첫 사용 예시 = 아직 오지 않은 날의 점선 칸(§56 · 2026-09-30 대표님) ──
 * 저장된 계획이 아니라 «비어 있는 다음 날»이다: 점선 칸 · 가는 «?» · «날짜는 아직». 가리키면(또는 초점) 점선이 초록 실선으로 차오르고
 * «?»가 초록이 된다 — 빈 날이 내 칸이 되는 한 동작. 휴대폰은 세로로 쌓이고 넓으면 세 칸 나란히. 손님의 로그인 문에서는 누를 수 없는 작성 예시. */
.plan-examples.fx-days { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.plan-examples.fx-days > li { display: flex; padding: 0; border: 0; color: var(--ink); font-weight: 400; }
.plan-examples.fx-days > li > .fx-cell { flex: 1 1 auto; }
.plan-examples.fx-days > li.fx-cell { padding: 12px 14px; }
@media (min-width: 640px) { .plan-examples.fx-days > li.fx-cell { padding: 14px 16px; } }
.fx-cell { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 14px 14px 12px; border: 0; border-radius: var(--r-ctl); background: var(--band); color: var(--ink); text-decoration: none; transition: box-shadow 200ms linear, background-color 200ms linear; }
.fx-top { display: flex; align-items: baseline; gap: 4px; line-height: 1; }
.fx-k { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.03em; color: var(--ink-2); transition: color 200ms linear; }
.fx-n { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.04em; color: var(--ink-2); transition: color 200ms linear, transform 320ms var(--ease-out); }
.fx-t { font-size: var(--fs-body); font-weight: 700; line-height: 1.45; text-wrap: pretty; }
.fx-foot { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; font-size: var(--fs-meta); color: var(--ink-2); }
.fx-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); }
.fx-go::after { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 240ms var(--ease-out); }
a.fx-cell { cursor: pointer; }
a.fx-cell:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) {
  a.fx-cell:hover { box-shadow: inset 0 0 0 2px var(--accent); background: var(--surface); }
  a.fx-cell:hover .fx-k, a.fx-cell:hover .fx-n, a.fx-cell:hover .fx-go { color: var(--accent); }
  a.fx-cell:hover .fx-n { transform: translateY(-2px); }
  a.fx-cell:hover .fx-go::after { transform: translateX(3px) rotate(45deg); }
}
a.fx-cell:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); background: var(--surface); }
a.fx-cell:active { background: var(--accent-soft); }
.fx-days.is-static .fx-cell { min-height: 96px; }
@media (min-width: 640px) {
  .plan-examples.fx-days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fx-cell { min-height: 140px; padding: 16px 16px 14px; }
  .fx-n { font-size: 3rem; }
  .fx-days.is-static .fx-cell { min-height: 120px; }
}
/* 빈 상태 자체도 칸 언어로 — 위아래 줄 대신 여백 */
#plans-empty { border: 0; padding-top: 12px; }
#plans-empty .plan-examples-label { margin-top: 22px; color: var(--ink); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .fx-cell, .fx-k, .fx-n, .fx-go::after { transition: none; } a.fx-cell:hover .fx-n { transform: none; } }

/* ── §56 critique 뒤(2026-09-30 · 홈 21/32 → P1 둘 + P2 전부 · 대표님) ─────────────────────────────── */
/* P1 히어로: 두 문은 대등하되 검정 면이 앞 — 이동 글자를 주 버튼 글자(17 · 700)에 맞춘다(1280에서 보조가 더 무거웠다) */
.hero-cal .cta .btn-go-lg { font-size: var(--fs-read); font-weight: 700; letter-spacing: -0.01em; min-height: 52px; gap: 8px; }
.hero-cal .cta .btn-go-lg::after { width: 7px; height: 7px; border-width: 1.75px 1.75px 0 0; }
/* P1 달력 문법: 날수 구간을 모르는 경험도 도장 자리는 비워 둔다(지어내지 않고 칸 윗줄만 맞춘다) */
/* 전역일은 어디서나 검정 칸(내 경로 · 작성 예시의 D-DAY가 초록이던 것) — 초록은 «지금»에만 */
.tl-item.is-discharge::before, .timeline.is-example .tl-item.is-discharge::before, .timeline.is-log .tl-item.is-discharge::before { background: var(--ink); border-color: var(--ink); }
/* 고민 띠 = 아직 답이 없는 칸(점선 머리 표시) · 머리 아래 안내 한 줄 */
.section-band .band-note { margin: 12px 0 0; max-width: var(--measure); }
/* P2 예시 칸 = 빈 다음 칸이 곧 기록하기 · 점선 계획 칸이 곧 내 계획(포인터·터치 지름길 · 키보드는 아래 이동 글자) */
a.cal-go { color: inherit; text-decoration: none; cursor: pointer; transition: background-color 200ms linear, border-color 200ms linear, box-shadow 200ms linear; }
@media (hover: hover) {
  a.cal-go.is-next:hover { background: var(--accent-soft); }
}
a.cal-go:active { background: var(--accent-soft); }
/* P2 오류 모드: 원인이 리드 자리 */
.hero-cal .lead.is-error { color: var(--ink); font-weight: 600; }
/* P2 글자 200%: 칸이 글자를 자르지 않고 늘어난다(✕는 칸 전체에 절대 위치) · 좁은 칸의 숫자는 칸 폭을 넘지 않게 */
/* P2 글자 200%: 머리가 화면의 18%를 넘게 커지면 붙이지 않는다(core.js가 실제 높이를 재서 표시) — 읽을 자리를 머리가 차지하지 않게 */
html[data-tall-head] .top { position: relative; }

/* ═══ 내 경로 critique 수정(대표님 2026-09-30 · 27/40 뒤 «전부») ═══
 * 기록 = 흰 실선 칸(§56 상태 문법) · 같은 달에 이어진 칸은 선을 나눈다(Joined Grid) · 전역일은 검정 칸 · 날수는 «지금» 한 곳.
 * 채우기 버튼은 비어 있는 것 하나만(메타 무게) · 전역일은 «전역» 줄에서 · 인라인 폼이 열린 동안 목록 끝 주 버튼은 물러난다. */
.timeline.is-log .tl-cell { background: var(--surface); border: 0; border-radius: var(--r-ctl); padding: 12px 14px 2px; }
.timeline.is-log .tl-item:has(> .tl-cell)::before { top: 19px; }
.timeline.is-log .tl-item:has(> .tl-cell) > .tl-day { top: 12px; }
.timeline.is-log .tl-item.is-ongoing:has(> .tl-cell)::after { top: 31px; }
/* 같은 달 · 같은 들여쓰기로 이어진 기록끼리는 틈 없이 한 장(달 머리글 · «같은 시기» 칸 · «지금»에서 끊긴다) */
.timeline.is-log .tl-item:not(.is-overlap):has(> .tl-cell):has(+ .tl-item:not(.is-overlap) > .tl-cell) { padding-bottom: 0; }
.timeline.is-log .tl-item:not(.is-overlap):has(> .tl-cell):has(+ .tl-item:not(.is-overlap) > .tl-cell) > .tl-cell { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.timeline.is-log .tl-item:not(.is-overlap):has(> .tl-cell) + .tl-item:not(.is-overlap) > .tl-cell { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.timeline.is-log .tl-cell .tl-more { margin-top: 2px; }
.timeline.is-log .tl-cell .me-saved { margin: 4px 0 10px; }
/* 전역일 = 검정 칸 + 흰 글자(«전역일은 어디서나 검정» · 초록은 «지금»에만) */
.tl-day.is-word:not(:has(.tl-day-k)) .tl-day-n { background: var(--ink); color: var(--surface); height: 24px; padding: 0 7px; border-radius: 2px; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.04em; }
.tl-day-k { font-size: 0.75rem; }   /* day-prefix 토큰(11px → 12px) */
@media (min-width: 600px) { .tl-day-n { font-size: 1.75rem; } }   /* day-numeral 토큰 — 넓은 화면에서 2rem으로 키우지 않는다 */
.timeline.is-log .tl-item.is-discharge-unknown { min-height: 0; }
.tl-note { font-size: var(--fs-meta); color: var(--ink-2); margin-top: 2px; }
/* 채우기 = 메타 무게의 조작 글자(제목보다 먼저 눈에 걸리지 않게) · «자세히» 안의 제안은 한 줄 머리말과 함께 */
.tl-fills .tl-fill-btn { font-weight: 600; color: var(--ink-2); }
.tl-fills .tl-fill-btn[aria-expanded="true"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .tl-fills .tl-fill-btn:hover { color: var(--ink); } }
.tl-fills.is-inner { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--line); align-items: center; gap: 0 14px; }
.tl-fills-lead { font-size: var(--fs-meta); color: var(--ink-2); }
/* 전역일 폼은 «전역» 줄 · 빈 화면 보조 줄 아래로 옮겨 간다 — 옛 상자 모양 없이 */
.discharge, .timeline.is-log .discharge { border: 0; background: none; padding: 8px 0 4px; margin: 0; border-radius: 0; }
.discharge .more-row { margin: 0; }
.btn-text.btn-inline { display: inline; min-height: 0; padding: 11px 0; margin: -11px 0; font-weight: 700; color: var(--ink); }
/* 목록에서 연 공유 칸 */
.tl-share-form { gap: 10px; }
.tl-share-form .h-sub { margin: 0; }
.tl-share-form .share-preview { margin: 4px 0 0; }
.tl-share-form .share-preview .h-sub { font-size: var(--fs-meta); color: var(--ink-2); margin-top: 8px; }
/* 휴대폰: 폼(고치기 · 공유)이 열리면 그 칸이 도장 열을 덮고 전체 폭을 쓴다(선택지가 좁은 두 줄로 찌그러지지 않게) — 옛 «폼만 삐져나오기»를 대체 */
@media (max-width: 599px) {
  .timeline.is-log .tl-item .me-edit { margin-left: 0; background: none; }
  .timeline.is-log .tl-item.is-overlap .me-edit { margin-left: 0; }
  .timeline.is-log .tl-item:has(.me-edit:not([hidden]), .tl-share-form) > .tl-cell { position: relative; z-index: 1; margin-left: calc(-1 * (var(--rail) + 20px)); }
  .timeline.is-log .tl-item.is-overlap:has(.me-edit:not([hidden]), .tl-share-form) > .tl-cell { margin-left: calc(-1 * (var(--rail) + 38px)); }
  .timeline.is-log .tl-cell .choices-tight { grid-template-columns: 1fr; }
}
/* 글자를 크게(200%) 키운 휴대폰 · 320px: 도장을 왼쪽 열 대신 제목 위 한 줄로 — 본문 열이 폭의 절반으로 좁아지지 않게 */
@media (max-width: 20em) {
  .timeline.is-log { --day-w: 0px; --rail: 8px; }
  .timeline.is-log .tl-day { position: static; width: auto; flex-direction: row; align-items: baseline; gap: 6px; margin: 0 0 6px; }
  .timeline.is-log .tl-item:has(> .tl-cell) > .tl-day { top: auto; }
  .timeline.is-log .tl-day-k { height: auto; }
  .timeline.is-log .tl-day-n { font-size: 1.375rem; }
  .timeline.is-log .tl-item:has(> .tl-day)::before { top: 8px; }
}
.timeline.is-log .tl-cell > .tl-when .rel-days { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* 칸 안으로 옮긴 뒤에도 — 도장이 같은 날수를 보인다, 글자는 화면 읽기에만 */
.tl-share-form .error:empty, .tl-fill .error:empty { display: none; }

/* ═══ 흰 칸 안의 입력 · 선택지(2026-09-30 · 회색 테두리를 걷은 뒤) ═══
 * 입력칸 · 선택지는 테두리 없는 흰 면이라 흰 칸(내 경로 기록 칸 · 프로필 판 · 진행 중/해봤음 계획 · 확인창) 안에서는 사라진다.
 * 그 안에서는 종이 면으로 한 톤 내려 칸이 칸으로 보이게 한다. 고른 선택지(초록 물) · 쓰는 중(초록 안쪽 선)은 그대로. */
:is(.tl-cell, .pf-sheet, .pf-later, .plan-ticket.is-doing, .plan-ticket.is-done, .plan-ticket.is-linked, dialog) .input,
:is(.tl-cell, .pf-sheet, .pf-later, .plan-ticket.is-doing, .plan-ticket.is-done, .plan-ticket.is-linked, dialog) .choice:not(:has(input:checked)) { background: var(--page); }

/* ═══ 홈 critique 뒤(2026-09-30 · 대표님 «전부») ═══ */
/* 히어로의 초록 D+1 칸 = 기록 지름길(예시 칸과 같은 규칙: 초록 칸은 누를 수 있다 · 포인터·터치만 · 키보드는 바로 아래 «내 경로 기록하기») */
/* 경험 칸은 가장 긴 내용만큼(고정 최소 높이 280px를 걷었다 · 빈 흰 면 없음) — 한 줄의 칸은 같은 높이 */
/* 홈 구획 사이 리듬 하나 */
.hero-cal { padding-bottom: 28px; }
body[data-page="home"] .section { padding: 40px 0; }
body[data-page="home"] .section-band { margin-top: 40px; padding: 48px 0 56px; }
@media (min-width: 1024px) {
  .hero-cal { padding-bottom: 48px; }
  body[data-page="home"] .section, body[data-page="home"] .section + .section { padding: 56px 0; }
  body[data-page="home"] .section-band, body[data-page="home"] .section + .section-band { margin-top: 56px; padding: 72px 0 80px; }
  /* 고민 둘은 위 격자에 맞춰 두 열 */
  .section-band .list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .section-band .list > .item { border-bottom: 0; }
  .section-band .list > .item .item-link, .section-band .list > .item:first-child .item-link { padding-top: 16px; }
}

/* 홈에서는 머리의 ‘내 경로 기록하기’를 걷는다 — 첫 화면과 내 칸 줄에 같은 행동이 이미 있다(2026-09-30 critique P1) */
body[data-page="home"] .btn-write { display: none; }


/* 최근 공개된 경험 = 지면(critique 2026-09-30: 같은 폭의 흰 카드 세 장은 템플릿) — 굵은 윗선 아래 흰 면 없이 글로 선다.
   휴대폰은 행 사이 옅은 가로선 · 넓으면 세 단(선 없이 여백으로 가른다) */
.cal-week { gap: 0; }
.cal-week > .item { background: none; border-bottom: 1px solid var(--line); }
.cal-week > .item:last-child { border-bottom: 0; }
.cal-week > .item .item-link, .cal-week > .item:first-child .item-link { padding: 20px 0 22px; }
@media (hover: hover) { .cal-week > .item:hover { background: none; } .cal-week > .item:hover .item-title .u { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; } }
@media (min-width: 768px) {
  .cal-week { column-gap: 40px; }
  .cal-week > .item { border-bottom: 0; }
  .cal-week > .item .item-link { padding: 22px 0 8px; }
}

/* ── 경험 목록·상세 critique 뒤(2026-09-30 · §67) ── */
/* 목록 = D+ 구간 묶음. 묶음 머리 = 달력의 달 머리(굵은 윗선 + 도장 + 편 수) · 줄에는 도장이 없다 */
.list.is-grouped { border-top: 0; }
.exp-group { list-style: none; }
.exp-group + .exp-group { margin-top: 28px; }
.exp-group-h { display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 12px 0 10px; border-top: 2px solid var(--ink); }
.exp-group-h .dstamp.is-md .dstamp-k { font-size: 0.8125rem; }
.exp-group-h .dstamp.is-md .dstamp-n { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.exp-group-h .dstamp.is-md .dstamp-q { font-size: 0.9375rem; }
.exp-group-w { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); font-weight: 800; letter-spacing: -0.02em; color: var(--ink-2); }
.exp-group-n { margin-left: auto; font-size: var(--fs-meta); font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.exp-group > .list { border-top: 1px solid var(--line); }
.browse-empty { display: grid; justify-items: start; gap: 8px; }
.browse-empty p { margin: 0; }
/* ‘내 상황에 맞춰 보기’ = 흰 상자 대신 이동 글자(목록 화면에 상자는 없다) */
#view-list .ctx a.go, #view-list .ctx a.go:hover { display: inline-flex; justify-self: start; padding: 0; min-height: 44px; background: none; box-shadow: none; border-radius: 0; font-weight: 700; color: var(--ink); }
/* 넓은 화면의 옆 열 필터 = 한 줄에 하나(꺾여 혼자 떨어지는 항목 없게) */
@media (min-width: 1024px) {
  .filter-col .filters, .filter-col .filter-group { display: flex; flex-direction: column; align-items: flex-start; }
  .filter-col .filter-opt { min-height: 40px; }
}
/* ‘다른 생각’ 줄 = 누르면 바로 저장되는 선택 — 이동 꺾쇠를 달지 않는다 */
.reaction::after { content: none; }
/* 상세 = 설문지가 아니라 사람의 글로(critique P1) */
.case-lede { margin: 12px 0 16px; max-width: 34em; font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem); font-weight: 700; line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); word-break: keep-all; }
.case-lede::before { content: "‘"; } .case-lede::after { content: "’"; }
#detail-card .byline { margin-bottom: 6px; }
#detail-card .byline .tag::before { display: none; }
/* 그때의 사실 = 흰 표 대신 메타 한 줄(이름표는 화면 읽기에만) */
.case-facts, .case-facts > div { display: block; }
.case-facts { margin: 0 0 8px; padding: 0; border: 0; background: none; font-size: var(--fs-meta); line-height: 1.6; color: var(--ink-2); }
.case-facts > div, .case-facts > div:not([hidden]) { display: inline; padding: 0; border: 0; background: none; }
.case-facts > div[hidden] { display: none; }
.case-facts dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.case-facts dd { display: inline; margin: 0; color: var(--ink-2); }
.case-facts > div:not([hidden]) ~ div:not([hidden])::before { content: " · "; }
@media (min-width: 768px) { .case-facts { grid-template-columns: none; } .case-facts > div { grid-template-columns: none; } }
#detail-card .h-sub { margin: 30px 0 6px; font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.01em; color: var(--ink-2); }
#detail-card.is-short .h-sub { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
#detail-card.is-short .body-text + div { margin-top: 18px; }
/* 휴대폰 머리 메뉴 — 가장 짧은 이름(‘경험’)도 누르는 폭 44px */
.nav a { min-width: 44px; justify-content: center; }
.exp-group > .list > .item:last-child { border-bottom: 0; }


/* ── 2026-09-30 네 화면 critique 뒤(§69) ── */
/* 홈 최근 경험(넓은 화면 세 단): 도장이 없는 칸도 같은 높이에서 시작(지면의 단은 같은 줄에서 연다) */
@media (min-width: 768px) { .cal-week > .item .item-link:not(:has(> .dstamp))::before { content: ""; display: block; height: 2.5rem; margin-bottom: 14px; } }
/* 전역일 = 빨간 날(사이트 전체): 타임라인 · 작성 예시의 전역 줄 */
.timeline .tl-item.is-discharge .tl-day-n { background: none; color: var(--holiday); padding: 0; }
.timeline .tl-title.is-discharge { color: var(--holiday); }
/* 경험: 한 편짜리 묶음이 내용보다 무겁지 않게 — 도장 한 단 작게 · 머리 아래 선 없이 여백 */
.exp-group-h .dstamp.is-md .dstamp-n { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem); }
.exp-group > .list { border-top: 0; }
.exp-group-h { padding-bottom: 4px; }
/* 경험: 메타 줄 앞의 작은 도장(이어지는 경험) */
.dstamp.is-sm { margin-right: 8px; vertical-align: baseline; }
.dstamp.is-sm .dstamp-k { font-size: 0.6875rem; } .dstamp.is-sm .dstamp-n { font-size: 0.9375rem; } .dstamp.is-sm .dstamp-q { font-size: 0.75rem; }
#next-list > .item:last-child { border-bottom: 0; }
#detail-card .byline .tag { font-weight: 400; }
#detail-card .byline .tag::before { content: "·"; display: inline; width: auto; height: auto; background: none; border-radius: 0; margin-right: 2px; color: var(--ink-2); }
@media (min-width: 1024px) { .filter-col .filter-opt { min-height: 44px; } }
/* 기록하기: 시간 종류는 한 줄 칸 · 설명은 고른 칸에만(휴대폰 약 900px → 절반) */
/* 활동 7개 · 활동 상태 5개: 고른 것의 설명 하나 — 선택지 묶음에 붙은 한 칸(격자 간격과 같은 8px · 칸과 같은 폭 · 제목이 고른 이름을 말한다 · 옆줄 장식 없음)
   · 선택 전에는 자리 없음 · 휴대폰에서는 설명 두 줄 자리를 잡아 바꿀 때 덜 흔들린다(넓으면 한 줄이라 자리를 잡지 않는다) */
.act-desc { margin-top: 8px; padding: 10px 14px 12px; background: var(--band); border-radius: var(--r-ctl); }
.act-desc-title { margin: 0 0 2px; font-size: var(--fs-ui); font-weight: 700; line-height: 1.4; color: var(--ink); word-break: keep-all; }
.act-desc-body { margin: 0; font-size: var(--fs-meta); line-height: 1.55; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
@media (max-width: 599px) { .act-desc-body { min-height: calc(2 * 1.55em); } }
/* 활동 7개 칸: 휴대폰 2열 · 넓으면 3열(기존 배치) · 글자가 커져 이름이 꺾이면 1열 — 열 폭의 하한을 글자 크기(em)로 둔다 */
:is(#activity-choices, [data-group="activity"] .choices, #outcome-choices, [data-group="outcome"] .choices, .tl-fill .choices) { grid-template-columns: repeat(auto-fill, minmax(max(7.5em, calc((100% - 16px) / 3)), 1fr)); }
:is(#activity-choices, [data-group="activity"] .choices, #outcome-choices, [data-group="outcome"] .choices, .tl-fill .choices) .choice { word-break: keep-all; }
/* 기록하기: 오류 = 질문 이름만 빨갛게 · 칸마다 빨간 테두리 · 분홍 면 없음(칸은 면 · 선 없음 §59) */
.class-q[data-invalid] .choice, .class-q[data-invalid] .choice:hover { box-shadow: none; }
.class-q[data-invalid] > legend.label { color: var(--danger); }
.class-q > legend.label + .error, .class-q > legend + .guide-hint + .error { margin: 0 0 8px; }
.input[aria-invalid="true"], .input[aria-invalid="true"]:focus { background: var(--surface); }
/* 기록하기: 연·월 칸이 잘리지 않게(critique 재발) */
.month-row .input { flex: 0 0 auto; width: auto; min-width: 7.5em; max-width: none; }   /* width: auto — 줄여 맞추는 줄 안에서 100%가 칸을 535px까지 키웠다(2026-10-01 · 320px) */
/* 기록하기: 이 페이지 머리의 ‘내 경로 기록하기’는 자기 자신이라 걷는다 */
body[data-page="share"] .btn-write, body[data-page="path"] .btn-write { display: none; }   /* 내 기록은 탭 위 검정 하나가 그 탭의 쓰기다(critique 2026-10-01) */
/* 기록하기: 단계 줄은 탭이 아니라 순서 글자(누를 수 없는 밑줄 탭처럼 보이지 않게) */
.step-tabs [aria-current="step"]::after { display: none; }
.step-tabs > span[data-step-tab]::before { content: attr(data-step-tab) " · "; font-variant-numeric: tabular-nums; }
.step-tabs > span[data-step-tab] + span[data-step-tab]::before { content: "→  " attr(data-step-tab) " · "; }
/* 기록 완료: ✓ 대신 방금 채운 칸이 먼저 */
.done .done-entry { margin: 0 0 18px; }
/* 내 경로: 레일 · 빈 네모 마디를 걷는다(숫자 열이 이미 시간 순서를 말한다) */
.timeline.is-log::before, .timeline.is-log .tl-item::before, .timeline.is-log .tl-item::after, .timeline.is-log .tl-now::before, .timeline.is-log .tl-now::after { display: none; }
/* 내 경로: 달 머리 = 경험 목록의 구간 머리와 같은 문법(잉크 윗선 · 초록 아님) */
.timeline.is-log .tl-month { color: var(--ink); font-size: var(--fs-meta); font-weight: 800; border-top: 2px solid var(--ink); margin-top: 18px; padding-top: 10px; }
.timeline .tl-meta .cat { color: var(--ink-2); }
/* 내 경로: 같은 시기의 기록은 들여 쓰지 않는다(답글처럼 보였다) — ‘앞 기록과 같은 시기’ 한 줄만 */
.timeline.is-log .tl-item.is-overlap { margin-left: 0; padding-left: calc(var(--rail) + 20px); }
.timeline.is-log .tl-item.is-overlap:has(.me-edit:not([hidden]), .tl-share-form) > .tl-cell { margin-left: calc(-1 * (var(--rail) + 20px)); }
/* 내 경로: 끝의 ‘지금’ = 누를 수 있는 초록 칸(다음 칸 기록하기) */
.timeline.is-log .tl-now { padding-left: calc(var(--rail) + 20px); }
.tl-now-cell { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-height: 52px; padding: 12px 14px; border-radius: var(--r-ctl); background: var(--accent); color: #fff; text-decoration: none; }
.tl-now-cell .tl-now-label, .timeline.is-log .tl-now .tl-now-cell .tl-now-label { color: #fff; }
.tl-now-act { margin-left: auto; font-size: var(--fs-meta); font-weight: 700; }
.tl-now-act::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
@media (hover: hover) { .tl-now-cell:hover { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.5); } }
/* 내 경로: 월 기록의 날수 범위(‘D+ 17–47’)는 한 단 작게 */
.tl-day.is-range .tl-day-n { font-size: 1.125rem; letter-spacing: -0.03em; }
/* 내 경로 ‘자세히’: 행동 줄은 왼쪽 정렬 · 삭제는 오른쪽 끝 · ‘더 남기고 싶다면’은 한 줄 위 */
.tl-cell .me-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.tl-cell .me-actions .btn-danger { margin-left: auto; }
.tl-fills.is-inner { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 18px; }
.tl-fills.is-inner .tl-fills-lead { flex-basis: 100%; }
a.tl-now-cell, a.tl-now-cell:hover { color: #fff; }   /* a.cal-go(inherit)보다 앞서게 */

/* ── 휴대폰에서 앱처럼(2026-10-01 · emil-design-eng · mobile-native 리뷰) ──
 * 탭할 때 회색 번쩍임 없음(대신 아래 :active가 눌림을 말한다) · 두 번 탭 확대 대기 없음 · 길게 눌러도 버튼 글자가 선택되지 않음(본문 글은 그대로 선택된다).
 * 가리킴 효과는 전부 (hover: hover) and (pointer: fine) 안에만 — 터치에서 탭한 뒤 꺾쇠가 밀린 채·색이 바뀐 채 남지 않게. */
html { -webkit-tap-highlight-color: transparent; }
a, button, summary, label, [role="button"], .choice, .filter-opt { touch-action: manipulation; }
.btn, button, summary, .filter-opt, .nav a, .choice, .tab, .step-tabs a, .reaction, .back-link { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* 누르는 순간 반응 — 면 버튼은 살짝 눌리고(0.97) 글자 버튼은 색이 바로 바뀐다 */
.btn:not(:disabled):not([aria-disabled="true"]):active { transform: scale(0.97); }
.btn-go:active, .btn-text:active, .link-secondary:active, .back-link:active, .nav a:active, .filter-opt:active { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

/* ── 내 기록(2026-10-01 대표님 지시서 · DESIGN-HISTORY §74): ‘내 경로’ + ‘내 계획’ = 한 화면의 두 탭(경험 기록 · 해볼 일) ──
 * 내부 탭은 글자 + 밑줄(알약 아님) · 주 메뉴(15px · 600)보다 한 단 크고 굵게(위계) · 고른 탭은 밑줄 + 굵기 + aria-selected(색만으로 가르지 않는다).
 * 탭 줄과 작성 버튼은 세로로 쌓여 좁은 화면에서도 겹치거나 넘치지 않는다. 움직임·장식 없음. */
.rec-head { padding-bottom: 4px; }
.rec-tabs { display: flex; gap: 24px; margin: 14px 0 0; border-bottom: 1px solid var(--line); }
.rec-tab { --u-inset: 0; --u-bottom: -1px; display: inline-flex; align-items: center; min-height: 48px; padding: 0 2px; color: var(--ink-2); text-decoration: none; font-size: var(--fs-h4); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.rec-tab[aria-selected="true"] { color: var(--ink); font-weight: 800; }
.rec-tab::after { height: 2px; background: var(--ink); }
.rec-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .rec-tab:hover { color: var(--ink); } }
.rec-action { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.rec-action .btn { min-width: 0; }
.rec-action.is-quiet, .rec-action .btn.is-empty { display: none; }
.rec-action:not(:has(> .btn:not([hidden]):not(.is-empty))) { display: none; }   /* 보일 버튼이 없으면 줄 자체가 없다(빈 띠 없음) */   /* 인라인 폼(고치기 · 덧붙이기 · 공유)이 열린 동안 — 검정은 그 폼의 저장 하나 */
.rec-panel { padding-top: 8px; }
.rec-panel > .empty, #view-list > .empty { border-top: 0; padding-top: 16px; }   /* 탭 줄의 선이 이미 있다 — 빈 상태의 윗선은 겹치지 않게 */
.rec-panel:focus { outline: none; }
.path-page .page-head { padding-bottom: 0; }
#panel-plans .plan-private { margin: 4px 0 0; }
/* 경험 기록으로 이어진 해볼 일 — 미시작 목록 아래 조용한 구획(굵은 윗선 · 기록 보기 하나) */
.plan-linked { margin-top: 28px; border-top: 2px solid var(--ink); padding-top: 14px; }
.plan-linked > h2 { font-size: var(--fs-h4); font-weight: 700; margin-bottom: 4px; }

/* 월만 적은 기록(2026-10-01): 도장 자리(날수 칸)째 없앤다 — 때는 ‘2026년 6월’ 한 줄 */
.timeline.is-log .tl-item.is-month { padding-left: 0; }
.timeline.is-log .tl-item.is-month::before, .timeline.is-log .tl-item.is-month::after { display: none; }


/* ═══ §81 차분한 개인 기록장 — 공통 규칙(2026-10-01 · 대표님 지시서 · §80의 기록하기 전용 규칙을 사이트 전체로) ═══════════════════
 * 날짜와 사용자가 쓴 글이 중심이고 선택·입력·탐색은 받쳐 준다. 같은 역할의 요소는 어느 화면에서나 같은 규칙을 따른다.
 *   선택지  = 고르지 않은 칸은 바탕과 같다(라디오 + 이름 · 칸 전체가 눌림) · 고른 칸만 옅은 초록 면 + 채운 라디오 + 굵은 글자 · 키보드 초점은 바깥 잉크 고리 하나
 *   설명    = 상자 없이 그 선택 묶음에 붙은 문장(제목 짙게 · 설명 보조 잉크) · 다른 걸 고르면 같은 자리의 글만 바뀐다
 *   입력칸  = 종이에서 한 톤 밝은 면 + 아래 가는 선 · 쓰는 중 흰 면 + 초록 선 · 오류는 빨간 선 · 가리킴 고리 없음 · 날짜·연월 칸도 같은 옷
 *   목록    = 흰·회색 상자 대신 구분선 행 · 묶음 머리(달 · D+ 구간)만 굵은 윗선 하나 · 한 화면의 글 왼쪽 선은 하나
 *   상자    = 콘텐츠를 가르는 데 꼭 필요한 곳(확인창 · ‘지금’ 초록 칸)에만 */
/* 질문 묶음의 호흡(기록하기) */
body[data-page="share"] #story-form > .guide-q { margin-bottom: 44px; }
body[data-page="share"] #story-form > .guide-q > .label { margin-bottom: 4px; letter-spacing: -0.01em; }
body[data-page="share"] #story-form > .guide-q > .guide-hint { margin-bottom: 12px; }
/* 선택지 — 어디서나 */
.choice { background: transparent; box-shadow: none; transition: background-color 120ms ease; }
.choices { margin-inline: -12px; }   /* 바탕이 없는 칸이라 라디오가 질문 글자와 같은 세로줄에 서게 — 고른 칸의 면은 그만큼 여백으로 나간다 */
.choices .choice { padding-inline: 12px; }
@media (hover: hover) and (pointer: fine) { .choice:hover { background: var(--band); box-shadow: none; } }
.choice:has(input:checked), .choice:has(input:checked):hover { background: var(--accent-soft); box-shadow: none; font-weight: 700; }
.choice:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
:is(.tl-cell, .pf-sheet, .pf-later, .plan-ticket, dialog) .choice:not(:has(input:checked)) { background: transparent; }
.class-q[data-invalid] .choice, .class-q[data-invalid] .choice:hover { box-shadow: none; }
/* 고른 것의 설명 = 붙은 문장 */
.act-desc { margin-top: 10px; padding: 0 2px; background: none; border-radius: 0; }
/* 입력칸 — 어디서나(선택 상자 · 날짜 · 연월 포함) */
.input, :is(.tl-cell, .pf-sheet, .pf-later, .plan-ticket, dialog) .input { background: color-mix(in srgb, var(--surface) 55%, var(--page)); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ink-2) 45%, transparent); }
@media (hover: hover) { .input:hover { box-shadow: inset 0 -1px 0 var(--ink-2); } }
.input:focus, .input:focus-visible { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
.input[aria-invalid="true"], .input[aria-invalid="true"]:focus { background: var(--danger-soft); box-shadow: inset 0 -2px 0 var(--danger); }
.input[type="date"] { min-height: 48px; }
dialog .input { background: var(--page); }
/* 접힘(자세히 적기 · 조건 더 보기) = 윗선 하나 */
.fold { border-bottom: 0; }
/* 원본 해볼 일 요약(기록하기) · 공유된 경로 안내(경험 상세) = 상자 없이 글 */
.plan-origin { padding: 0; background: none; border-radius: 0; margin-top: 14px; }
.path-note { padding: 0; background: none; border-radius: 0; }
/* 저장 직후 칸 — 월 기록 · 정확한 날짜 기록이 같은 왼쪽 선에서 시작한다(도장은 칸 오른쪽 위 · 월 기록은 도장 없음) */
body[data-page="share"] #done-entry .timeline.is-log .tl-item { padding-left: 0; padding-right: 0; }
body[data-page="share"] #done-entry .timeline.is-log .tl-item:has(> .tl-day) { padding-right: calc(var(--day-w) + 12px); }
body[data-page="share"] #done-entry .timeline.is-log .tl-item > .tl-day { left: auto; right: 0; top: 2px; }
body[data-page="share"] #done-entry .timeline.is-log .tl-item::before, body[data-page="share"] #done-entry .timeline.is-log .tl-item::after { display: none; }

/* ── 내 기록 › 경험 기록: 흰 상자 → 구분선 행 · 글 왼쪽 선 하나(월 기록도 같은 열) ── */
.timeline.is-log .tl-item.is-month { padding-left: calc(var(--rail) + 20px); }
.timeline.is-log .tl-cell { background: none; border-radius: 0; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.timeline.is-log .tl-item:has(> .tl-cell) { padding-bottom: 18px; }
.timeline.is-log .tl-item:not(.is-overlap):has(> .tl-cell):has(+ .tl-item:not(.is-overlap) > .tl-cell) { padding-bottom: 18px; }
.timeline.is-log .tl-item:last-of-type > .tl-cell, .timeline.is-log .tl-item:has(+ .tl-month) > .tl-cell, .timeline.is-log .tl-item:has(+ .tl-now) > .tl-cell { border-bottom: 0; }
.timeline.is-log .tl-item:has(> .tl-cell)::before { top: 7px; }
.timeline.is-log .tl-item:has(> .tl-cell) > .tl-day { top: 0; }
.timeline.is-log .tl-month { margin-top: 22px; padding-top: 10px; padding-bottom: 10px; }
.timeline.is-log > .tl-month:first-child { margin-top: 8px; }
.timeline.is-log .tl-item.is-discharge-unknown, .timeline.is-log .tl-item.is-discharge { padding-bottom: 14px; }
.timeline.is-log .tl-now { margin-top: 8px; }
/* 휴대폰에서 폼(고치기 · 공유 · 덧붙이기)이 열리면 그 칸이 전체 폭을 쓴다 — 도장은 그동안 비켜 둔다(상자 바탕이 없으니 겹치지 않게) */
@media (max-width: 599px) {
  .timeline.is-log .tl-item:has(.me-edit:not([hidden]), .tl-share-form, .tl-fill[data-fill-form]) > .tl-day { visibility: hidden; }
  .timeline.is-log .tl-item:has(.tl-fill[data-fill-form]) > .tl-cell { position: relative; z-index: 1; margin-left: calc(-1 * (var(--rail) + 20px)); }
}
.timeline.is-log .tl-cell .me-edit { padding-top: 12px; }
.timeline.is-log .tl-cell .tl-fill { margin-top: 10px; }

/* ── 내 기록 › 해볼 일: 회색 티켓 → 구분선 행 · 상태는 아이콘 + 글자(진행 중만 초록 글자) ── */
.plan-rows.is-tickets { gap: 0; margin-top: 4px; border-top: 1px solid var(--line); }
.plan-ticket, .plan-ticket.is-doing, .plan-ticket.is-done, .plan-ticket.is-linked { --tk-pad: 0px; background: none; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--line); }
.tk-main { padding: 16px 0 8px; }
.tk-detail { padding: 0 0 10px; }
.tk-foot { padding: 0 0 6px; }
.tk-row-status { padding: 0 0 12px; }
.plan-due .plan-rows.is-tickets { border-top: 0; }
.plan-due .plan-ticket:last-child { border-bottom: 0; }
/* 첫 사용 예시 = 구분선 행(제목 · ‘이 예시로 적기 ›’) */
.plan-examples.fx-days { gap: 0; border-top: 1px solid var(--line); }
.fx-cell, .plan-examples.fx-days > li.fx-cell { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; min-height: 56px; padding: 12px 0; background: none; border-radius: 0; border-bottom: 1px solid var(--line); }
.fx-cell .fx-top { display: none; }
.fx-cell .fx-t { flex: 1 1 14em; }
.fx-foot { margin: 0; flex: 0 0 auto; }
.fx-foot > span:first-child:not(.fx-go) { display: none; }   /* ‘날짜는 아직’ 장식은 행에서 걷는다 — 날짜가 없다는 건 비어 있는 행이 말한다 */
@media (hover: hover) { a.fx-cell:hover { box-shadow: none; background: none; } a.fx-cell:hover .fx-t { color: var(--accent); } }
a.fx-cell:focus-visible { box-shadow: none; background: none; outline: 2px solid var(--ink); outline-offset: 2px; }
a.fx-cell:active { background: none; }
@media (min-width: 640px) { .plan-examples.fx-days { grid-template-columns: 1fr; } .fx-cell { min-height: 56px; padding: 12px 0; } .fx-days.is-static .fx-cell { min-height: 0; } }
.fx-days.is-static .fx-cell { min-height: 0; }
/* 휴대폰: 내 기록의 날수 열을 한 단 좁혀 글 열을 넓힌다(92px → 76px · 도장 ‘7월/2’ · ‘D+/120’은 그대로 들어간다) */
@media (max-width: 599px) { .timeline.is-log { --day-w: 3rem; } .timeline.is-log .tl-item, .timeline.is-log .tl-item.is-month, .timeline.is-log .tl-item.is-overlap, .timeline.is-log .tl-month, .timeline.is-log .tl-now { padding-left: calc(var(--rail) + 12px); } .timeline.is-log .tl-item:has(.me-edit:not([hidden]), .tl-share-form, .tl-fill[data-fill-form]) > .tl-cell, .timeline.is-log .tl-item.is-overlap:has(.me-edit:not([hidden]), .tl-share-form) > .tl-cell { margin-left: calc(-1 * (var(--rail) + 12px)); } }

/* ── 계정 닉네임(2026-10-01) — 공개 방식 선택 · 그 자리의 닉네임 편집기 · 프로필 닉네임 줄. 새 모양 없이 기존 선택지·입력칸·조작 글자 규칙 그대로 ── */
.author-choice .choices { grid-template-columns: 1fr; }
.nick-editor-box:not([hidden]) { margin: 4px 0 8px; padding-top: 4px; }
.nick-editor .input { max-width: 20em; }
.nick-status { min-height: 1.5em; }
.nick-status[data-state="ok"] { color: var(--accent); font-weight: 600; }
.nick-status[data-state="taken"], .nick-status[data-state="invalid"], .nick-status[data-state="reserved"], .nick-status[data-state="unavailable"] { color: var(--danger); }
.nick-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 4px; }
.nick-current { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.01em; }

/* ── 2026-10-01(12) 경험 아카이브 개선(§82): 날짜 숫자보다 경험이 먼저 · 보조 정보는 한 줄 ── */
/* 공개 경험 카드 = 제목 → 본문 두세 줄 → 보조 줄(활동 · 상태 · 때). 큰 D+ 도장 없음(때는 ‘전역 후 30일 이내’처럼 한 번에 읽히는 말) */
.exp-item > .item-link, .recent-list > .item > .item-link { display: block; }
.exp-item .item-title, .recent-list .item-title { margin-bottom: 6px; }
.exp-item .item-foot, .recent-list .item-foot, .share-preview-card .item-foot { display: block; margin: 10px 0 0; font-size: var(--fs-meta); line-height: 1.5; color: var(--ink-2); }
.exp-item .item-foot { padding-right: 40px; }
.share-preview-card .item-title + .item-body { margin-top: 4px; }
/* 홈 세 단: 도장 자리 띄움을 걷고, 보조 줄은 단의 바닥에 맞춘다(글 길이가 달라도 같은 줄에서 끝난다) */
.home-recent .cal-week > .item .item-link:not(:has(> .dstamp))::before { content: none; display: none; }
.cal-week .item-foot { margin-top: auto; padding-top: 14px; }
/* 경험 목록의 시기 묶음 = 보조 머리(굵은 큰 숫자 대신 작은 글자 · 묶음 사이 얇은 선) */
.exp-group + .exp-group { margin-top: 0; border-top: 1px solid var(--line); }
.exp-group-h { border-top: 0; padding: 22px 0 0; }
.list.is-grouped > .exp-group:first-child { border-top: 1px solid var(--ink); }
.list.is-grouped > .exp-group:first-child > .exp-group-h { padding-top: 16px; }
.exp-group-w { font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0; color: var(--ink-2); }
.exp-group-n { font-weight: 500; }
.exp-group > .list > .item:first-child > .item-link { padding-top: 10px; }
/* 넓은 화면: 필터 열과 목록 사이를 좁힌다(내용과 떨어져 보이지 않게) */
@media (min-width: 1024px) { .browse-grid { grid-template-columns: 184px minmax(0, 1fr); column-gap: 40px; } }
/* 홈 마지막 구획 — 지나온 일(경험 기록하기 · 먼저 · 크게) / 앞으로의 일(해볼 일 적기) */
.turn-pair { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.turn-pair > li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 0 12px; border-bottom: 1px solid var(--line); }
.turn-k { font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2); }
.turn-pair .btn-go { margin-left: -2px; }
.turn-next .btn-go { color: var(--ink); font-weight: 700; }
@media (min-width: 768px) {
  .turn-pair { grid-template-columns: repeat(2, minmax(0, 22rem)); column-gap: 40px; border-top: 0; margin-top: 28px; }
  .turn-pair > li { border-bottom: 0; border-top: 1px solid var(--line); }
}
/* 홈 첫 화면: 휴대폰에서 제목·여백을 한 단 줄여 아래 ‘최근 공개된 경험’이 첫 화면 끝에 걸리게 */
@media (max-width: 599px) {
  .hero-cal { padding-top: 28px; }
  .hero-cal .h-home { font-size: clamp(2.125rem, 1.6rem + 2.6vw, 2.5rem); margin-bottom: 14px; }
  .hero-cal .cta { margin-top: 20px; }
  .home-recent { padding-top: 32px; }
}
/* 내 기록: 상태는 진한 글자, 공개 여부는 줄 오른쪽 끝의 작은 표식(자물쇠 · 초록) — 같은 모양으로 섞이지 않게 */
.timeline .tl-meta .tl-status { color: var(--ink); font-weight: 600; }
.tl-meta .tl-share { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.tl-share-ic { flex: none; }
.tl-share.is-on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* 해볼 일 예시: 주 행동(‘해볼 일 적기’)보다 가볍게 — 제목은 보통 굵기, ‘이 예시로 적기’는 흐린 글자 */
.fx-cell .fx-t { font-weight: 500; }
.fx-cell .fx-go { font-weight: 600; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { a.fx-cell:hover .fx-go { color: var(--ink); } }