/* 억울하오: 알파 스타일시트
   톤 정본: plans/minwon-design-tone-2026-08-26.md
   종이 바탕 + 먹빛 남색 + 인주색 악센트. 마스코트 없음. */

@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

:root {
  --paper:   #F7F4EE;
  --paper-2: #EFEAE1;
  --card:    #FCFAF6;
  --ink:     #1B2A41;
  --ink-2:   #2E4360;
  --text:    #22262B;
  --muted:   #5C6470;
  --seal:    #B7362B;
  --line:    #D9D2C6;
  --line-2:  #BFB6A6;

  --sans: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --serif: "Nanum Myeongjo", serif;

  --wrap: 62rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.78;
  word-break: keep-all;
  overflow-wrap: break-word;
}
h1, h2, h3 { font-family: var(--serif); color: var(--ink); line-height: 1.4; margin: 0 0 .6em; font-weight: 700; }
h1 { font-size: 2.6rem; letter-spacing: -.01em; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.28rem; }
p  { margin: 0 0 1em; }
a  { color: var(--ink-2); text-underline-offset: 3px; }
small { font-size: .92rem; color: var(--muted); }
:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.tnum { font-variant-numeric: tabular-nums; }

/* 알파 띠: 공식 사이트의 전자정부 띠 자리를 알파 고지로 쓴다 */
.alphabar {
  background: var(--ink);
  color: #E9E3D6;
  font-size: .82rem;
  letter-spacing: .01em;
  padding: .45rem 0;
}
.alphabar strong { color: #fff; font-weight: 600; }

header.site { border-bottom: 1px solid var(--line); background: var(--card); }
header.site .wrap { display: flex; align-items: baseline; gap: 1rem; padding-top: 1.1rem; padding-bottom: 1.1rem; }
.brand { font-family: var(--serif); font-size: 1.4rem; font-weight: 800; color: var(--ink); text-decoration: none; }
.brand-sub { font-size: .84rem; color: var(--muted); border-left: 1px solid var(--line-2); padding-left: 1rem; }
header.site nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; font-size: .92rem; }
header.site nav a { color: var(--muted); text-decoration: none; white-space: nowrap; }
header.site nav a:hover { color: var(--ink); }
/* 헤더의 계정 자리. nav.js 가 로그인 상태에 따라 채운다.
   비어 있을 때 간격이 남지 않게 자기도 flex 로 둔다 */
header.site nav .acct { display: contents; }
header.site nav .acct a:last-child { color: var(--ink); font-weight: 600; }

/* 버튼: 각진 모서리, 그림자 없음 */
.btn {
  display: inline-block;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  padding: .95rem 1.8rem;
  font-family: var(--sans);
  font-size: 1.08rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--paper-2); color: var(--ink); }
.btn.seal { border-color: var(--seal); background: transparent; color: var(--seal); }
.btn.seal:hover { background: var(--seal); color: #fff; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

/* 카드: 그림자 대신 테두리. 서류철에 끼운 문서 */
.card { background: var(--card); border: 1px solid var(--line); padding: 1.7rem 1.8rem; }
.card > :last-child { margin-bottom: 0; }
.card + .card { margin-top: 1rem; }
/* .grid 안에서는 gap 이 간격을 맡는다. margin 을 더하면 같은 행의 둘째 카드부터 아래로 내려앉는다 */
.grid > .card + .card, .grid .card + .card { margin-top: 0; }

.rule { border: 0; border-top: 1px solid var(--line); margin: 3.2rem 0; }

section.block { padding: 3.4rem 0; }
section.block.tint { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lede { font-size: 1.22rem; color: var(--muted); max-width: 42rem; line-height: 1.7; }

.hero { padding: 4.6rem 0 3.6rem; }
.hero h1 { max-width: 20ch; }
.hero .lede { margin-bottom: 1.9rem; }
.hero .actions { display: flex; gap: .7rem; flex-wrap: wrap; }

.grid { display: grid; gap: .9rem; }
@media (min-width: 700px) { .grid.c2 { grid-template-columns: 1fr 1fr; } .grid.c3 { grid-template-columns: repeat(3, 1fr); } }

/* 기한: 크기로만 강조한다. 빨간색을 쓰지 않는다 */
.deadline { font-family: var(--serif); font-size: 2.6rem; color: var(--ink); line-height: 1.2; }
.deadline .unit { font-size: 1rem; font-family: var(--sans); color: var(--muted); }
.provisional { display: inline-block; border: 1px solid var(--line-2); color: var(--muted); font-size: .76rem; padding: .1rem .5rem; margin-left: .5rem; vertical-align: middle; }

/* 도장: 인주색은 여기와 CTA 테두리에만 */
.seal-mark {
  display: inline-block; border: 2px solid var(--seal); color: var(--seal);
  font-family: var(--serif); font-weight: 700; font-size: .8rem;
  padding: .25rem .5rem; letter-spacing: .12em;
}

table.doc { width: 100%; border-collapse: collapse; font-size: 1.02rem; }
table.doc th, table.doc td { border: 1px solid var(--line); padding: .85rem 1rem; text-align: left; vertical-align: top; }
table.doc th { background: var(--paper-2); font-weight: 600; color: var(--ink); white-space: nowrap; }

/* 위저드 */
.steps { font-size: 1rem; color: var(--muted); display: flex; gap: .8rem; align-items: center; flex: 1; min-width: 10rem; }
.steps .num { color: var(--ink); font-weight: 600; white-space: nowrap; }
.steps .track { flex: 1; height: 4px; background: var(--line); min-width: 4rem; }
.steps .track > i { display: block; height: 100%; background: var(--ink); transition: width .25s ease; }
.qbar { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.qbar .wrap { display: flex; align-items: center; gap: 1.2rem; padding: .8rem 1.25rem; flex-wrap: wrap; }
.qbar .clock { margin-left: auto; text-align: right; }
.qbar .clock .n { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); }

fieldset { border: 0; padding: 0; margin: 0 0 1.6rem; }
legend { font-family: var(--serif); font-size: 1.62rem; color: var(--ink); font-weight: 700; padding: 0; margin-bottom: .4rem; line-height: 1.35; }
.hint { font-size: 1rem; color: var(--muted); margin-bottom: 1.3rem; }

.opt { display: block; border: 1px solid var(--line); background: var(--card); padding: 1.15rem 1.3rem; margin-bottom: .7rem; cursor: pointer; transition: border-color .18s ease, background-color .18s ease; }
.opt:hover { border-color: var(--line-2); background: var(--paper-2); }
.opt input { margin-right: .7rem; accent-color: var(--ink); width: 1.05rem; height: 1.05rem; vertical-align: -1px; }
.opt .t { font-weight: 600; color: var(--ink); font-size: 1.1rem; }
.opt .d { display: block; font-size: .97rem; color: var(--muted); margin-top: .25rem; padding-left: 1.6rem; }
.opt.unknown { border-style: dashed; }

input[type=text], input[type=date], input[type=number], select, textarea {
  font-family: var(--sans); font-size: 1rem; color: var(--text);
  background: var(--card); border: 1px solid var(--line-2);
  padding: .7rem .8rem; width: 100%; max-width: 26rem;
}
label.field { display: block; margin-bottom: .9rem; }
label.field > span { display: block; font-size: 1rem; color: var(--muted); margin-bottom: .4rem; }

.navrow { display: flex; gap: .6rem; align-items: center; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.navrow .spacer { flex: 1; }

.notice { border-left: 3px solid var(--seal); background: var(--card); padding: 1rem 1.2rem; margin: 1.2rem 0; }
.notice h3 { margin-bottom: .3rem; }
.quiet { border-left-color: var(--line-2); }

ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: .35rem 0 .35rem 1.1rem; position: relative; }
ul.plain li::before { content: "·"; position: absolute; left: .2rem; color: var(--line-2); }

footer.site { border-top: 1px solid var(--line); margin-top: 4rem; padding: 2.2rem 0 3rem; font-size: .88rem; color: var(--muted); background: var(--paper-2); }
footer.site .wrap > div + div { margin-top: .5rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (max-width: 640px) {
  body { font-size: 17px; }
  h1 { font-size: 2.05rem; }
  h2 { font-size: 1.55rem; }
  .lede { font-size: 1.12rem; }
  legend { font-size: 1.42rem; }
  .hero { padding: 3rem 0 2.4rem; }
}

/* ---------- 히어로 슬라이드 ---------- */
/* 참고: wavelaw.co.kr 의 풀블리드 크로스페이드. 이미지 위에 짙은 오버레이를 덮고
   가운데에 흰 글자를 얹는다. 사진 5장은 통지 → 정지 → 창구 → 검토 → 접수 순서다. */

header.site.over {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  background: transparent; border-bottom: 1px solid rgba(255,255,255,.14);
}
header.site.over .brand { color: #fff; }
header.site.over .brand-sub { color: rgba(255,255,255,.72); border-left-color: rgba(255,255,255,.3); }
header.site.over nav a { color: rgba(255,255,255,.82); }
header.site.over nav a:hover { color: #fff; }

.hero-stage {
  position: relative;
  /* topstack(알파 띠 + 헤더)이 absolute 라 흐름에서 빠져 있다. 그 높이를 hero.js 가
     --topstack-h 로 재서 넣는다. JS 가 없을 때 쓰는 기본값이 6rem 이다. */
  padding-top: calc(var(--topstack-h, 6rem) + 1.6rem);
  min-height: 40rem; height: auto; max-height: none;
  padding-bottom: 4.5rem;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  background: #0E1520;
}
.hero-stage .slides { position: absolute; inset: 0; }
.hero-stage .slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.04);
  transition: opacity 1.1s ease-in-out, transform 6s linear;
  will-change: opacity, transform;
}
.hero-stage .slide.on { opacity: 1; transform: scale(1); }
/* 오버레이: 아래로 갈수록 짙게. 글자가 앉는 가운데를 확실히 눌러 준다 */
.hero-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,16,24,.50) 0%, rgba(10,16,24,.30) 42%, rgba(10,16,24,.58) 100%),
    radial-gradient(120% 80% at 50% 45%, rgba(10,16,24,0) 0%, rgba(10,16,24,.40) 100%);
}
.hero-copy {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem;
  color: #fff; text-align: center;
}
.hero-copy .eyebrow {
  font-family: var(--serif); font-size: 1rem; letter-spacing: .04em;
  color: rgba(255,255,255,.94); text-shadow: 0 1px 10px rgba(8,12,18,.6); margin: 0 0 1rem;
  padding-bottom: .9rem; position: relative;
  /* 자리를 미리 잡아 두면(hero.js fitEyebrow) 남는 높이가 생긴다. 그 여백이 글과 밑줄
     사이로 들어가면 안 된다. 글을 아래에 붙이고 남는 만큼 위를 비운다 */
  display: inline-flex; align-items: flex-end; justify-content: center;
  transition: opacity .35s ease;
}
.hero-copy .eyebrow::after {
  content: ""; position: absolute; left: 20%; right: 20%; bottom: 0;
  border-bottom: 1px solid rgba(255,255,255,.28);
}
.hero-copy h1 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: .75rem; text-shadow: 0 2px 18px rgba(8,12,18,.62), 0 1px 3px rgba(8,12,18,.5); }
.hero-copy .lede { color: rgba(255,255,255,.92); text-shadow: 0 1px 10px rgba(8,12,18,.6); margin: 0 auto; max-width: 40rem; }
/* 가로가 모자라면 쉼표 뒤에서 끊는다. 조각을 inline-block 으로 두면 그 안에서는 안 접힌다 */
.hero-copy .lede span { display: inline-block; }
.hero-copy .actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }

/* ---------- 히어로 위의 네 문 ----------
   톤 정본 §3.4: 진입점은 선형 SVG 아이콘 그리드. §3.2: 인주색은 도장·확인 표시·
   주요 CTA 테두리에만 좁게. 그래서 카드마다 빨간 글씨를 박지 않고 손이 닿을 때만 쓴다.
   사진 위에 얹되 카드 안은 종이색으로 되돌린다. 흰 글씨를 한 겹 더 쌓으면 배경이 비쳐
   사례 줄이 흐려진다. */
.gate {
  position: relative; z-index: 2;
  width: 100%; max-width: 74rem; margin: 2rem auto 0; padding: 0 1.25rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem;
}
.gatecard {
  position: relative;
  display: flex; flex-direction: column;
  text-decoration: none; text-align: left; color: var(--text);
  background: rgba(252, 250, 246, .94);
  border: 1px solid rgba(255, 255, 255, .5);
  border-top: 3px solid var(--ink);
  box-shadow: 0 3px 22px rgba(8, 12, 18, .22);
  padding: 1.2rem 1.15rem 1.1rem;
  -webkit-backdrop-filter: blur(3px) saturate(1.04);
  backdrop-filter: blur(3px) saturate(1.04);
  transition: background .18s ease, transform .18s ease,
              box-shadow .18s ease, border-top-color .18s ease;
}
.gatecard .gi {
  width: 24px; height: 24px; display: block; margin-bottom: .6rem;
  fill: none; stroke: var(--ink-2); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .18s ease;
}
.gatecard b {
  display: block; font-family: var(--serif); font-weight: 700;
  color: var(--ink); font-size: 1.18rem; line-height: 1.3;
  letter-spacing: -.01em; margin-bottom: .6rem;
}
.gatecard ul {
  list-style: none; margin: 0 0 .95rem; padding: 0;
  border-top: 1px solid var(--line); padding-top: .6rem;
}
.gatecard li {
  font-size: .88rem; line-height: 1.72; color: var(--muted);
  padding-left: .7rem; position: relative;
}
.gatecard li::before {
  content: ""; position: absolute; left: 0; top: .82em;
  width: 3px; height: 3px; background: var(--line-2);
}
.gatecard .go {
  margin-top: auto; align-self: flex-start;
  font-size: .9rem; font-weight: 600; color: var(--ink-2);
  padding-bottom: .15rem; border-bottom: 1px solid var(--line-2);
  transition: color .18s ease, border-color .18s ease;
}
.gatecard .go::after { content: " \2192"; }
.gatecard:hover, .gatecard:focus-visible {
  background: rgba(252, 250, 246, 1);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(8, 12, 18, .3);
  border-top-color: var(--seal);
}
.gatecard:hover .gi, .gatecard:focus-visible .gi { stroke: var(--seal); }
.gatecard:hover .go, .gatecard:focus-visible .go {
  color: var(--seal); border-bottom-color: var(--seal);
}

/* 문을 잘못 고른 사람이 다른 문으로 건너가는 한 줄 */
.doorhop {
  margin: 1.1rem 0 0; padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: .92rem; color: var(--muted);
}
.doorhop a { color: var(--ink-2); }


/* ---------- 슬라이드 표시 ----------
   지금 몇 번째 장인지와 함께, 채워지는 막대로 다음 장까지 남은 시간을 보여 준다.
   채움 시간 4.2초는 hero.js 의 HOLD 와 같아야 한다. 한쪽만 고치면 막대가 먼저 차거나
   덜 찬 채로 장이 넘어간다. */
.hero-nav {
  position: absolute; left: 0; right: 0; bottom: 1.9rem; z-index: 3;
  display: flex; justify-content: center; gap: .55rem;
  padding: 0 1.25rem;
}
.hero-nav button {
  position: relative; width: 2.8rem; height: 3px; padding: 0;
  border: 0; border-radius: 0; cursor: pointer;
  background: rgba(255, 255, 255, .34);
  overflow: hidden;
  -webkit-appearance: none; appearance: none;
}
.hero-nav button::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0;
  width: 0; background: #fff;
}
.hero-nav button[aria-selected="true"]::after { width: 100%; transition: width 4.2s linear; }
.hero-nav button:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }

/* 동작 줄이기 설정과 무관하게 히어로는 그대로 돈다 (사용자 결정 2026-09-15).
   위쪽 전역 규칙이 `* { transition: none !important }` 라 여기서 다시 살려야 먹는다.
   전역 규칙은 나머지 화면에 그대로 둔다 */
@media (prefers-reduced-motion: reduce) {
  .hero-stage .slide {
    transition: opacity 1.1s ease-in-out, transform 6s linear !important;
  }
  .hero-nav button[aria-selected="true"]::after { transition: width 4.2s linear !important; }
}

@media (max-width: 1000px) {
  .gate { grid-template-columns: repeat(2, 1fr); max-width: 44rem; }
}
@media (max-width: 640px) {
  header.site .wrap { flex-wrap: wrap; row-gap: .5rem; padding-top: .85rem; padding-bottom: .85rem; }
  .brand-sub { display: none; }
  header.site nav { margin-left: 0; width: 100%; gap: .5rem 1rem; font-size: .88rem; }
  .hero-stage { height: auto; min-height: 30rem; max-height: none;
                padding: calc(var(--topstack-h, 8rem) + 1.1rem) 0 3.2rem; }
  .hero-copy h1 { font-size: 1.72rem; margin-bottom: .55rem; }
  .hero-copy .eyebrow { font-size: .92rem; margin-bottom: .75rem; padding-bottom: .7rem; }
  .hero-copy .lede { font-size: .97rem; }
  /* 모바일은 세로로 쌓이므로 네 장이 한 화면에 들어오게 눕힌다.
     아이콘을 제목 옆으로 보내고 사례는 한 줄로 흘린다 */
  .gate { grid-template-columns: 1fr; gap: .6rem; margin-top: 1.6rem; max-width: none; }
  /* flex 안에서는 float 이 안 먹는다. 모바일은 등높이가 필요 없으니 block 으로 */
  .gatecard { display: block; padding: .9rem 1rem .85rem; border-top-width: 2px; }
  .gatecard .gi { float: left; width: 21px; height: 21px; margin: .12rem .5rem 0 0; }
  .gatecard b { font-size: 1.1rem; margin-bottom: .45rem; }
  .gatecard ul {
    clear: both; margin: 0 0 .55rem; padding-top: .5rem;
    display: flex; flex-wrap: wrap; column-gap: .1rem;
  }
  .gatecard li { font-size: .85rem; line-height: 1.6; padding-left: 0; }
  .gatecard li::before { display: none; }
  .gatecard li:not(:last-child)::after { content: " · "; color: var(--line-2); }
  .gatecard .go { font-size: .85rem; }
  .hero-nav { bottom: 1.4rem; }
  .hero-nav button { width: 2.1rem; }
}

/* 알파 띠 + 헤더를 한 덩어리로 히어로 위에 얹는다 */
.topstack { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
.topstack .alphabar { background: rgba(10,16,24,.86); }
.topstack header.site.over { position: static; }

/* ---------- 약관·정책 문서 ---------- */
main.policy { max-width: 46rem; padding-top: 2.6rem; }
main.policy h2 { font-size: 1.26rem; margin-top: 2.6rem; }
main.policy ol { padding-left: 1.25rem; margin: 0 0 1em; }
main.policy ol li { margin-bottom: .45rem; }
main.policy table.doc { margin-bottom: 1.2rem; }
main.policy .lede { margin-bottom: .3rem; }

footer.site nav.policy-links { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: .5rem; }
footer.site nav.policy-links a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 1px; }
footer.site nav.policy-links a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* 좁은 화면에서 2열 표는 제목 칸이 눌려 읽기 어렵다. 위아래로 쌓는다 */
@media (max-width: 640px) {
  table.doc.stack, table.doc.stack tbody, table.doc.stack tr, table.doc.stack th, table.doc.stack td { display: block; width: 100%; }
  table.doc.stack tr { border: 1px solid var(--line); margin-bottom: .7rem; }
  table.doc.stack th { border: 0; border-bottom: 1px solid var(--line); background: var(--paper-2); white-space: normal; }
  table.doc.stack td { border: 0; }
}

/* 열이 많은 표는 쌓지 않고 가로로 민다 */
.tscroll { overflow-x: auto; }
.tscroll table.doc { min-width: 34rem; }

/* ---------- 기한 목록: 카드 테두리를 걷고 숫자만 남긴다 ---------- */
.deadlines { margin: 1.6rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.deadlines > div { display: flex; align-items: baseline; gap: 1.1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.deadlines dt { margin: 0; flex: 0 0 auto; }
.deadlines dt .n { font-family: var(--serif); font-size: 2.5rem; color: var(--ink); line-height: 1; }
.deadlines dt .u { font-size: .95rem; color: var(--muted); margin-left: .15rem; }
.deadlines dd { margin: 0; }
.deadlines dd b { display: block; color: var(--ink); font-size: 1.08rem; }
.deadlines dd small { display: block; }

/* ---------- 리포트 발췌: 종이 한 장을 그대로 얹는다 ---------- */
.paper { background: var(--card); border: 1px solid var(--line-2); padding: 1.6rem 1.7rem; margin-top: 1.6rem; }
.paper-head { display: flex; align-items: center; gap: .8rem; border-bottom: 1px solid var(--line); padding-bottom: .9rem; margin-bottom: 1.2rem; }
.paper h3 { margin: 1.6rem 0 .4rem; font-size: 1.12rem; }
.paper h3:first-of-type { margin-top: 0; }
.paper .deadline { font-size: 2.2rem; margin-bottom: .3rem; }
.paper p { font-size: .98rem; }
.paper-more { margin-bottom: 0; padding-top: .9rem; border-top: 1px solid var(--line); }
/* 가림 처리: 유료 구간이라 글자를 덮는다. 선택·복사도 막는다 */
.mask { background: var(--ink); color: transparent; user-select: none; border-radius: 0; }

/* ---------- 절차 사슬: 번호가 붙은 세로 리스트 ---------- */
ol.chain { list-style: none; counter-reset: c; margin: 1.6rem 0 0; padding: 0; }
ol.chain li { counter-increment: c; position: relative; padding: .85rem 0 .85rem 2.6rem; border-bottom: 1px solid var(--line); }
ol.chain li::before { content: counter(c); position: absolute; left: 0; top: .9rem; width: 1.8rem; height: 1.8rem; line-height: 1.8rem; text-align: center; font-family: var(--serif); color: var(--ink); border: 1px solid var(--line-2); }
ol.chain li b { color: var(--ink); }
ol.chain li span { display: block; color: var(--muted); font-size: .98rem; }

/* ---------- 무료 창구 링크 목록 ---------- */
ul.links { list-style: none; margin: 1.4rem 0 0; padding: 0; border-top: 1px solid var(--line); }
ul.links li { padding: .95rem 0; border-bottom: 1px solid var(--line); }
ul.links li a { color: var(--ink); font-weight: 600; font-size: 1.08rem; }
ul.links li span { display: block; color: var(--muted); font-size: .98rem; }

/* ---------- 섹션 끝 CTA ---------- */
.cta-row { margin-top: 1.8rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.closer { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1.6rem; }
.closer p { margin-bottom: .9rem; }

@media (max-width: 640px) {
  /* 섹션마다 붙는 상하 여백이 모바일에서 넷이 쌓이면 400px 을 넘는다 */
  section.block { padding: 2.4rem 0; }
  .deadlines dt { flex: 0 0 4.2rem; }
  .paper { padding: 1.3rem 1.2rem; }
}

/* ---------- 진단 결과: 카드 중첩을 없애고 섹션 흐름으로 ---------- */
.rsec { border-top: 1px solid var(--line); padding-top: 1.3rem; margin-top: 1.6rem; }
.rsec h3 { margin-bottom: .6rem; }
.rsec .deadline { margin-bottom: .3rem; }
.rsec ol.chain { margin-top: .6rem; }
.rsec ol.chain li:last-child { border-bottom: 0; }
.rnext { background: var(--card); border: 1px solid var(--line-2); padding: 1.5rem 1.6rem; margin-top: 2rem; }
.rnext h3 { margin-bottom: .5rem; }
.rnext p:last-child { margin-bottom: 0; }

/* 열이 많은 표를 좁은 화면에서 가로로 밀면 가장 중요한 마지막 열이 잘린다.
   행마다 제목을 달아 위아래로 쌓는다. data-l 값이 각 칸의 이름이 된다. */
@media (max-width: 640px) {
  .tscroll { overflow-x: visible; }
  .tscroll table.doc { min-width: 0; }
  .tscroll table.doc thead { display: none; }
  .tscroll table.doc, .tscroll table.doc tbody, .tscroll table.doc tr { display: block; width: 100%; }
  .tscroll table.doc tr { border: 1px solid var(--line); margin-bottom: .8rem; }
  .tscroll table.doc th[scope="row"], .tscroll table.doc tbody tr > th:first-child {
    display: block; border: 0; border-bottom: 1px solid var(--line); background: var(--paper-2);
    font-size: 1.08rem; white-space: normal;
  }
  /* flex 로 두면 칸 안에 요소가 둘 이상일 때 각각이 항목이 되어 흩어진다. 절대 배치로 이름표만 띄운다 */
  .tscroll table.doc td { display: block; position: relative; border: 0;
    border-bottom: 1px solid var(--line); padding: .6rem 1rem .6rem 6.4rem; }
  .tscroll table.doc tr td:last-child { border-bottom: 0; }
  .tscroll table.doc td::before {
    content: attr(data-l); position: absolute; left: 1rem; top: .6rem; width: 5rem;
    color: var(--muted); font-size: .92rem;
  }
}

/* ---------- 위저드: 답하는 자리에 집중시킨다 ---------- */
/* 날짜 셋 중 아는 것만 채우면 되는데 빈 칸 셋이 나란히 서면 다 채워야 할 것처럼 보인다.
   첫 칸을 주된 질문으로 세우고 나머지는 보조로 낮춘다. */
.dates-main { border-left: 3px solid var(--ink); padding-left: 1rem; margin-bottom: 1.4rem; }
.dates-main > span { color: var(--ink) !important; font-weight: 600; }
.dates-sub { border-top: 1px solid var(--line); padding-top: 1.1rem; }
.dates-sub > p { margin-bottom: .8rem; }

/* 다음 버튼이 콘텐츠 길이에 따라 화면 아무 데나 앉는다. 아래에 붙여 둔다 */
@media (max-width: 640px) {
  .navrow { position: sticky; bottom: 0; background: var(--paper); margin-left: -1.25rem;
            margin-right: -1.25rem; padding: 1rem 1.25rem; border-top: 1px solid var(--line-2); }
  /* 위저드에서는 알파 띠가 두 줄을 먹는다. 글자를 줄여 한 줄에 가깝게 */
  .qbar + main .alphabar { font-size: .72rem; }
}

/* 마감일 입력은 그 라디오를 골랐을 때만 연다 */
.duewrap { margin: -.2rem 0 .7rem 1.9rem; }

/* 진단 리포트 값 */
.price { margin: 1rem 0 .4rem; }
.price .n { font-family: var(--serif); font-size: 2.2rem; color: var(--ink); }
.price .u { font-size: 1rem; color: var(--muted); margin-left: .3rem; }
.free-note { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }

/* ---------- 진단 리포트: 화면이 아니라 문서로 읽히게 한다 ---------- */
main.report {
  max-width: 42rem;              /* 한 줄이 길면 눈이 다음 줄을 못 찾는다 */
  padding-top: 2.4rem;
  padding-bottom: 3.5rem;
  counter-reset: sec;
}

.report-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--ink); padding-bottom: 1.4rem; }
.report-head > div { flex: 1; min-width: 15rem; }
.report-head h1 { font-size: 2.2rem; margin-bottom: .5rem; }
.report-head .meta { margin: 0; font-size: .92rem; color: var(--muted); }
/* 구분자를 글자로 넣으면 줄바꿈 자리에서 점이 혼자 남는다 */
.report-head .meta span + span::before { content: "·"; margin: 0 .5rem; color: var(--line-2); }

/* 섹션 제목: 앞 문단과 떨어뜨리고 번호를 왼쪽에 세운다 */
main.report h2 {
  font-size: 1.42rem;
  margin: 2.8rem 0 1rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  position: relative;
  padding-left: 2.4rem;
}
main.report h2::before {
  counter-increment: sec;
  content: counter(sec);
  position: absolute; left: 0; top: 1.3rem;
  font-size: .95rem; color: var(--seal);
  font-family: var(--sans); font-weight: 600;
  line-height: 2;
}
main.report h3 { font-size: 1.1rem; margin: 1.7rem 0 .5rem; }
main.report h3:first-child { margin-top: 0; }

/* 문단 사이가 줄간격과 비슷하면 덩어리가 안 잡힌다 */
main.report p { margin: 0 0 1.2em; line-height: 1.85; }
main.report p:last-child { margin-bottom: 0; }
main.report ul.plain li { padding: .45rem 0 .45rem 1.1rem; }

/* 기한 카드: 숫자를 세우고 설명을 아래로 */
main.report .card { padding: 1.5rem 1.6rem; }
main.report .card .deadline { font-size: 3rem; line-height: 1.05; margin-bottom: .8rem; }
main.report .card p { font-size: .98rem; }

/* 표: 좁은 화면에서만 쌓는다. 이 규칙이 미디어쿼리 밖에 있으면 데스크톱 표가 깨진다 */
@media (max-width: 640px) {
  main.report .tscroll table.doc tbody tr > th:first-child {
    background: transparent; border-bottom: 2px solid var(--ink);
    font-family: var(--serif); font-size: 1.12rem; padding-bottom: .5rem;
  }
  main.report .tscroll table.doc tr { border: 0; border-bottom: 1px solid var(--line);
    margin-bottom: 0; padding: 1.1rem 0; }
  /* 이름표가 붙은 칸만 들여쓴다. 2열 표(7절)에는 data-l 이 없어 그 자리가 빈 채로 밀린다 */
  main.report .tscroll table.doc td { padding: .4rem 0; border: 0; }
  main.report .tscroll table.doc td[data-l] { padding-left: 6rem; }
  main.report .tscroll table.doc td[data-l]::before { left: 0; top: .4rem; }
  main.report .tscroll table.doc tr:last-child { border-bottom: 0; }
}

@media (min-width: 641px) {
  /* 절차 이름 열이 좁으면 글자가 넘치고, 기한 열이 좁으면 한 값이 세 줄로 접힌다 */
  main.report table.doc th:first-child { width: 6rem; white-space: nowrap; }
  main.report table.doc td:nth-child(2) { width: 8rem; }
  main.report table.doc td:nth-child(3) { width: 7.5rem; }
  main.report table.doc thead th { background: var(--paper-2); }
}
@media (max-width: 640px) {
  main.report { padding-top: 1.8rem; }
  .report-head h1 { font-size: 1.9rem; }
  main.report h2 { font-size: 1.3rem; margin-top: 2.4rem; }
}

/* 메타 항목이 단어 단위로 쪼개져 "26일" 만 다음 줄로 넘어가고 있었다 */
.report-head .meta span { display: inline-block; white-space: nowrap; }
/* 절차 이름이 표 기본 padding 때문에 들여써져 있었다 */
@media (max-width: 640px) {
  main.report .tscroll table.doc tbody tr > th:first-child { padding-left: 0; padding-right: 0; }
}

/* 5절 다툴 지점: 카드로 묶지 않고 문서 흐름으로 둔다 */
main.report .points { border-left: 3px solid var(--seal); padding-left: 1.3rem; margin-top: 1.2rem; }
main.report .points h3 { margin-top: 1.6rem; }
main.report .points h3:first-child { margin-top: 0; }

/* 확인 필요 목록: 점을 죽이고 항목을 띄운다 */
main.report ul.plain { margin-top: 1rem; }
main.report ul.plain li { padding: .55rem 0 .55rem 1.2rem; border-bottom: 1px solid var(--line); }
main.report ul.plain li:last-child { border-bottom: 0; }
main.report ul.plain li::before { content: ""; position: absolute; left: .25rem; top: 1.45rem;
  width: 4px; height: 4px; background: var(--line-2); }

/* 결과 화면의 다음 단계 사슬: 진단이 끝이 아니라는 것을 보여 준다 */
.next-chain { margin: 1.2rem 0 1.4rem; }
.next-chain li { padding-top: .6rem; padding-bottom: .6rem; }
.next-chain li:last-child { border-bottom: 0; }
.price-note { display: inline-block; margin-left: .8rem; font-size: .92rem; color: var(--seal);
  border: 1px solid var(--seal); padding: .15rem .6rem; vertical-align: middle; }

/* ---------- 계정·사건·관리자 화면 ---------- */
main.account { max-width: 34rem; padding-top: 2.4rem; padding-bottom: 3.5rem; }
main.account h1 { font-size: 2rem; }
main.account form { margin-top: 1.6rem; }
main.account textarea { font-family: var(--sans); font-size: 1rem; }
.err { color: var(--seal); border-left: 3px solid var(--seal); padding-left: .9rem; margin: 1rem 0; }

/* 목록 배지: 아직 응하지 않은 요청이 있는 사건을 눈에 띄게 */
.badge { display: inline-block; margin-left: .6rem; font-size: .84rem; color: var(--seal);
  border: 1px solid var(--seal); padding: .1rem .5rem; vertical-align: middle; }

/* 답으로 받는 항목의 입력칸 */
.ans { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.ans input { flex: 1; min-width: 12rem; max-width: none; }
.ans .btn { padding: .6rem 1.1rem; font-size: .95rem; }

/* 관리자 항목 메모칸과 잔버튼 */
.itemnote { margin: -.3rem 0 .7rem 1.9rem; max-width: 24rem; font-size: .95rem; }
.mini { font-size: .84rem; padding: .1rem .5rem; margin-left: .4rem; cursor: pointer;
  background: transparent; border: 1px solid var(--line-2); color: var(--muted); font-family: var(--sans); }
.mini:hover { border-color: var(--ink); color: var(--ink); }
.opt .t em { font-style: normal; font-size: .82rem; color: var(--muted);
  border: 1px solid var(--line-2); padding: 0 .35rem; margin-left: .4rem; }
details summary { cursor: pointer; padding: .8rem 0; color: var(--muted); }

/* 진단 결과에서 사건으로 넘기는 자리 */
.savebox { background: var(--card); border: 1px solid var(--line-2); padding: 1.5rem 1.6rem; margin-top: 1.6rem; }
.savebox h3 { margin-bottom: .5rem; }
.savebox p:last-child { margin-bottom: 0; }

/* 자료 올리는 자리 */
.uploader { border-top: 1px solid var(--line); margin-top: 1.2rem; padding-top: 1.2rem; }
.uploader .notice { margin: .8rem 0; }
.warn { color: var(--seal); }
#upmsg { color: var(--muted); font-size: .95rem; }

/* 간편 로그인 */
.socialbox { border-bottom: 1px solid var(--line); padding-bottom: 1.4rem; margin-bottom: .4rem; }
.socialbox p { margin-bottom: .6rem; }
.btn.social { display: block; text-align: center; margin-bottom: .5rem; }

/* 히어로의 두 번째 길: 버튼으로 두면 주된 행동과 무게가 같아진다 */
.hero-sub { color: rgba(255,255,255,.86); font-size: .98rem; text-underline-offset: 5px;
  align-self: center; text-shadow: 0 1px 10px rgba(8,12,18,.6); }
.hero-sub:hover { color: #fff; }

/* 담당자와 주고받는 말 */
ul.msgs { list-style: none; margin: 1rem 0; padding: 0; }
ul.msgs li { border-left: 3px solid var(--line-2); padding: .5rem 0 .5rem 1rem; margin-bottom: .9rem; }
ul.msgs li.from-staff { border-left-color: var(--ink); }
ul.msgs li b { color: var(--ink); }
ul.msgs li span { color: var(--muted); font-size: .88rem; margin-left: .5rem; }
ul.msgs li p { margin: .3rem 0 0; }

/* 관리자 단계 패널 */
.stagebox { background: var(--card); border: 1px solid var(--line-2); padding: 1.4rem 1.5rem; margin: 1.4rem 0; }
.stagebox h3 { margin-bottom: .8rem; }
.stagebox h3 + h3 { margin-top: 1.8rem; }