/* ============================================================
   글씨방 공통 스타일시트
   - 모든 페이지가 이 파일 하나를 공유합니다.
   - 새 도구 페이지를 만들 때 이 파일만 링크하면 디자인이 통일됩니다.
   - 섹션: 토큰 → 기본 → 내비 → 헤더 → 레이아웃 → 패널/폼 → 버튼
           → 미리보기/시트 → 도구별 시트 → 시험 오버레이 → 허브 카드
           → 광고/본문/푸터/토스트 → 인쇄
   ============================================================ */

/* ===== 디자인 토큰 ===== */
:root{
  --board:#2f5d4d; --board-deep:#274f41; --board-edge:#1d3b31;
  --chalk:#f3efe4; --chalk-dim:#c9d6cd;
  --paper:#ffffff; --paper-shadow:rgba(15,40,30,.35);
  --redpen:#e4573d; --redpen-deep:#c8442c;
  --ink:#2b3038; --ink-soft:#5b6470;
  --grid:#b9cdc0; --guide:#d8e4dc; --trace:#c3c8ce;
  --radius:10px;
  --kr:"Gowun Dodum","Noto Sans KR",sans-serif;
  --disp:"Jua",var(--kr);
}

/* ===== 기본 ===== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--kr); font-size:15px; line-height:1.6; color:var(--chalk);
  background:radial-gradient(140% 100% at 50% 0%, var(--board) 0%, var(--board-deep) 70%, var(--board-edge) 100%);
  min-height:100vh;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.05; z-index:0;
  background-image:radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, #fff 0 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, #fff 0 1px, transparent 1px);
  background-size:240px 240px, 300px 300px, 180px 180px;
}
.wrap{max-width:1180px; margin:0 auto; padding:26px 16px 60px; position:relative; z-index:1}
.wrap.narrow{max-width:860px; padding-top:40px}

/* ===== 상단 내비 ===== */
.topnav{display:flex; justify-content:center; flex-wrap:wrap; gap:4px; margin-bottom:18px; font-size:13.5px}
.topnav a{color:var(--chalk-dim); text-decoration:none; padding:7px 15px; border-radius:999px; border:1.5px solid transparent}
.topnav a:hover{color:var(--chalk); border-color:rgba(243,239,228,.3)}
.topnav a.here{color:var(--chalk); border-color:rgba(243,239,228,.5)}

/* ===== 헤더 ===== */
header{text-align:center; margin-bottom:22px}
.logo{font-family:var(--disp); font-weight:400; font-size:clamp(30px,5.5vw,44px); margin:0; letter-spacing:.02em; color:var(--chalk)}
.logo .pen{color:#ffd9a8}
.narrow .logo{font-size:clamp(36px,8vw,54px)}
.tagline{margin:6px 0 0; color:var(--chalk-dim); font-size:14px}
.chalk-line{width:120px; height:3px; margin:14px auto 0; border-radius:2px; background:linear-gradient(90deg, transparent, var(--chalk-dim), transparent); opacity:.6}

/* ===== 레이아웃 ===== */
.app{display:grid; grid-template-columns:340px 1fr; gap:20px; align-items:start}
@media (max-width:880px){ .app{grid-template-columns:1fr} }

/* ===== 패널 & 폼 ===== */
.panel{background:var(--paper); color:var(--ink); border-radius:var(--radius); box-shadow:0 10px 28px var(--paper-shadow); overflow:hidden}
.panel-head{background:repeating-linear-gradient(90deg, var(--redpen) 0 14px, var(--redpen-deep) 14px 28px); color:#fff; font-family:var(--disp); font-size:17px; letter-spacing:.04em; padding:12px 18px}
.panel-body{padding:18px}
.field{margin-bottom:18px}
.field > label{display:block; font-weight:700; font-size:13px; color:var(--ink); margin-bottom:7px}
.field .hint{font-weight:400; color:var(--ink-soft); font-size:11.5px; margin-left:6px}
.panel-body textarea{
  width:100%; resize:vertical; border:2px solid #e3e6ea; border-radius:8px;
  padding:10px 12px; font-family:var(--kr); color:var(--ink); outline:none;
}
.panel-body textarea:focus{border-color:var(--redpen)}
#txt{min-height:74px; font-size:16px}
#words{min-height:150px; font-size:15px; line-height:1.9}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.chip{font-family:var(--kr); font-size:12px; color:var(--ink-soft); background:#f2f4f6; border:1px solid #e1e5e9; border-radius:999px; padding:5px 11px; cursor:pointer}
.chip:hover{background:#fdeee9; border-color:var(--redpen); color:var(--redpen-deep)}
.seg{display:flex; border:2px solid #e3e6ea; border-radius:8px; overflow:hidden}
.seg button{flex:1; font-family:var(--kr); font-size:13px; padding:9px 4px; border:0; background:#fff; color:var(--ink-soft); cursor:pointer; border-right:1px solid #e3e6ea}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--redpen); color:#fff; font-weight:700}
.seg button:focus-visible{outline:2px solid var(--redpen); outline-offset:-2px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
select, input[type=text]{width:100%; border:2px solid #e3e6ea; border-radius:8px; padding:8px 10px; font-family:var(--kr); font-size:14px; color:var(--ink); background:#fff; outline:none}
select:focus, input[type=text]:focus{border-color:var(--redpen)}
.check{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink); cursor:pointer; user-select:none; margin-top:8px}
.check input{width:17px; height:17px; accent-color:var(--redpen); cursor:pointer}

/* ===== 버튼 ===== */
.actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px}
.act{font-family:var(--disp); font-size:16px; letter-spacing:.04em; border-radius:9px; padding:13px 8px; cursor:pointer; border:0; display:flex; align-items:center; justify-content:center; gap:7px; transition:transform .05s, filter .15s}
.act:hover{filter:brightness(1.07)}
.act:active{transform:translateY(1px)}
.act:focus-visible{outline:3px solid var(--redpen); outline-offset:2px}
.act.print{grid-column:1 / -1; background:var(--redpen); color:#fff; box-shadow:0 3px 0 var(--redpen-deep)}
.act.tts{grid-column:1 / -1; background:#2b6cb0; color:#fff; box-shadow:0 3px 0 #1f4f82}
.act.shuffle{grid-column:1 / -1; background:#fff7eb; color:#8a5a18; border:1.5px solid #f1d9ae; font-size:15px}
.act.sub{background:#f2f4f6; color:var(--ink); border:1px solid #e1e5e9; font-size:14px}
.act svg{width:17px; height:17px}

/* ===== 미리보기 & A4 시트 공통 ===== */
.preview-zone{min-width:0}
.preview-bar{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; color:var(--chalk-dim); font-size:12.5px}
.preview-bar b{color:var(--chalk); font-weight:400; font-family:var(--disp); letter-spacing:.05em}
#sheets{display:flex; flex-direction:column; align-items:center; gap:26px}
.sheet-scale{transform-origin:top center}
.sheet{width:210mm; height:297mm; background:var(--paper); color:var(--ink); padding:12mm 14mm 10mm; position:relative; box-shadow:0 14px 40px var(--paper-shadow); display:flex; flex-direction:column}
.sheet-head{display:flex; justify-content:space-between; align-items:flex-end; border-bottom:2.2px solid var(--ink); padding-bottom:3mm; margin-bottom:6mm}
.sheet-title{font-family:var(--disp); font-size:8mm; line-height:1.1}
.sheet-title .deco{color:var(--redpen); margin-right:2mm}
.sheet-meta{font-size:3.6mm; color:var(--ink-soft); text-align:right; line-height:1.9}
.sheet-meta .blank{display:inline-block; width:22mm; border-bottom:1px solid var(--ink-soft)}
.sheet-meta .score{display:inline-block; width:14mm; border-bottom:1px solid var(--ink-soft)}
.sheet-foot{margin-top:4mm; padding-top:2mm; border-top:1px solid #e3e6ea; display:flex; justify-content:space-between; font-size:3mm; color:#9aa1a9}

/* ===== 한글 따라쓰기 시트 ===== */
.rows{flex:1; display:flex; flex-direction:column; justify-content:flex-start; gap:var(--rowgap)}
.row{display:flex; gap:0}
.cell{width:var(--cell); height:var(--cell); flex:none; position:relative; border:1px solid var(--grid); margin-left:-1px}
.row .cell:first-child{margin-left:0}
.cell.guide::before{content:""; position:absolute; left:4%; right:4%; top:50%; border-top:1px dashed var(--guide)}
.cell.guide::after{content:""; position:absolute; top:4%; bottom:4%; left:50%; border-left:1px dashed var(--guide)}
.cell span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:calc(var(--cell) * .68); line-height:1; z-index:1}
.cell.solid span{color:var(--ink)}
.cell.trace span{color:var(--trace)}
.f-gowun{font-family:"Gowun Dodum",sans-serif}
.f-gaegu{font-family:"Gaegu",cursive}
.f-batang{font-family:"Gowun Batang",serif}

/* ===== 수학 연산 시트 ===== */
.probs-v{flex:1; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:min-content; row-gap:13mm; column-gap:4mm; align-content:start; padding-top:2mm}
.vp{display:flex; gap:2.5mm; justify-content:center}
.pno{font-size:3.6mm; color:var(--ink-soft); padding-top:1mm}
.calc{min-width:25mm; text-align:right; font-size:7.5mm; line-height:1.35; font-variant-numeric:tabular-nums}
.calc .bot{border-bottom:2.5px solid var(--ink); padding-bottom:1mm; display:flex; justify-content:space-between; gap:5mm}
.calc .op{color:var(--ink)}
.calc .answer{height:12mm; font-size:7.5mm; color:var(--redpen)}
.probs-h{flex:1; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:min-content; row-gap:8.5mm; column-gap:12mm; align-content:start; padding-top:2mm}
.hp{font-size:5.6mm; display:flex; align-items:baseline; gap:3mm; font-variant-numeric:tabular-nums}
.hp .pno{font-size:3.6mm; padding-top:0}
.hp .blankline{flex:1; max-width:26mm; border-bottom:1.8px solid var(--ink); height:6.5mm; color:var(--redpen); font-size:5.6mm; text-align:center}
.anskey{flex:1; display:grid; grid-template-columns:repeat(5,1fr); grid-auto-rows:min-content; row-gap:6mm; column-gap:4mm; align-content:start; padding-top:2mm}
.ak{font-size:4.6mm; font-variant-numeric:tabular-nums}
.ak b{color:var(--redpen); font-weight:700; margin-left:1.5mm}

/* ===== 받아쓰기 시트 ===== */
.qrows{flex:1; display:flex; flex-direction:column; gap:0}
.qrow{display:flex; align-items:flex-end; gap:4mm; border-bottom:1.2px solid #c9cdd2; min-height:20mm; max-height:30mm; flex:1 1 auto; padding-bottom:1mm}
.qrow .qn{font-family:var(--disp); font-size:5.5mm; color:var(--ink-soft); width:9mm; flex:none; padding-bottom:1mm}
.qrow .qa{font-size:6.2mm; color:var(--redpen); padding-bottom:1mm}

/* ===== 받아쓰기 시험 오버레이 ===== */
.exam{position:fixed; inset:0; z-index:100; display:none; flex-direction:column; align-items:center; justify-content:center; gap:26px; background:radial-gradient(140% 100% at 50% 0%, var(--board) 0%, var(--board-edge) 100%); padding:20px}
.exam.show{display:flex}
.exam .qno{font-family:var(--disp); font-size:clamp(60px,18vw,120px); color:var(--chalk); line-height:1; text-align:center}
.exam .qno small{display:block; font-size:clamp(15px,3vw,20px); color:var(--chalk-dim); margin-top:6px; font-family:var(--kr)}
.exam .status{font-size:15px; color:#ffd9a8; min-height:24px; font-family:var(--disp); letter-spacing:.05em}
.exam .ctrl{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.exam .ctrl button{font-family:var(--disp); font-size:16px; padding:14px 24px; border-radius:999px; border:1.5px solid rgba(243,239,228,.4); background:transparent; color:var(--chalk); cursor:pointer}
.exam .ctrl button:hover{border-color:var(--chalk)}
.exam .ctrl button.main{background:var(--redpen); border-color:var(--redpen); box-shadow:0 3px 0 var(--redpen-deep)}
.exam .bar{width:min(420px,80vw); height:6px; border-radius:3px; background:rgba(243,239,228,.18); overflow:hidden}
.exam .bar i{display:block; height:100%; width:0; background:#ffd9a8; transition:width .3s}
.exam .close{position:absolute; top:18px; right:20px; background:none; border:none; color:var(--chalk-dim); font-size:26px; cursor:pointer; font-family:var(--kr)}
.exam .tip{font-size:12.5px; color:var(--chalk-dim); max-width:46ch; text-align:center}

/* ===== 허브 도구 카드 ===== */
.tools{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:14px}
@media (max-width:640px){ .tools{grid-template-columns:1fr} }
.tool{display:block; text-decoration:none; background:var(--paper); color:var(--ink); border-radius:12px; box-shadow:0 10px 28px var(--paper-shadow); padding:24px 22px 20px; transition:transform .12s, box-shadow .12s; position:relative; overflow:hidden}
.tool:hover{transform:translateY(-3px); box-shadow:0 16px 36px var(--paper-shadow)}
.tool::before{content:""; position:absolute; top:0; left:0; right:0; height:7px; background:repeating-linear-gradient(90deg, var(--redpen) 0 14px, var(--redpen-deep) 14px 28px)}
.tool .ico{font-size:30px; line-height:1}
.tool h2{font-family:var(--disp); font-weight:400; font-size:21px; margin:10px 0 6px}
.tool p{margin:0; font-size:13.5px; color:var(--ink-soft)}
.tool .go{display:inline-block; margin-top:14px; font-family:var(--disp); font-size:14px; color:var(--redpen)}
.tool.soon{opacity:.55; pointer-events:none}
.tool.soon .go{color:var(--ink-soft)}

/* ===== 광고 / 본문 / 푸터 / 토스트 ===== */
.adslot{margin:26px auto; max-width:760px; min-height:96px; display:flex; align-items:center; justify-content:center; border:1.5px dashed rgba(243,239,228,.35); border-radius:var(--radius); color:var(--chalk-dim); font-size:11px; letter-spacing:.25em}
/* 허브: 도구 아래 가이드 콘텐츠 링크 줄 */
.guides{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:18px 0 0}
.guides a{color:var(--chalk-dim); border:1.5px solid rgba(243,239,228,.25); border-radius:20px; padding:7px 14px; font-size:13.5px; text-decoration:none}
.guides a:hover{color:var(--chalk); border-color:rgba(243,239,228,.55)}

.content{max-width:760px; margin:36px auto 0; color:var(--chalk-dim)}
.content h2{font-family:var(--disp); font-weight:400; color:var(--chalk); font-size:23px; margin:34px 0 10px}
.content h3{font-weight:700; color:var(--chalk); font-size:16px; margin:22px 0 6px}
.content p, .content li{font-size:14.5px; margin:0 0 12px}
.content ul{padding-left:20px; margin:0 0 12px}
.content strong{color:var(--chalk)}
.content a{color:#ffd9a8}
.faq dt{font-weight:700; color:var(--chalk); margin-top:16px; font-size:15px}
.faq dd{margin:5px 0 0; font-size:14px}
footer{max-width:760px; margin:44px auto 0; padding-top:16px; border-top:1px solid rgba(243,239,228,.2); color:var(--chalk-dim); font-size:12px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px}
footer a{color:var(--chalk-dim)}
footer a:hover{color:var(--chalk)}
.toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(80px); background:var(--ink); color:#fff; font-size:13.5px; padding:11px 20px; border-radius:999px; box-shadow:0 8px 20px rgba(0,0,0,.35); transition:transform .25s; z-index:150}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ===== 인쇄 ===== */
@media print{
  @page{size:A4; margin:0}
  body{background:#fff}
  body::before{display:none}
  .no-print{display:none !important}
  .wrap{max-width:none; padding:0}
  #sheets{gap:0; display:block}
  .sheet-scale{transform:none !important; height:auto !important}
  .sheet{box-shadow:none; page-break-after:always; break-after:page}
  .sheet:last-child{page-break-after:auto; break-after:auto}
}