/* ============================================================
   공통 스타일 — 사이트 껍데기 + 원고지 시트
   ============================================================ */
:root{
  --ink:#1a1a1a;
  --muted:#5a6673;
  --line:#dfe5ec;
  --bg:#eef1f5;
  --accent:#2f6fb0;
  --accent-dk:#24578a;
  --trace:#c6c6c6;
  --grid:#42586e;      /* 칸 테두리 : 진하게 */
  --gridsoft:#d9d9d9;  /* 십자 보조선 : 연하게 */
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink); line-height:1.7;
  font-family:"Malgun Gothic","맑은 고딕",AppleGothic,"Apple SD Gothic Neo",sans-serif;
  -webkit-text-size-adjust:100%;
}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- 헤더 ---------- */
.site-head{
  background:#fff; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:60;
}
.site-head .inner{
  max-width:1040px; margin:0 auto; padding:10px 18px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.brand{font-size:17px; font-weight:700; color:var(--ink); white-space:nowrap;}
.brand:hover{text-decoration:none;}
.brand span{font-size:11px; font-weight:400; color:var(--muted); margin-left:6px;}
.site-nav{display:flex; gap:4px; flex-wrap:wrap; margin-left:auto;}
.site-nav a{
  padding:6px 11px; border-radius:6px; font-size:14px; color:var(--muted);
}
.site-nav a:hover{background:#eef4fa; color:var(--accent); text-decoration:none;}
.site-nav a.on{background:var(--accent); color:#fff;}

/* ---------- 본문 ---------- */
.wrap{max-width:1040px; margin:0 auto; padding:24px 18px 60px;}
.wrap.narrow{max-width:760px;}
.page-title{font-size:24px; margin:8px 0 6px;}
.page-lead{color:var(--muted); font-size:15px; margin:0 0 22px;}
.card{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:20px 22px; margin-bottom:16px;
}
.card h2{font-size:17px; margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--line);}
.card h3{font-size:15px; margin:18px 0 6px;}
.card p{margin:0 0 12px;}
.card ul,.card ol{margin:0 0 12px; padding-left:22px;}
.card li{margin-bottom:5px;}
.card table{width:100%; border-collapse:collapse; font-size:14px; margin-bottom:12px;}
.card th,.card td{border:1px solid var(--line); padding:7px 10px; text-align:left;}
.card th{background:#f6f9fc; font-weight:700;}
.note{
  background:#f5f9fd; border-left:3px solid var(--accent);
  padding:10px 14px; border-radius:0 6px 6px 0; font-size:14px; margin:0 0 14px;
}
.muted{color:var(--muted); font-size:13px;}

/* ---------- 버튼·폼 ---------- */
.btn{
  display:inline-block; padding:9px 16px; font-size:14px; font-family:inherit;
  cursor:pointer; border:1px solid var(--accent); background:var(--accent);
  color:#fff; border-radius:6px; white-space:nowrap;
}
.btn:hover{background:var(--accent-dk); text-decoration:none; color:#fff;}
.btn.ghost{background:#fff; color:var(--accent);}
.btn.ghost:hover{background:#eef4fa; color:var(--accent);}
.btn.sm{padding:5px 11px; font-size:13px;}
.btn:disabled{opacity:.45; cursor:default;}
input[type=text], input[type=search], select{
  padding:9px 12px; font-size:15px; font-family:inherit;
  border:1px solid #b9c3cd; border-radius:6px; background:#fff;
}
select{padding:6px 8px; font-size:13px;}
label.chk{font-size:13px; display:inline-flex; align-items:center; gap:4px; cursor:pointer;}
.row{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}

/* ---------- 푸터 ---------- */
.site-foot{
  border-top:1px solid var(--line); background:#fff; color:var(--muted);
  font-size:13px; padding:22px 18px 40px;
}
.site-foot .inner{max-width:1040px; margin:0 auto;}
.site-foot nav{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:10px;}
.site-foot a{color:var(--muted);}

/* ---------- 광고 자리 ---------- */
.ad-slot{
  max-width:1040px; margin:0 auto 16px; min-height:0;
}

/* ---------- 구절 상세 페이지 ---------- */
.crumb{font-size:12.5px; color:var(--muted); margin-bottom:10px;}
.crumb a{color:var(--muted);}
.verse-head{font-size:14px; color:var(--muted); margin:0 0 18px;}
.verse-box{
  background:#f5f9fd; border:1px solid #c3d2e0; border-radius:10px;
  padding:16px 18px; margin-bottom:22px;
}
.verse-box .v1{font-size:20px; font-weight:700; letter-spacing:1.5px; color:#1c4f80;}
.verse-box .v1 .hj{font-size:14px; font-weight:400; color:#6b7885; margin-left:8px; letter-spacing:1px;}
.verse-box .v2{font-size:15px; color:#2c3a47; margin-top:8px; line-height:1.65;}

.hanja-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:10px; margin:0 0 20px;
}
.hanja-card{background:#f7f9fb; border:1px solid var(--line); border-radius:8px; padding:12px 14px;}
.hanja-card .g{font-size:28px; line-height:1.2; font-family:Batang,"바탕",serif;}
.hanja-card .r{font-size:13.5px; color:#33475c; margin-top:2px; font-weight:700;}
.hanja-card .u{font-size:12.5px; color:var(--muted); margin-top:5px;}

.story{
  border-left:3px solid var(--accent); background:#fbfcfe;
  padding:14px 18px; border-radius:0 8px 8px 0; margin:0 0 20px;
}
.story p{margin:0 0 10px; line-height:1.85;}
.story p:last-child{margin-bottom:0;}

.make-cta{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:#f5f9fd; border:1px solid #c3d2e0; border-radius:10px;
  padding:16px 18px; margin:0 0 20px; flex-wrap:wrap;
}
.make-cta .t{font-size:15px; font-weight:700;}
.make-cta .s{font-size:13px; color:var(--muted); margin-top:2px;}

.verse-nav{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:14px; font-size:14px;
}
.verse-nav span{color:var(--muted);}

.booklist{list-style:none; padding:0; margin:0;}
.booklist li{
  border-bottom:1px solid #f0f3f7; padding:13px 0; display:flex; gap:12px; align-items:flex-start;
}
.booklist li:last-child{border-bottom:none;}
.booklist .bt{font-weight:700; font-size:15px;}
.booklist .bm{font-size:13px; color:var(--muted); margin-top:1px;}
.booklist .bd{font-size:14px; margin-top:5px; line-height:1.65;}
.booklist .pin{
  flex:0 0 auto; font-size:11.5px; background:#eef4fa; color:var(--accent);
  border-radius:4px; padding:2px 8px; margin-top:3px;
}

/* ============================================================
   A4 원고지 시트
   ============================================================ */
#out{padding:6px 0 0; display:flex; flex-direction:column; align-items:center; gap:20px;}
.sheet{
  --c:14mm; --cb:20mm;
  width:210mm; height:297mm; background:#fff; position:relative;
  padding:12mm 12mm 10mm; box-shadow:0 3px 14px rgba(0,0,0,.16);
  display:flex; flex-direction:column; overflow:hidden;
  line-height:1.7;
}
.sheet.mj{font-family:Batang,"바탕",BatangChe,"Apple SD Gothic Neo",serif;}
.sh-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  border-bottom:2px solid #33475c; padding-bottom:2.5mm; margin-bottom:3.5mm;
}
.sh-title{font-size:12pt; font-weight:700; letter-spacing:.5px;}
.sh-title span{font-weight:400; font-size:9.5pt; color:#5a6673; margin-left:6px;}
.sh-meta{font-size:9pt; color:#333;}
.sh-meta b{font-weight:400;}
.sh-meta u{text-decoration:none; border-bottom:1px solid #999; display:inline-block; min-width:22mm;}
.sh-body{flex:1 1 auto; overflow:hidden;}

.banner{
  border:1px solid #c3d2e0; background:#f5f9fd; border-radius:2mm;
  padding:2.5mm 3.5mm; margin-bottom:3.5mm;
}
.banner .b1{font-size:12.5pt; font-weight:700; letter-spacing:1px;}
.banner .b1 .hj{font-size:9.5pt; color:#6b7885; font-weight:400; margin-left:5px; letter-spacing:0;}
.banner .b2{font-size:9pt; color:#3a4652; margin-top:1.2mm; line-height:1.45;}
.banner .b3{
  font-size:9pt; color:#1c5c9c; margin-top:1.5mm; padding-top:1.5mm;
  border-top:1px dashed #c3d2e0; line-height:1.45;
}
.sec{margin-bottom:6mm;}
.lb{
  font-size:8.5pt; color:#33475c; font-weight:700; margin-bottom:1.8mm;
  border-left:3px solid var(--accent); padding-left:2mm;
}
.lb em{font-style:normal; font-weight:400; color:#7a8896; margin-left:5px; font-size:8pt;}

.grid{display:block; width:fit-content; margin:0 auto;}
.grid.blank{margin-top:5mm;}
.grow{display:flex;}
.cell{
  border:1px solid var(--grid); margin:-1px 0 0 -1px;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; flex:0 0 auto;
  line-height:1; font-weight:400;
}
.grid.sm  .cell{width:var(--c);  height:var(--c);  font-size:calc(var(--c)*.66);}
.grid.big .cell{width:var(--cb); height:var(--cb); font-size:calc(var(--cb)*.66);}
.cell.cross::before,.cell.cross::after{content:""; position:absolute; background:var(--gridsoft);}
.cell.cross::before{left:0; right:0; top:50%; height:1px; transform:translateY(-.5px);}
.cell.cross::after{top:0; bottom:0; left:50%; width:1px; transform:translateX(-.5px);}
.cell .ch{position:relative; z-index:1;}
.trace .ch{color:var(--trace);}
.sh-foot{
  margin-top:auto; display:flex; justify-content:space-between;
  font-size:8pt; color:#8d99a5; border-top:1px solid #dde3e9; padding-top:2mm;
}

/* ---------- 좁은 화면 ---------- */
@media (max-width:900px){
  .sheet{transform:scale(.62); transform-origin:top center; margin-bottom:-110mm;}
  .site-nav{width:100%; margin-left:0;}
}

/* ---------- 인쇄 ---------- */
@media print{
  @page{size:A4; margin:0;}
  html,body{background:#fff;}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
  .site-head, .site-foot, .ad-slot, .noprint{display:none !important;}
  .wrap{max-width:none; padding:0;}
  #out{padding:0; gap:0; display:block;}
  .sheet{
    box-shadow:none; margin:0 auto; transform:none;
    page-break-after:always; break-after:page;
    page-break-inside:avoid; break-inside:avoid;
  }
  .sheet:last-child{page-break-after:auto; break-after:auto;}
}