/* 다시 태어난다면 — 서류철 디자인
   톤: 관공서 서류 / 책상 위 서류철. 색 기준(앵커) = 따뜻한 종이색, 강조색 = 인주 빨강(5% 이내) */
:root {
  --desk: oklch(80% 0.025 70);
  --desk-deep: oklch(72% 0.03 65);
  --paper: oklch(97% 0.012 88);
  --paper-shade: oklch(93% 0.016 85);
  --folder: oklch(84% 0.07 82);
  --ink: oklch(24% 0.02 255);
  --ink-soft: oklch(44% 0.02 255);
  --ink-faint: oklch(62% 0.015 255);
  --rule: oklch(30% 0.02 255 / 0.55);
  --pen: oklch(38% 0.13 262);
  --seal: oklch(54% 0.2 27);
  --seal-soft: oklch(54% 0.2 27 / 0.12);

  --font-doc: "Noto Serif KR", "Nanum Myeongjo", serif;
  --font-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-hand: "Nanum Pen Script", "Gaegu", cursive;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  margin: 0;
  background: var(--desk);
  background-image: repeating-linear-gradient(92deg, oklch(78% 0.028 68 / .35) 0 2px, transparent 2px 9px);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

/* ---------- 상단: 문서 머리말 형태의 마스트헤드 ---------- */
.masthead {
  max-width: 1320px; margin: 0 auto; box-sizing: border-box;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s6);
  border-bottom: 1px solid oklch(30% 0.02 255 / .25);
  font-size: 13px;
  color: var(--ink-soft);
}
.masthead .home { text-decoration: none; letter-spacing: .02em; }
.masthead .home b { color: var(--ink); font-weight: 600; }
.masthead .serial { font-family: var(--font-doc); }

/* ---------- 앱 컨테이너 ---------- */
.app { padding: var(--s7) var(--s6) var(--s8); max-width: 1320px; margin: 0 auto; }
.app.cover-wrap, .app.birth-wrap, .app.end-wrap { max-width: 820px; }
.faint { color: var(--ink-faint); }
.kicker { font-family: var(--font-doc); font-size: 14px; font-weight: 700; margin: 0 0 var(--s3); padding-bottom: 6px; border-bottom: 2px solid var(--ink); display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap; }
.kicker .faint { font-family: var(--font-body); font-weight: 400; font-size: 12px; }

/* ---------- 종이 ---------- */
.stack { position: relative; }
.stack::before, .stack::after {
  content: ""; position: absolute; inset: 0;
  background: var(--paper-shade);
  border: 1px solid oklch(30% 0.02 255 / .12);
  z-index: 0;
}
.stack::before { transform: translate(6px, 7px) rotate(.6deg); }
.stack::after { transform: translate(-4px, 4px) rotate(-.5deg); }
.stack.single::before, .stack.single::after { display: none; }
.paper {
  position: relative; z-index: 1;
  background: var(--paper);
  border: 1px solid oklch(30% 0.02 255 / .18);
  box-shadow: 0 1px 0 oklch(100% 0 0 / .6) inset, 0 18px 40px -24px oklch(20% 0.03 60 / .55);
  padding: var(--s6) var(--s7) var(--s7);
  min-height: 560px;
}
.paper.enter { animation: paperIn .5s var(--ease-out); }
@keyframes paperIn { from { opacity: 0; transform: translateY(14px) rotate(-.4deg); } to { opacity: 1; transform: none; } }

.form-no { font-size: 12px; color: var(--ink-soft); display: flex; justify-content: space-between; margin-bottom: var(--s5); }
.doc-title {
  font-family: var(--font-doc);
  font-weight: 900;
  font-size: 30px;
  letter-spacing: .5em;
  text-align: center;
  margin: 0 0 var(--s5);
  padding-right: .5em; /* 자간 보정 */
}
.doc-sub { text-align: center; font-size: 13px; color: var(--ink-soft); margin: calc(var(--s5) * -1) 0 var(--s5); }

/* 서식 표 */
table.form { width: 100%; border-collapse: collapse; border: 2px solid var(--ink); font-size: 14px; }
table.form th, table.form td { border: 1px solid var(--rule); padding: 9px 12px; vertical-align: middle; }
table.form th { width: 26%; background: var(--paper-shade); font-weight: 600; text-align: left; font-size: 13px; }
table.form td { font-family: var(--font-hand); color: var(--pen); font-size: 23px; line-height: 1.25; }
table.form td.print { font-family: var(--font-body); color: var(--ink); font-size: 14px; }
table.form tr.fill td { animation: inkIn .45s var(--ease-out) both; }
@keyframes inkIn { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
table.grades td { text-align: center; }
table.grades th { text-align: center; width: auto; }

.section-label { font-family: var(--font-doc); font-weight: 700; font-size: 14px; margin: var(--s5) 0 var(--s2); }

/* 비고(손글씨 메모) */
.remarks { border: 1px solid var(--rule); border-top: 2px solid var(--ink); padding: var(--s3) var(--s4); margin-top: var(--s5); }
.remarks h4 { margin: 0 0 var(--s2); font-size: 12px; font-weight: 600; color: var(--ink-soft); letter-spacing: .2em; }
.remarks p { margin: 0; font-family: var(--font-hand); color: var(--pen); font-size: 21px; line-height: 1.35; animation: inkIn .4s var(--ease-out) both; }
.remarks p .a { color: var(--ink-faint); font-family: var(--font-body); font-size: 12px; margin-right: var(--s2); }
.remarks p.sad { color: oklch(40% 0.08 27); }

/* 통계 각주 */
.footnote { font-size: 12px; color: var(--ink-soft); margin-top: var(--s4); padding-left: var(--s3); border-left: 2px solid var(--seal-soft); }

/* 선택(체크박스) */
.ask { margin-top: var(--s6); }
.ask .q { font-family: var(--font-doc); font-weight: 700; font-size: 16px; margin: 0 0 var(--s3); }
.opt {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--s3); align-items: start;
  padding: var(--s3) 0; border-bottom: 1px dotted var(--rule); cursor: pointer;
}
.opt:first-of-type { border-top: 1px dotted var(--rule); }
.opt .box { width: 18px; height: 18px; border: 1.5px solid var(--ink); margin-top: 3px; position: relative; background: var(--paper); }
.opt.on .box::after { content: "V"; position: absolute; left: 1px; top: -9px; font-family: var(--font-hand); color: var(--pen); font-size: 30px; line-height: 1; }
.opt b { font-weight: 600; font-size: 15px; }
.opt small { display: block; color: var(--ink-soft); font-size: 13px; }
.opt:hover b { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.opt[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* 서명/날인 줄 */
.sign {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s4);
  margin-top: var(--s6); font-size: 14px; color: var(--ink-soft); min-height: 72px; position: relative;
}
.sign .who { font-family: var(--font-hand); color: var(--pen); font-size: 26px; }
.sign .slot { width: 64px; height: 64px; border: 1px dashed var(--rule); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink-faint); }

/* 도장 */
.seal {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--seal); border: 3px solid var(--seal);
  font-family: var(--font-doc); font-weight: 900;
  mix-blend-mode: multiply; opacity: .88;
  animation: stamp .38s var(--ease-out) both;
}
.seal.name { width: 64px; height: 64px; writing-mode: vertical-rl; font-size: 17px; letter-spacing: .05em; border-radius: 4px; transform: rotate(-4deg); }
.seal.office { width: 92px; height: 92px; border-radius: 50%; font-size: 20px; letter-spacing: .1em; transform: rotate(-12deg); position: absolute; right: 12%; bottom: var(--s5); }
.seal.office.big { width: 120px; height: 120px; font-size: 26px; }
.seal.office.top { bottom: auto; top: 70px; right: 7%; }
.toast { top: 84px; bottom: auto; }
@keyframes stamp { 0% { opacity: 0; scale: 1.7; } 60% { opacity: .95; scale: .96; } 100% { opacity: .88; scale: 1; } }

/* 버튼: 서류 업무 톤 */
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); align-items: center; }
.btn {
  border: 2px solid var(--ink); background: var(--ink); color: var(--paper);
  padding: 10px 20px; font-size: 15px; font-weight: 600; border-radius: 2px;
  transition: transform .2s var(--ease-out), background .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.seal-btn { background: var(--seal); border-color: var(--seal); }
.btn.line { background: transparent; color: var(--ink); }
.btn[disabled] { opacity: .35; cursor: not-allowed; transform: none; }
.hint { font-size: 13px; color: var(--ink-soft); }

/* ---------- 표지(시작 화면): 서류철 ---------- */
.cover {
  background: var(--folder);
  border: 1px solid oklch(45% 0.06 75 / .5);
  padding: var(--s7) var(--s7) var(--s6);
  position: relative;
  box-shadow: 0 18px 40px -24px oklch(20% 0.03 60 / .6);
}
.cover::before { content: ""; position: absolute; top: -22px; left: 0; width: 180px; height: 22px; background: var(--folder); border: 1px solid oklch(45% 0.06 75 / .5); border-bottom: 0; }
.cover .label {
  background: var(--paper); border: 1px solid var(--rule); padding: var(--s4) var(--s5);
  max-width: 420px; margin-bottom: var(--s6);
}
.cover .label dl { margin: 0; display: grid; grid-template-columns: 64px 1fr; row-gap: 6px; font-size: 14px; }
.cover .label dt { color: var(--ink-soft); }
.cover .label dd { margin: 0; font-family: var(--font-hand); color: var(--pen); font-size: 22px; line-height: 1.2; }
.cover h1 { font-family: var(--font-doc); font-weight: 900; font-size: 44px; line-height: 1.2; margin: 0 0 var(--s4); letter-spacing: -.01em; }
.cover p.lead { max-width: 560px; margin: 0 0 var(--s5); font-size: 16px; }
.cover .today { font-size: 14px; color: var(--ink-soft); margin: 0 0 var(--s5); font-variant-numeric: tabular-nums; }
.cover .today b { color: var(--ink); }
.cover label.field { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.cover select { font-family: var(--font-body); font-size: 15px; padding: 8px 10px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); min-width: 220px; }
.cover .warn { font-size: 12px; color: var(--ink-soft); margin-top: var(--s4); max-width: 520px; }
.past { margin-top: var(--s6); font-size: 13px; }
.past h3 { font-size: 13px; font-weight: 600; margin: 0 0 var(--s2); }
.past li { color: var(--ink-soft); }

/* ---------- 결말 ---------- */
table.chobon th:nth-child(1) { width: 13%; } table.chobon th:nth-child(2) { width: 17%; } table.chobon th:nth-child(3) { width: auto; }
table.chobon td { font-size: 20px; }
table.chobon td.when { font-family: var(--font-body); color: var(--ink); font-size: 13px; white-space: nowrap; }
.bugo {
  border: 3px double var(--ink); padding: var(--s5) var(--s6); margin-top: var(--s6); text-align: left; position: relative;
}
.bugo h3 { font-family: var(--font-doc); font-weight: 900; font-size: 24px; letter-spacing: .6em; margin: 0 0 var(--s3); }
.bugo p { margin: 0 0 var(--s2); font-family: var(--font-doc); }
.cohort { margin-top: var(--s6); }
.cohort li { margin-bottom: var(--s2); font-size: 14px; }
.cohort li b { font-weight: 600; }
.word input { width: 100%; font-family: var(--font-hand); font-size: 24px; color: var(--pen); border: 0; border-bottom: 1px solid var(--rule); background: transparent; padding: 4px 2px; outline: none; }
.sources { font-size: 12px; color: var(--ink-soft); margin-top: var(--s6); border-top: 1px solid var(--rule); padding-top: var(--s3); }
.toast { position: fixed; left: 50%; bottom: var(--s6); transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 18px; font-size: 14px; z-index: 50; animation: paperIn .3s var(--ease-out); }

.site-foot { padding: var(--s5) var(--s6) var(--s7); font-size: 12px; color: var(--ink-soft); max-width: 820px; margin: 0 auto; text-align: center; }
.site-foot a { margin: 0 var(--s2); }
.site-foot .copy { margin-top: var(--s2); color: var(--ink-faint); }
.site-foot a { margin-right: var(--s4); }

/* 증명사진 */
.with-photo { display: grid; grid-template-columns: 1fr 112px; gap: var(--s4); align-items: start; }
.with-photo table.form { grid-column: 1; grid-row: 1; }
.idphoto { grid-column: 2; grid-row: 1; width: 112px; height: 149px; object-fit: cover; border: 1px solid var(--rule); background: var(--paper-shade); filter: saturate(.85) contrast(.97); }
.bugo { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s5); }
.bugo > *:not(.bugo-photo) { grid-column: 2; }
.bugo-photo { grid-column: 1; grid-row: 1 / span 4; }
.bugo-photo .idphoto { filter: grayscale(1) contrast(1.05); width: 100px; height: 133px; border: 2px solid var(--ink); }



/* ================= 인생 화면: 책상 위 세 칸 ================= */
body.living .masthead { display: none; }
body.living .site-foot { max-width: 1320px; }
body.living .app { padding: 0 var(--s5) var(--s7); }
.lv { display: grid; grid-template-columns: 264px minmax(0, 1fr) 300px; gap: var(--s5); align-items: start; }
.lv-top {
  grid-column: 1 / -1; position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s5);
  padding: var(--s3) var(--s4); margin: 0 calc(var(--s5) * -1);
  background: oklch(80% 0.025 70 / .94); backdrop-filter: blur(6px);
  border-bottom: 1px solid oklch(30% 0.02 255 / .25);
}
.agebox { display: flex; align-items: baseline; gap: 4px; min-width: 150px; }
.agebox .age { font-family: var(--font-doc); font-weight: 900; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.agebox .unit { font-family: var(--font-doc); font-weight: 700; font-size: 18px; }
.agebox .yr { margin-left: var(--s3); font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.yearbar { height: 3px; background: oklch(30% 0.02 255 / .18); position: relative; overflow: hidden; }
.yearbar i { position: absolute; inset: 0; background: var(--pen); transform-origin: left; transform: scaleX(0); }
.ctrl { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.tb { border: 1px solid oklch(30% 0.02 255 / .45); background: var(--paper); color: var(--ink); font-size: 13px; padding: 5px 10px; border-radius: 2px; font-variant-numeric: tabular-nums; }
.tb:hover { border-color: var(--ink); }
.tb.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
#ffBtn.on { background: var(--seal); border-color: var(--seal); }

.card { background: var(--paper); border: 1px solid oklch(30% 0.02 255 / .18); box-shadow: 0 10px 24px -20px oklch(20% 0.03 60 / .6); padding: var(--s4); margin-bottom: var(--s4); }
.lv-left, .lv-mid, .lv-right { min-width: 0; }

/* 신분증 */
.idc { padding: 0; overflow: hidden; background: oklch(96% 0.02 200); border-color: oklch(45% 0.03 230 / .4);
  background-image: repeating-radial-gradient(circle at 80% 30%, transparent 0 7px, oklch(70% 0.04 200 / .18) 7px 8px); }
.idc-h { font-family: var(--font-doc); font-weight: 900; font-size: 15px; letter-spacing: .3em; padding: var(--s2) var(--s4); border-bottom: 1px solid oklch(45% 0.03 230 / .3); }
.idc-h small { letter-spacing: 0; font-weight: 500; font-size: 11px; }
.idc-b { display: grid; grid-template-columns: 1fr 78px; gap: var(--s3); padding: var(--s3) var(--s4) var(--s4); }
.idc-t { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ink-soft); min-width: 0; }
.idc-t .nm { font-family: var(--font-doc); font-size: 22px; color: var(--ink); letter-spacing: .1em; }
.idc-t .rrn { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.idc-t .now { margin-top: var(--s2); font-family: var(--font-hand); color: var(--pen); font-size: 21px; line-height: 1.1; }
.idc .idphoto { width: 78px; height: 104px; }
.idphoto.none { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; color: var(--ink-faint); border: 1px dashed var(--rule); width: 78px; height: 104px; background: var(--paper); }

/* 상태: 서식의 칸 채우기 */
.ledger .row { display: grid; grid-template-columns: 38px 1fr 28px; align-items: center; gap: var(--s2); padding: 5px 0; border-bottom: 1px dotted var(--rule); font-size: 13px; }
.ledger .row.money { grid-template-columns: 38px 1fr; }
.ledger .l { color: var(--ink-soft); }
.ledger .v { font-family: var(--font-hand); color: var(--pen); font-size: 20px; line-height: 1; text-align: right; }
.ledger .money .v { text-align: left; font-size: 19px; }
.ledger .bx { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.ledger .bx i { height: 11px; border: 1px solid oklch(30% 0.02 255 / .35); }
.ledger .bx i.f { background: var(--ink); border-color: var(--ink); }
.fam { display: grid; grid-template-columns: 52px 1fr; margin: 0; font-size: 13px; row-gap: 4px; }
.fam dt { color: var(--ink-soft); }
.fam dd { margin: 0; }
.fam s { text-decoration: none; font-size: 11px; color: var(--ink-faint); border: 1px solid var(--ink-faint); padding: 0 3px; margin-left: 2px; }
.binder { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.binder li { display: flex; padding: 4px 0; border-bottom: 1px dotted var(--rule); color: var(--ink-soft); }
.binder li:last-child { color: var(--ink); font-weight: 600; }
.binder .a, .feed .a { margin-left: auto; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* 올해의 초점 */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { display: grid; grid-template-columns: 16px auto; column-gap: 8px; align-items: center; text-align: left; background: var(--paper); border: 1px solid var(--rule); padding: 6px 12px 6px 10px; border-radius: 2px; color: var(--ink); }
.chip .box { width: 14px; height: 14px; border: 1.5px solid var(--ink); grid-row: 1 / span 2; position: relative; }
.chip b { font-size: 14px; font-weight: 600; }
.chip small { font-size: 11px; color: var(--ink-soft); grid-column: 2; }
.chip.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.chip.on .box::after { content: "V"; position: absolute; left: 0; top: -9px; font-family: var(--font-hand); color: var(--pen); font-size: 26px; line-height: 1; }

/* 인생 기록 */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 46px 1fr; gap: var(--s3); padding: 9px 0; border-bottom: 1px dotted var(--rule); font-size: 15px; }
.feed li .a { margin: 0; font-size: 13px; padding-top: 2px; }
.feed li.new { animation: inkIn .5s var(--ease-out) both; }
.feed li.warm .t { color: var(--ink); }
.feed li.good .t::before, .feed li.bad .t::before, .feed li.loss .t::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.feed li.good .t::before { background: oklch(50% 0.1 150); }
.feed li.bad .t::before { background: oklch(55% 0.13 40); }
.feed li.loss .t { color: var(--ink-soft); }
.feed li.loss .t::before { background: var(--ink); border-radius: 0; }
.feed li.dec .t { font-family: var(--font-hand); color: var(--pen); font-size: 21px; line-height: 1.2; }
.feed:not(.all) li:nth-child(n+13) { display: none; }
.feed .fx { border: 0; background: none; color: var(--ink-faint); font-size: 11px; text-decoration: underline; padding: 0 2px; }
.feed .f { display: block; font-size: 12px; color: var(--ink-soft); border-left: 2px solid var(--seal-soft); padding-left: 8px; margin-top: 4px; }
.more { border: 0; background: none; color: var(--ink-soft); font-size: 13px; text-decoration: underline; padding: var(--s3) 0 0; }

/* 같은 1초 */
.comps { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.comps li { padding: 6px 0; border-bottom: 1px dotted var(--rule); }
.comps li .st { display: block; font-family: var(--font-hand); color: var(--pen); font-size: 18px; line-height: 1.15; }
.comps li.gone { color: var(--ink-faint); }
.comps li.gone .st { color: var(--ink-faint); }

/* 인생 지도 */
.map { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.map .c { aspect-ratio: 1; border: 1px solid oklch(30% 0.02 255 / .2); position: relative; }
.map .c.p { background: oklch(88% 0.02 80); }
.map .c.p.warm { background: oklch(84% 0.07 82); }
.map .c.p.good { background: oklch(78% 0.07 150); }
.map .c.p.bad { background: oklch(76% 0.07 40); }
.map .c.p.loss { background: oklch(40% 0.02 255); }
.map .c.d::after { content: ""; position: absolute; inset: 25%; border: 1.5px solid var(--seal); border-radius: 50%; }
.map .c.now { outline: 2px solid var(--pen); outline-offset: 1px; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { outline-color: transparent; } }
.map.final { max-width: 360px; }
#surv { width: 100%; height: auto; display: block; }

/* 서류가 올 때: 시간 멈춤 */
.modal { position: fixed; inset: 0; z-index: 40; overflow-x: hidden; background: oklch(30% 0.03 60 / .45); overflow-y: auto; padding: var(--s6) var(--s4); animation: fadeIn .3s ease both; }
@keyframes fadeIn { from { opacity: 0; } }
.modal-in { max-width: 760px; margin: 0 auto; }
body.modal-open { overflow: hidden; }
.paper.pause { min-height: 0; max-width: 620px; margin: 8vh auto 0; }
.paper.pause .kicker { border: 0; color: var(--seal); letter-spacing: .2em; }
.mirror { font-size: 14px; color: var(--ink-soft); border-left: 2px solid var(--seal-soft); padding-left: var(--s3); }
.pq { font-family: var(--font-doc); font-weight: 700; font-size: 24px; line-height: 1.45; margin: var(--s5) 0; }
.pause textarea { width: 100%; font-family: var(--font-hand); font-size: 24px; color: var(--pen); background: transparent; border: 0; border-bottom: 1px solid var(--rule); resize: vertical; outline: none; line-height: 1.4;
  background-image: repeating-linear-gradient(transparent 0 33px, oklch(30% 0.02 255 / .15) 33px 34px); }
.twin { margin-top: var(--s6); min-height: 0; }

/* ---------- 모바일 ---------- */
@media (max-width: 1100px) {
  .lv { grid-template-columns: 240px minmax(0, 1fr); }
  .lv-right { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }
  .lv-right .card { margin: 0; }
}
@media (max-width: 860px) {
  .masthead { padding: var(--s3) var(--s4); }
  .masthead .serial { display: none; }
  .app { padding: var(--s4) var(--s3) var(--s7); }
  body.living .app { padding: 0 var(--s3) var(--s7); }
  .lv { grid-template-columns: 1fr; gap: 0; }
  .lv-top { margin: 0 calc(var(--s3) * -1) var(--s3); grid-template-columns: auto 1fr; gap: var(--s2) var(--s3); padding: var(--s2) var(--s3); }
  .lv-top .ctrl { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tb { padding: 5px 8px; white-space: nowrap; }
  .agebox .age { font-size: 34px; }
  .lv-mid { order: 1; } .lv-left { order: 2; } .lv-right { order: 3; display: block; }
  .lv-right .card { margin-bottom: var(--s4); }
  .feed li { font-size: 14px; grid-template-columns: 40px 1fr; }
  .modal { padding: var(--s3) var(--s2); }
  .paper { padding: var(--s5) var(--s4) var(--s6); min-height: 0; }
  .doc-title { font-size: 22px; letter-spacing: .3em; padding-right: .3em; }
  table.form { font-size: 13px; }
  table.form th { width: 34%; padding: 8px; }
  table.form td { font-size: 20px; padding: 8px; }
  .cover { padding: var(--s6) var(--s4) var(--s5); }
  .cover h1 { font-size: 34px; }
  .seal.office { right: var(--s4); width: 76px; height: 76px; font-size: 16px; }
  .btn { padding: 10px 16px; }
  .with-photo { grid-template-columns: 1fr 80px; gap: var(--s2); }
  .with-photo .idphoto { width: 80px; height: 107px; }
  .bugo { grid-template-columns: 1fr; }
  .bugo > *:not(.bugo-photo), .bugo-photo { grid-column: 1; grid-row: auto; }
  .pq { font-size: 20px; }
}
.pace { border: 0; padding: 0; margin: 0 0 var(--s5); max-width: 520px; }
.pace legend { font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; padding: 0; }
.pace .opt { background: var(--paper); padding: var(--s2) var(--s3); border: 1px solid var(--rule); border-bottom: 0; }
.pace .opt:last-of-type { border-bottom: 1px solid var(--rule); }
.pace input { position: absolute; opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}

/* 태어날 곳 추첨 */
.roll { min-height: 520px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.roll .kicker { justify-content: center; border: 0; color: var(--ink-soft); letter-spacing: .3em; }
.roll .drum { font-family: var(--font-doc); font-weight: 900; font-size: clamp(40px, 8vw, 76px); line-height: 1.15; margin: var(--s5) 0 var(--s3); min-height: 1.2em; font-variant-numeric: tabular-nums; }
.roll .drum.spin { color: var(--ink-faint); }
.roll .sub { font-family: var(--font-hand); color: var(--pen); font-size: 30px; min-height: 40px; }
.roll .odds { font-size: 14px; color: var(--ink-soft); min-height: 24px; margin-top: var(--s4); }
.roll .odds b { color: var(--seal); }
.roll .bars { display: grid; grid-template-columns: repeat(17, 1fr); gap: 3px; align-items: end; height: 70px; max-width: 520px; width: 100%; margin: var(--s6) auto 0; }
.roll .bars i { background: oklch(30% 0.02 255 / .18); display: block; transition: background .15s; }
.roll .bars i.hit { background: var(--seal); }
.roll .bars i.cur { background: var(--ink-soft); }
.roll .names { display: grid; grid-template-columns: repeat(17, 1fr); gap: 3px; max-width: 520px; width: 100%; margin: 4px auto 0; text-align: center; font-size: 10px; color: var(--ink-faint); }
@media (max-width: 860px) { .roll { min-height: 420px; } .roll .names { font-size: 8px; } }

/* 게임 소개 (검색엔진·처음 온 사람용, 플레이 중엔 숨김) */
.about { max-width: 820px; margin: 0 auto; padding: var(--s5) var(--s6) var(--s4); font-size: 14px; color: var(--ink-soft); }
.about h2 { font-family: var(--font-doc); font-size: 18px; color: var(--ink); margin: 0 0 var(--s3); padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
.about h3 { font-family: var(--font-doc); font-size: 15px; color: var(--ink); margin: var(--s5) 0 var(--s2); }
.about ol { padding-left: 1.3em; margin: 0; } .about li { margin-bottom: 4px; }
.about dt { font-weight: 600; color: var(--ink); margin-top: var(--s3); } .about dd { margin: 2px 0 0; }
.about .more-games { margin-top: var(--s5); }
body.living .about { display: none; }
@media (max-width: 860px) { .about { padding: var(--s4) var(--s4); } }

.cover .cover-kicker { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .25em; color: var(--seal); }