/* 영작반 5개 페이지 공용 스타일 — 초등부터 전문반까지 함께 쓰므로 연출을 절제한다 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#1a2233;--ink2:#3d4d60;--gray:#6b7a90;--light:#f4f7fa;
  --font:'Pretendard','Apple SD Gothic Neo',system-ui,sans-serif;
  --green:#059669;--green-lt:#f0fdf4;--green-br:#a7f3d0;
  --teal-lt:#ecfeff;--teal-br:#a5f3fc;
  --amber-lt:#fffbeb;--amber-br:#fde68a;
  --red:#dc2626;--red-lt:#fef2f2;--red-br:#fecaca;
  --wr1:#0d9488;--wr2:#115e59;
  --sh-sm:3px 3px 0 var(--ink);--sh-md:5px 5px 0 var(--ink);
}
html{font-size:17px;scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:#f1f5f9;line-height:1.75;overflow-x:hidden}
button,input,textarea{font:inherit}
button{border:0;cursor:pointer}

/* HEADER — grammar-hub.css와 같은 K웹툰(잉크선) 톤(26.09.13, writing.html 허브 개편) */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:3px solid var(--ink)}
.site-header-inner{max-width:1180px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:950}
.logo-icon{font-size:22px}
.logo span{color:var(--wr1)}
.header-back{margin-left:auto;padding:7px 14px;border-radius:10px;background:var(--light);color:var(--ink2);
  font-size:13px;font-weight:800;text-decoration:none;white-space:nowrap}
.header-back + .header-back{margin-left:0}
.header-back:hover{background:#e2e8f0}

/* HERO — 잉크선+하드 그림자로 grammar.html/reading.html 허브와 통일(26.09.13) */
.hero{max-width:1180px;margin:0 auto;padding:20px 18px 0}
.hero-card{border-radius:18px;border:3px solid var(--ink);box-shadow:var(--sh-md);padding:26px 24px;color:#fff;background:linear-gradient(135deg,var(--wr1),var(--wr2))}
.hero-badge{display:inline-block;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.22);
  font-size:12px;font-weight:800;margin-bottom:10px}
.hero-title{font-size:26px;font-weight:950;line-height:1.35}
.hero-sub{font-size:14px;opacity:.92;margin-top:6px}
.hero-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.hero-chip{padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.2);font-size:12px;font-weight:700}

/* LAYOUT */
.page-body{max-width:1180px;margin:0 auto;padding:18px}
.main-wrap{min-width:0}
.card{background:#fff;border:1.5px solid #e2e8f0;border-radius:16px;padding:22px}

/* HUB 카드(writing.html 전용) — grammar-hub.css .hub-card와 같은 잉크선+그림자+호버 리프트.
   기존 .card(레슨 페이지 공용, 위 줄)는 그대로 두고, 허브 네비게이션 카드만 별도 클래스로
   K웹툰 톤을 입힌다(26.09.13, 영작문 10년 365일 과정 설계 5장 개편). */
.hub-section-title{font-size:14px;font-weight:900;color:var(--ink2);margin:26px 0 4px}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:16px}
.hub-card{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;
  background:#fff;border:3px solid var(--ink);border-radius:16px;padding:22px;
  box-shadow:var(--sh-sm);transition:transform .12s,box-shadow .12s}
.hub-card:hover{background:var(--teal-lt);transform:translate(-2px,-2px);box-shadow:var(--sh-md)}
.hub-emoji{font-size:30px}
.hub-title{font-size:16px;font-weight:900;color:var(--ink)}
.hub-target{font-size:12.5px;font-weight:800;color:var(--wr2)}
.hub-desc{font-size:13px;color:var(--ink2);line-height:1.6}
.hub-lock{display:inline-block;margin-top:2px;font-size:11px;font-weight:800;color:var(--gray)}

/* 인트로 */
.wr-intro{text-align:center;padding:20px 8px}
.wr-intro-emoji{font-size:56px}
.wr-intro h2{font-size:24px;font-weight:950;margin:10px 0 6px}
.wr-intro p{font-size:15px;color:var(--ink2)}
.wr-axes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:18px 0;text-align:left}
.wr-axis{background:var(--light);border:1.5px solid #e2e8f0;border-radius:12px;padding:13px 15px}
.wr-axis b{display:block;font-size:14px;font-weight:900;color:var(--wr2);margin-bottom:3px}
.wr-axis span{font-size:12.5px;color:var(--gray);line-height:1.6}
.wr-saved{background:var(--teal-lt);border:1.5px solid var(--teal-br);border-radius:12px;padding:12px 14px;
  font-size:13px;color:#0e7490;margin:14px 0;font-weight:700;text-align:left;line-height:1.7}
.wr-warn{background:var(--amber-lt);border:1.5px solid var(--amber-br);border-radius:12px;padding:12px 14px;
  font-size:13px;color:#78350f;margin:14px 0;font-weight:700;text-align:left;line-height:1.7}
.wr-note{text-align:left;background:var(--amber-lt);border:1.5px solid var(--amber-br);border-radius:14px;
  padding:14px 16px;margin:14px 0;font-size:13px;color:#78350f;line-height:1.8}

/* 문항 */
.wr-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.wr-phase{font-size:13px;font-weight:900;color:var(--wr2)}
.wr-count{font-size:13px;font-weight:800;color:var(--gray)}
.wr-bar{height:7px;border-radius:999px;background:#e9edf3;overflow:hidden;margin-bottom:18px}
.wr-bar-fill{height:100%;background:linear-gradient(90deg,var(--wr1),var(--wr2));transition:width .2s}
.wr-q{font-size:19px;font-weight:850;color:var(--ink);line-height:1.6;margin-bottom:14px}
.wr-prompt-text{font-size:15px;color:var(--ink2);line-height:1.8;margin-bottom:12px}
.wr-given{background:#f0fdfa;border:2px solid #99f6e4;border-radius:14px;padding:16px 18px;margin-bottom:14px;
  font-size:17px;font-weight:800;color:var(--wr2);line-height:1.9}
.wr-input{width:100%;padding:14px 16px;border-radius:14px;border:2px solid #e2e8f0;background:#fff;
  color:var(--ink);font-size:16px;line-height:1.8;resize:vertical}
.wr-input:focus{outline:none;border-color:var(--wr1)}
.wr-input-lg{min-height:280px}
.wr-hint{font-size:12.5px;color:var(--gray);margin-top:8px;text-align:right}
.wr-cond{text-align:left;background:var(--light);border:1.5px solid #e2e8f0;border-radius:14px;padding:14px 16px;margin:12px 0}
.wr-cond-title{font-size:13px;font-weight:900;color:var(--ink2);margin-bottom:6px}
.wr-cond li{list-style:none;font-size:13.5px;color:var(--ink2);line-height:1.9;padding-left:16px;position:relative}
.wr-cond li::before{content:'·';position:absolute;left:5px;font-weight:950;color:var(--wr1)}

/* 쓰기 전 계획(planning) 힌트 — 기본 접힘, 강제 아님(완주율 영향 최소화) */
.wr-plan{text-align:left;background:#fff;border:1.5px dashed #cbd5e1;border-radius:14px;padding:12px 16px;margin:12px 0}
.wr-plan summary{font-size:13.5px;font-weight:800;color:var(--ink2);cursor:pointer}
.wr-plan ol{margin:10px 0 2px 18px;padding:0}
.wr-plan li{font-size:13px;color:var(--ink2);line-height:1.85}

.qz-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.qz-opt{padding:16px 14px;border-radius:14px;background:#fff;border:2px solid #e2e8f0;color:var(--ink);
  font-size:16px;font-weight:800;text-align:center;transition:.12s}
.qz-opt:hover{border-color:var(--wr1);background:#f0fdfa}

/* 단계 전환 */
.wr-bridge{text-align:center;padding:26px 10px}
.wr-bridge-emoji{font-size:48px}
.wr-bridge h3{font-size:20px;font-weight:950;margin:10px 0 6px}
.wr-bridge p{font-size:14px;color:var(--ink2);line-height:1.8}

/* 결과 */
.wr-result{text-align:center;padding:16px 4px}
.wr-level{font-size:56px;font-weight:950;color:var(--wr2);line-height:1.1}
.wr-level-name{font-size:20px;font-weight:900;color:var(--ink);margin-top:4px}
.wr-cefr{display:inline-block;margin-top:8px;padding:4px 12px;border-radius:999px;background:#f0fdfa;
  border:1.5px solid #99f6e4;color:var(--wr2);font-size:12.5px;font-weight:800}
.wr-axes-box{text-align:left;background:var(--light);border:1.5px solid #e2e8f0;border-radius:14px;padding:16px 18px;margin:18px 0}
.wr-axis-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.wr-axis-row:last-child{margin-bottom:0}
.wr-axis-name{flex:0 0 130px;font-size:13px;font-weight:800;color:var(--ink2)}
.wr-axis-bar{flex:1;height:9px;border-radius:999px;background:#e9edf3;overflow:hidden}
.wr-axis-bar i{display:block;height:100%;background:var(--wr1)}
.wr-axis-val{flex:0 0 28px;text-align:right;font-size:13px;font-weight:900;color:var(--wr2)}
.wr-axis-low .wr-axis-name{color:#b45309}
.wr-axis-low .wr-axis-bar i{background:#f59e0b}
.wr-axis-low .wr-axis-val{color:#b45309}
.wr-why,.wr-plan{text-align:left;background:var(--light);border:1.5px solid #e2e8f0;border-radius:14px;padding:16px 18px;margin:14px 0}
.wr-why-title,.wr-plan-title{font-size:13px;font-weight:900;color:var(--ink2);margin-bottom:8px}
.wr-why li,.wr-plan li{list-style:none;font-size:14px;color:var(--ink2);line-height:1.85;padding-left:18px;position:relative}
.wr-why li::before,.wr-plan li::before{content:'·';position:absolute;left:6px;font-weight:950;color:var(--wr1)}
.wr-k{text-align:left;background:var(--red-lt);border:1.5px solid var(--red-br);border-radius:14px;padding:16px 18px;margin:14px 0}
.wr-k-title{font-size:13px;font-weight:900;color:#991b1b;margin-bottom:8px}
.wr-k-item{padding:9px 0;border-top:1px solid var(--red-br)}
.wr-k-item:first-of-type{border-top:0}
.wr-k-item b{display:block;font-size:14.5px;font-weight:900;color:#991b1b}
.wr-k-item span{display:block;font-size:13px;color:var(--ink2);line-height:1.7}
.wr-k-item em{display:block;font-style:normal;font-size:12.5px;font-weight:800;color:var(--green);margin-top:2px}
.wr-parent{text-align:left;background:var(--teal-lt);border:1.5px solid var(--teal-br);border-radius:14px;padding:16px 18px;margin:14px 0}
.wr-parent-title{font-size:13px;font-weight:900;color:#0e7490;margin-bottom:6px}
.wr-parent p{font-size:14px;color:#0e5c73;line-height:1.85}

.lc-btn{display:block;width:100%;padding:15px;border-radius:14px;background:var(--light);color:var(--ink2);
  font-size:16px;font-weight:900;margin-top:10px;text-align:center;text-decoration:none}
.lc-btn-ok{background:var(--wr1);color:#fff}
.lc-btn-ok:hover{background:var(--wr2)}

/* 준비 중 안내 (초·중·고·전문 학습 페이지) */
.wr-soon{text-align:center;padding:26px 10px}
.wr-soon-emoji{font-size:56px}
.wr-soon h2{font-size:23px;font-weight:950;margin:10px 0 8px}
.wr-soon > p{font-size:15px;color:var(--ink2);line-height:1.85;max-width:620px;margin:0 auto}
.wr-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:22px 0;text-align:left}
.wr-level-card{background:#fff;border:1.5px solid #e2e8f0;border-radius:14px;padding:15px 17px}
.wr-level-card b{display:block;font-size:15px;font-weight:950;color:var(--wr2)}
.wr-level-card em{display:block;font-style:normal;font-size:12px;font-weight:800;color:var(--gray);margin:2px 0 6px}
.wr-level-card span{font-size:13px;color:var(--ink2);line-height:1.7}
.wr-loop{text-align:left;background:var(--light);border:1.5px solid #e2e8f0;border-radius:14px;padding:16px 18px;margin:18px 0}
.wr-loop-title{font-size:13px;font-weight:900;color:var(--ink2);margin-bottom:8px}
.wr-loop li{list-style:none;font-size:13.5px;color:var(--ink2);line-height:1.9}

.wr-spinner{width:34px;height:34px;border:4px solid #e2e8f0;border-top-color:var(--wr1);border-radius:50%;margin:20px auto;animation:wr-spin .8s linear infinite}
@keyframes wr-spin{to{transform:rotate(360deg)}}
html.motion-off .wr-spinner{animation:none;border-top-color:#e2e8f0}

@media (max-width:640px){
  html{font-size:16px}
  .hero-title{font-size:22px}
  .wr-level{font-size:46px}
  .qz-opts{grid-template-columns:1fr}
  .wr-axis-name{flex:0 0 96px;font-size:12px}
}