/* ============================================================
   청년회 분반지 공통 테마  ·  단일 브랜드색(차분한 송이그린)
   .wsroot.member  /  body.leader  로 버전 구분
   ============================================================ */
:root{
  --brand:#2f5d57; --brand2:#244a45; --brand-ink:#1c3a35;
  --gold:#bd9a4f; --paper:#ffffff; --soft:#f4f7f5; --soft2:#eef3f0;
  --line:#e3e6e3; --ink:#262a29; --ink2:#565c59; --mute:#9aa19d;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.wsroot{
  font-family:"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",sans-serif;
  color:var(--ink); background:#d4d8d4; line-height:1.5; letter-spacing:-.1px;
}
@page{ size:A4; margin:0; }
.page{
  width:210mm; height:297mm; background:var(--paper);
  margin:0 auto; padding:13mm 14mm 11mm; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}

/* ---------- 헤더 (단일 브랜드색) ---------- */
.hd{ position:relative; border-radius:13px; overflow:hidden; color:#fff;
     background:linear-gradient(135deg,var(--brand) 0%,var(--brand-ink) 100%);
     padding:13px 17px; display:flex; align-items:center; gap:14px; }
.hd::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
     background:var(--gold); opacity:.85; }
.wsroot.member .hd::after{ background:rgba(255,255,255,.4); }
.hd .num{ flex:none; width:50px; height:50px; border-radius:12px;
     background:rgba(255,255,255,.15); border:1.5px solid rgba(255,255,255,.45);
     display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
.hd .num b{ font-size:20px; font-weight:800; }
.hd .num span{ font-size:8px; opacity:.85; margin-top:3px; letter-spacing:2px; }
.hd .meta{ flex:1; min-width:0; }
.hd .tag{ display:inline-block; font-size:9.5px; letter-spacing:.3px; background:rgba(255,255,255,.18);
     padding:2px 9px; border-radius:20px; margin-bottom:5px; }
.hd h1{ font-size:18px; font-weight:800; letter-spacing:-.5px; }
.hd .sub{ font-size:11px; opacity:.92; margin-top:3px; }
.hd .ver{ flex:none; align-self:flex-start; text-align:right; font-size:9px; opacity:.9; }
.hd .ver b{ display:block; font-size:11.5px; letter-spacing:1px; margin-bottom:1px; }

/* ---------- 리더 목표/단계 바 ---------- */
.obj{ display:flex; gap:9px; margin-top:10px; }
.obj .o{ flex:1; border:1px solid var(--line); border-left:4px solid var(--brand);
     border-radius:9px; padding:7px 11px; background:var(--soft); }
.obj .o b{ font-size:9.5px; color:var(--brand-ink); display:block; margin-bottom:2px; }
.obj .o span{ font-size:10.5px; color:var(--ink2); }
.obj .o.rel{ border-left-color:var(--gold); background:#faf6ec; }
.obj .o.rel b{ color:#8f6f24; }

/* ---------- 리더 타임라인 ---------- */
.tl{ display:flex; gap:6px; margin-top:10px; }
.tl .t{ flex:1; text-align:center; border:1px solid var(--line); border-radius:8px;
     padding:6px 4px; background:#fff; }
.tl .t .m{ font-size:9px; color:#fff; background:var(--brand); border-radius:12px; padding:1px 8px; display:inline-block; }
.tl .t .lab{ font-size:9.5px; margin-top:4px; color:var(--ink); font-weight:700; }
.tl .t .d{ font-size:8.5px; color:var(--ink2); margin-top:1px; }

/* ---------- 섹션 카드 ---------- */
.sec{ border:1px solid var(--line); border-radius:11px; padding:10px 13px 12px; margin-top:10px; }
.sec.soft{ background:var(--soft); }
.sec.tint{ background:var(--soft2); border-color:#d8e4de; }
.sec.gold{ background:#faf6ec; border-color:#ecdcb4; }
.sh{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.sh .ic{ width:22px; height:22px; border-radius:7px; background:var(--brand); color:#fff;
     display:flex; align-items:center; justify-content:center; font-size:12px; flex:none; }
.sh.g .ic{ background:var(--gold); }
.sh h2{ font-size:12.5px; font-weight:800; letter-spacing:-.3px; }
.sh .hint{ margin-left:auto; font-size:9.5px; color:var(--mute); }

p.lead{ font-size:10.5px; color:var(--ink2); margin:1px 0 5px; }
ul{ list-style:none; } li{ font-size:10.8px; margin:4px 0; padding-left:15px; position:relative; }
li::before{ content:""; position:absolute; left:3px; top:7px; width:5px; height:5px; border-radius:50%; background:var(--brand); }

/* 발문/예상답변 (리더) */
.ask{ font-size:10.6px; margin:5px 0 2px; padding-left:16px; position:relative; font-weight:600; }
.ask::before{ content:"Q"; position:absolute; left:0; top:0; font-weight:800; color:var(--brand); font-size:10px; }
.exp{ font-size:9.7px; color:var(--ink2); background:#fff; border:1px dashed #d2dad6;
      border-radius:6px; padding:5px 8px; margin:2px 0 4px; }
.exp b{ color:var(--brand-ink); }

/* 쓰기 영역 */
.lines{ background:repeating-linear-gradient(transparent,transparent 21px,var(--line) 21px,var(--line) 22px);
        min-height:44px; margin-top:6px; border-radius:6px; }
.lines.h66{ min-height:66px; } .lines.h88{ min-height:88px; }
.wbox{ border:1px dashed #cdd3cf; border-radius:8px; min-height:50px; margin-top:6px; background:#fffefb; }
.wbox.tall{ min-height:140px; }
.inb{ display:inline-block; min-width:84px; border-bottom:1.5px solid var(--gold); height:14px; margin:0 3px; vertical-align:baseline; }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

table{ width:100%; border-collapse:collapse; margin-top:6px; font-size:10.3px; }
th,td{ border:1px solid var(--line); padding:5px 7px; text-align:left; }
th{ background:var(--soft2); color:var(--brand-ink); font-weight:700; font-size:10px; }
td.fill{ background:#fffdf8; height:24px; }

.check{ display:flex; flex-wrap:wrap; gap:5px 14px; margin-top:5px; }
.check span{ font-size:10px; padding-left:18px; position:relative; color:var(--ink2); }
.check span::before{ content:""; position:absolute; left:0; top:1px; width:12px; height:12px;
      border:1.4px solid var(--brand); border-radius:3px; }

.roles{ display:flex; gap:5px; flex-wrap:wrap; margin-top:5px; }
.role-chip{ font-size:9.5px; border:1px dashed var(--brand); color:var(--brand-ink); border-radius:6px; padding:3px 8px; }
.role-chip b{ font-weight:800; }

.foot{ display:flex; gap:10px; margin-top:10px; }
.foot .a{ flex:1.3; } .foot .b{ flex:1; }
.mini h3{ font-size:10.5px; color:var(--brand-ink); font-weight:800; margin-bottom:4px; }

.tips{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:7px 9px; }
.tips li{ font-size:10px; }

.pagefoot{ margin-top:auto; display:flex; justify-content:space-between; align-items:flex-end; padding-top:8px; }
.page > .brand{ margin-top:auto; }
.brand{ font-size:8.5px; color:var(--mute); letter-spacing:.5px; }
.brand b{ color:var(--brand); }
.pgnum{ font-size:8.5px; color:var(--mute); letter-spacing:1px; }