/* 딴짓 · 글자수 세기 — 책상 위 원고지: 미색 종이, 빨간 칸, 고운바탕 글씨, 카운터는 검은 칠판 띠 */
:root {
  --paper: #f6f1e4; --sheet: #fffdf6; --red: #c8463a; --grid: rgba(200,70,58,.55); --ink: #24211d; --dim: #6c6458; --board: #24302b;
  --serif: 'Gowun Batang', serif; --num: 'Do Hyeon', 'Pretendard Variable', sans-serif;
  --ui: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; min-height: 100svh; color: var(--ink); font: 500 16px/1.55 var(--ui); overflow-x: clip;
  background: var(--paper) radial-gradient(rgba(108,100,88,.10) 1px, transparent 1.4px) 0 0 / 9px 9px; }
button, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.top { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; max-width: 1080px; margin: 0 auto; }
.logo { font: 400 21px/1 var(--num); color: var(--sheet); background: var(--ink); padding: 9px 12px 7px; border-radius: 6px; text-decoration: none; }
.saved { font-size: 13px; color: var(--dim); }
.stage { max-width: 1080px; margin: 0 auto; padding: 0 16px 28px; }
h1 { margin: 2px 0 10px; font: 400 clamp(30px, 8vw, 40px)/1.1 var(--num); }
.desk { display: grid; gap: 12px; }

/* 카운터 띠 */
.board { background: var(--board); color: #f2efe6; border-radius: 12px; padding: 12px 14px; box-shadow: inset 0 0 0 3px #3a4a43; }
.main-n { display: flex; align-items: baseline; gap: 6px; }
.main-n b { font: 400 clamp(46px, 13vw, 64px)/1 var(--num); color: #fff; font-variant-numeric: tabular-nums; }
.main-n span { font-weight: 800; } .main-n small { font-weight: 500; opacity: .75; }
.stats { margin: 8px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; }
.stats div { min-width: 0; } .stats dt { font-size: 11.5px; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats dd { margin: 0; font: 400 22px/1.1 var(--num); font-variant-numeric: tabular-nums; }
.limit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; font-size: 13px; }
.limit select { min-height: 36px; border: 0; border-radius: 8px; padding: 0 6px; background: #f2efe6; color: var(--ink); font-size: 14px; }
.bar { flex: 1 1 100%; height: 10px; border-radius: 6px; background: rgba(255,255,255,.15); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: #7ed99a; transition: width .2s, background .2s; }
.bar.warn i { background: #f2c94c; } .bar.over i { background: #ff6b5b; }
.left { margin: 0; font-weight: 700; } .left.over { color: #ff8a7d; }

/* 원고지 종이 입력칸 */
.paper { display: block; }
.paper textarea { display: block; width: 100%; min-height: 38svh; resize: vertical; border: 0; border-radius: 4px; padding: 18px 16px; background: var(--sheet); font: 400 18px/2 var(--serif); color: var(--ink);
  background-image: linear-gradient(transparent calc(2em - 1px), rgba(200,70,58,.22) calc(2em - 1px)); background-size: 100% 2em; background-attachment: local; background-position: 0 18px;
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 10px 24px rgba(60,50,30,.12); border-left: 4px double var(--grid); }
.acts { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { appearance: none; min-height: 44px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 10px; background: var(--sheet); font-weight: 800; font-size: 14px; cursor: pointer; }
.btn.ghost { background: transparent; border-style: dashed; }

/* 원고지 미리보기 */
.genko h2 { font: 400 24px/1.2 var(--num); margin: 22px 0 8px; }
.grid { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); background: var(--sheet); border: 2px solid var(--grid); padding: 6px; gap: 0; max-width: 760px; }
.grid span { aspect-ratio: 1; border: 1px solid var(--grid); margin: -.5px; display: grid; place-items: center; font: 400 clamp(9px, 3.1vw, 22px)/1 var(--serif); }
.grid span.row-gap { grid-column: 1 / -1; aspect-ratio: auto; height: 6px; border: 0; }
.gnote { margin: 6px 0 0; font-size: 13px; color: var(--dim); }
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90; margin: 0; padding: 12px 16px; background: var(--ink); color: var(--sheet); border-radius: 10px; font-weight: 700; width: max-content; max-width: calc(100vw - 32px); }
.toast[hidden] { display: none; }

.guide { background: var(--sheet); margin-top: 20px; border-top: 4px double var(--grid); }
.guide-in { max-width: 760px; margin: 0 auto; padding: 30px 20px 44px; content-visibility: auto; contain-intrinsic-size: auto 1600px; }
.guide h2 { font: 400 25px/1.3 var(--num); margin: 30px 0 10px; word-break: keep-all; }
.guide section:first-of-type h2 { margin-top: 6px; }
.guide p, .guide li, .guide dd, .guide td { word-break: keep-all; }
.steps { padding-left: 1.3em; } .steps li { margin: 6px 0; } .steps b { margin-right: 4px; }
.guide table { width: 100%; border-collapse: collapse; font-size: 15px; }
.guide th, .guide td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #e6dcc7; vertical-align: top; }
.faq dl { margin: 0; } .faq dt { font-weight: 800; margin-top: 16px; } .faq dd { margin: 4px 0 0; color: #4a4339; }
.more ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.more a { display: block; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 8px; color: var(--ink); text-decoration: none; }
.more a b { margin-right: 6px; }
.site-foot { margin-top: 30px; font-size: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.site-foot a { color: var(--dim); display: inline-block; padding: 10px 0; }
@media (min-width: 900px) {
  .desk { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .board { grid-column: 2; grid-row: 1; position: sticky; top: 16px; }
  .paper { grid-column: 1; grid-row: 1 / 3; } .paper textarea { min-height: 60svh; }
  .acts { grid-column: 2; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}