/* 이어쓰기 — 모든 크기는 rem 기준. 어르신 모드는 html 글자 크기를 키워 화면 전체를 약 2배로 키운다. */
:root{
  --bg:#f6f5f1; --surface:#ffffff; --surface-2:#f0eee8; --line:#e2dfd6; --line-strong:#cfcbbf;
  --ink:#1f1e1b; --ink-2:#5f5c55; --ink-3:#7f7b71;
  --accent:#2f5fd0; --accent-soft:#e7eefc; --accent-ink:#ffffff;
  --human:#2f5fd0; --human-soft:#eaf0fd; --ai:#8a5a14; --ai-soft:#fbf2e2;
  --good:#2d7a4b; --good-soft:#e5f3ea; --warn:#b4541b; --warn-soft:#fbeee4;
  --radius:.8rem; --shadow:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.05);
  --tabbar:0px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#161614; --surface:#1f1f1c; --surface-2:#272723; --line:#34332e; --line-strong:#46443d;
    --ink:#eeece6; --ink-2:#b5b2a8; --ink-3:#97948a;
    --accent:#7aa2ff; --accent-soft:#22304f; --accent-ink:#0f1830;
    --human:#8fb0ff; --human-soft:#1f2a44; --ai:#e0b46a; --ai-soft:#3a2f1c;
    --good:#6cc28f; --good-soft:#1c3226; --warn:#f0a070; --warn-soft:#3a2619; --shadow:none;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:15px}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:1rem/1.6 "Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Hiragino Sans","Yu Gothic","Noto Sans JP",system-ui,sans-serif;-webkit-font-smoothing:antialiased;padding-bottom:var(--tabbar)}
button{font:inherit;color:inherit;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
.wrap{max-width:75rem;margin:0 auto;padding:0 1.067rem}
[hidden]{display:none!important}

/* 상단 */
.pilot{background:var(--surface-2);border-bottom:1px solid var(--line);color:var(--ink-2);font-size:.833rem;text-align:center;padding:.4rem 1rem}
header{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.bar{display:flex;align-items:center;gap:1rem;min-height:4rem}
.logo{font-weight:800;font-size:1.333rem;letter-spacing:-.02em;background:none;border:0;padding:0;white-space:nowrap}
.logo span{color:var(--accent)}
nav{display:flex;gap:.267rem;margin-left:.533rem}
nav button{background:none;border:0;padding:.533rem .8rem;border-radius:.533rem;color:var(--ink-2)}
nav button:hover{background:var(--surface-2);color:var(--ink)}
nav button.on{color:var(--ink);font-weight:700}
.bar .right{margin-left:auto;display:flex;align-items:center;gap:.533rem;font-size:.933rem;color:var(--ink-2);white-space:nowrap}
.plan-badge{font-size:.8rem;font-weight:700;padding:.133rem .533rem;border-radius:999px;background:var(--surface-2);color:var(--ink-2)}
.plan-badge.paid{background:var(--accent-soft);color:var(--accent)}
.elder-toggle{height:2.4rem;padding:0 .8rem;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--surface);font-weight:700;font-size:.9rem;white-space:nowrap}
.elder-toggle:hover{border-color:var(--accent);color:var(--accent)}

/* 공통 */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.side{display:flex;flex-direction:column;gap:1.067rem}
.panel{padding:1.467rem}
.panel h2{margin:0 0 .267rem;font-size:1.2rem}
.panel .sub{margin:0 0 1.2rem;color:var(--ink-2);font-size:.933rem}
.primary{width:100%;min-height:3.333rem;border:0;border-radius:.667rem;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:1.067rem}
.primary:hover{filter:brightness(1.05)}
.primary:disabled{opacity:.4;cursor:not-allowed}
.ghost{min-height:2.933rem;padding:0 1.067rem;border-radius:.667rem;border:1px solid var(--line-strong);background:var(--surface);font-weight:600}
.ghost.sm{min-height:2.4rem;padding:0 .8rem;font-size:.9rem}
.ghost.accent{border-color:var(--accent);color:var(--accent)}
.linkbtn{background:none;border:0;padding:0;color:var(--ink-3);font-size:.867rem;text-decoration:underline}
.meta{display:flex;flex-wrap:wrap;gap:.267rem .667rem;margin-top:.4rem;font-size:.833rem;color:var(--ink-3)}
.ratio-badge{display:inline-flex;align-items:center;padding:.067rem .533rem;border-radius:999px;background:var(--human-soft);color:var(--human);font-weight:600}
.empty{padding:2.4rem 1.333rem;text-align:center;color:var(--ink-3);list-style:none}
.empty .primary{width:auto;padding:0 1.467rem;min-height:2.933rem;margin-top:.8rem}
.tabs{display:flex;gap:2px;background:var(--surface-2);padding:3px;border-radius:.667rem}
.tabs button{border:0;background:none;padding:.4rem .8rem;border-radius:.533rem;font-size:.933rem;color:var(--ink-2);white-space:nowrap}
.tabs button.on{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:var(--shadow)}

/* 홈 */
.home{display:grid;grid-template-columns:minmax(0,1fr) 22.667rem;gap:1.6rem;padding:1.867rem 0 3.2rem}
.list-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:1.2rem 1.333rem 0}
.list-head h2{margin:0;font-size:1.2rem;white-space:nowrap}
.genres{display:flex;gap:.4rem;padding:.8rem 1.333rem 0;overflow-x:auto;scrollbar-width:none}
.chip{flex:none;border:1px solid var(--line-strong);background:none;border-radius:999px;padding:.333rem .8rem;font-size:.867rem;color:var(--ink-2)}
.chip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);font-weight:600}
.posts{list-style:none;margin:.8rem 0 0;padding:0 .533rem .533rem}
.post{display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;gap:.8rem;align-items:center;padding:.933rem .8rem;border-top:1px solid var(--line);cursor:pointer;border-radius:.533rem}
.post:first-child{border-top:0}
.post:hover{background:var(--surface-2)}
.rank{font-size:1.2rem;font-weight:800;color:var(--ink-3);text-align:center}
.post:nth-child(-n+3) .rank{color:var(--accent)}
.post h3{margin:0;font-size:1.033rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post p{margin:.133rem 0 0;font-size:.867rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.likes{font-size:.867rem;color:var(--ink-2);text-align:right;white-space:nowrap}
.likes b{display:block;font-size:1rem;color:var(--ink)}
.mine-tag{font-size:.733rem;font-weight:700;color:var(--accent-ink);background:var(--accent);border-radius:4px;padding:0 .333rem;margin-left:.4rem;vertical-align:2px}

.sns{display:flex;flex-direction:column;gap:.667rem}
.sns button{display:flex;align-items:center;justify-content:center;min-height:3.2rem;border-radius:.667rem;border:1px solid var(--line-strong);background:var(--surface);font-weight:600;font-size:1rem}
.sns button:hover{filter:brightness(.97)}
.sns .kakao{background:#FEE500;border-color:#FEE500;color:#191600}
.sns .naver{background:#03C75A;border-color:#03C75A;color:#fff}
.sns .facebook{background:#1877F2;border-color:#1877F2;color:#fff}
.sns .off{opacity:.45}
.devlogin{display:flex;gap:.4rem;margin-top:.8rem}
.devlogin input{flex:1;min-width:0;min-height:2.933rem;border-radius:.667rem;border:1px dashed var(--line-strong);background:var(--surface);padding:0 .8rem;font-size:1rem}
.fine{margin:.933rem 0 0;font-size:.8rem;color:var(--ink-3);text-align:center}

.elder-cta{display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem}
.elder-cta .aa{flex:none;width:3rem;height:3rem;border-radius:.667rem;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:800;font-size:1.333rem}
.elder-cta b{display:block}
.elder-cta span{font-size:.867rem;color:var(--ink-2)}
.elder-cta .ghost{margin-left:auto;flex:none}

.me{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.avatar{flex:none;width:2.933rem;height:2.933rem;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:800}
.me b{display:block}
.me small{color:var(--ink-3)}
.me .linkbtn{margin-left:auto}
.usage{margin-top:1.067rem;padding:.8rem .933rem;border-radius:.667rem;background:var(--surface-2)}
.usage-top{display:flex;justify-content:space-between;align-items:baseline;gap:.533rem;font-size:.867rem;color:var(--ink-2)}
.usage-top b{color:var(--ink);font-size:.933rem;white-space:nowrap}
.ubar{height:.533rem;border-radius:.267rem;background:var(--line);overflow:hidden;margin-top:.533rem}
.ubar i{display:block;height:100%;background:var(--accent);transition:width .3s}
.ubar.full i{background:var(--warn)}
.usage .linkbtn{margin-top:.533rem;color:var(--accent);font-weight:600;text-decoration:none}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.533rem;margin-top:.8rem}
.stats div{background:var(--surface-2);border-radius:.667rem;padding:.667rem;text-align:center}
.stats b{display:block;font-size:1.133rem}
.stats span{font-size:.8rem;color:var(--ink-3)}
.today{padding:1.2rem 1.467rem}
.today h3{margin:0 0 .4rem;font-size:.933rem;color:var(--ink-3);font-weight:600}
.today blockquote{margin:0;font-size:1.033rem;font-weight:600}

/* 내 서재 */
.lib{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:1.6rem;padding:1.867rem 0 3.2rem}
.lib-head{padding:1.2rem 1.333rem 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem}
.lib-head h2{margin:0;font-size:1.2rem}
.lib-head small{display:block;color:var(--ink-3);font-size:.867rem;font-weight:400}
.works{list-style:none;margin:.8rem 0 0;padding:0 .533rem .533rem}
.work{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.533rem 1.067rem;align-items:center;padding:1.067rem .8rem;border-top:1px solid var(--line)}
.work:first-child{border-top:0}
.work h3{margin:0;font-size:1.033rem;display:flex;align-items:center;gap:.533rem;min-width:0}
.work h3 .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work p{margin:.267rem 0 0;font-size:.9rem;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.status{flex:none;font-size:.767rem;font-weight:700;padding:.067rem .533rem;border-radius:999px}
.status.done{background:var(--good-soft);color:var(--good)}
.status.draft{background:var(--warn-soft);color:var(--warn)}
.work-actions{display:flex;gap:.4rem}
.bignum{display:grid;grid-template-columns:repeat(2,1fr);gap:.533rem}
.bignum div{background:var(--surface-2);border-radius:.667rem;padding:.8rem}
.bignum b{display:block;font-size:1.333rem}
.bignum span{font-size:.8rem;color:var(--ink-3)}

/* 결제 */
.pay{padding:1.867rem 0 3.2rem}
.pay-head{text-align:center;margin-bottom:1.467rem}
.pay-head h2{margin:0;font-size:1.6rem}
.pay-head p{margin:.4rem 0 0;color:var(--ink-2)}
.alert{display:inline-block;margin-top:.8rem;padding:.533rem .933rem;border-radius:.667rem;background:var(--warn-soft);color:var(--warn);font-weight:600;font-size:.933rem}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media (max-width:1100px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plan{position:relative;text-align:left;padding:1.467rem;border-radius:.933rem;border:1.5px solid var(--line-strong);background:var(--surface);display:flex;flex-direction:column;gap:.267rem}
.plan:hover{border-color:var(--accent)}
.plan.on{border:2px solid var(--accent);background:var(--accent-soft)}
.plan.current{cursor:default;opacity:.75}
.plan .pname{font-weight:700;font-size:1.067rem}
.plan .price{font-size:1.733rem;font-weight:800;letter-spacing:-.02em}
.plan .price small{font-size:.933rem;font-weight:500;color:var(--ink-2)}
.plan ul{margin:.667rem 0 0;padding:0;list-style:none;font-size:.933rem;color:var(--ink-2)}
.plan li{padding:.267rem 0 .267rem 1.333rem;position:relative}
.plan li::before{content:"";position:absolute;left:.133rem;top:.733rem;width:.6rem;height:.333rem;border-left:2px solid var(--good);border-bottom:2px solid var(--good);transform:rotate(-45deg)}
.plan .ribbon{position:absolute;top:-.733rem;right:1.067rem;background:var(--accent);color:var(--accent-ink);font-size:.8rem;font-weight:700;padding:.133rem .667rem;border-radius:999px}
.plan .cur{font-size:.833rem;color:var(--ink-3);font-weight:600}
.checkout{display:grid;grid-template-columns:minmax(0,1fr) 22.667rem;gap:1.067rem;margin-top:1.333rem}
.methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.533rem}
.method{min-height:3.2rem;border-radius:.667rem;border:1.5px solid var(--line-strong);background:var(--surface);font-weight:600}
.method.on{border-color:var(--accent);background:var(--accent-soft)}
.summary dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.533rem .8rem;font-size:.933rem}
.summary dt{color:var(--ink-3)}
.summary dd{margin:0;text-align:right;font-weight:600}
.summary .total{border-top:1px solid var(--line);margin-top:.8rem;padding-top:.8rem;display:flex;justify-content:space-between;align-items:baseline;gap:.533rem}
.summary .total b{font-size:1.467rem;white-space:nowrap}
.agree{display:flex;gap:.667rem;align-items:flex-start;margin:1.067rem 0;font-size:.9rem;color:var(--ink-2)}
.agree input{width:1.333rem;height:1.333rem;margin:.067rem 0 0;accent-color:var(--accent);flex:none}
.note{font-size:.833rem;color:var(--ink-3);margin:.667rem 0 0}
.cancel-row{text-align:center;margin-top:1.333rem}

/* 모달 */
.scrim{position:fixed;inset:0;background:rgba(10,10,8,.45);display:none;align-items:center;justify-content:center;padding:1rem;z-index:40}
.scrim.open{display:flex}
.modal{width:min(37.333rem,100%);max-height:calc(100vh - 2rem);overflow:auto;background:var(--surface);border-radius:1.067rem;padding:1.6rem;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal h2{margin:0 0 .267rem;font-size:1.333rem}
.modal .sub{margin:0 0 1.2rem;color:var(--ink-2);font-size:.933rem}
.steps{display:flex;gap:.4rem;margin-bottom:1.067rem}
.steps i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.steps i.on{background:var(--accent)}
.options{display:grid;gap:.667rem}
.opt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.267rem .8rem;text-align:left;padding:.933rem 1.067rem;border-radius:.8rem;border:1.5px solid var(--line-strong);background:var(--surface)}
.opt:hover{border-color:var(--accent)}
.opt.on{border-color:var(--accent);background:var(--accent-soft)}
.opt b{font-size:1.067rem}
.opt span{grid-column:1;font-size:.9rem;color:var(--ink-2)}
.opt em{grid-row:1/span 2;grid-column:2;align-self:center;font-style:normal;font-size:.833rem;color:var(--ink-3);white-space:nowrap}
.field{display:grid;gap:.4rem;margin-top:1.067rem}
.field label{font-size:.9rem;font-weight:600;color:var(--ink-2)}
.field input,.field select{min-height:3.067rem;border-radius:.667rem;border:1px solid var(--line-strong);background:var(--surface);padding:0 .8rem;font-size:max(16px,1rem)}
.modal-foot{display:flex;gap:.533rem;justify-content:flex-end;margin-top:1.333rem}
.modal-foot .primary{width:auto;min-height:2.933rem;padding:0 1.467rem;font-size:1rem}
.success{text-align:center}
.success .ok{width:3.733rem;height:3.733rem;border-radius:50%;background:var(--good-soft);margin:.267rem auto .933rem;position:relative}
.success .ok::after{content:"";position:absolute;left:32%;top:34%;width:36%;height:18%;border-left:3px solid var(--good);border-bottom:3px solid var(--good);transform:rotate(-45deg)}
.reader p{white-space:pre-wrap;line-height:1.85;margin:0 0 .8rem}
.reader .a{color:var(--ink-2);background:var(--ai-soft);border-radius:4px}

/* 글쓰기 */
.write{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:1.6rem;padding:1.6rem 0 3.2rem}
.write-head{display:flex;flex-wrap:wrap;align-items:center;gap:.533rem;padding:1.067rem 1.333rem;border-bottom:1px solid var(--line)}
.write-head h2{margin:0;font-size:1.133rem;margin-right:auto}
.tag{font-size:.833rem;padding:.2rem .667rem;border-radius:999px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.tag.ratio{display:none;background:var(--human-soft);color:var(--human);font-weight:700}
.story{padding:1.333rem;display:flex;flex-direction:column;gap:.933rem;min-height:18.667rem}
.turn{border-left:3px solid;padding:.267rem 0 .267rem .933rem}
.turn .who{font-size:.8rem;font-weight:700;margin-bottom:.133rem}
.turn p{margin:0;white-space:pre-wrap;font-size:1.067rem;line-height:1.85}
.turn.human{border-color:var(--human)} .turn.human .who{color:var(--human)}
.turn.ai{border-color:var(--ai)} .turn.ai .who{color:var(--ai)}
.turn.seed{border-color:var(--line-strong)} .turn.seed .who{color:var(--ink-3)}
.typing{color:var(--ink-3);font-size:.933rem;padding-left:1.133rem}
.typing::after{content:"";animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.retry{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border-radius:.667rem;background:var(--warn-soft);color:var(--warn);font-size:.933rem}
.retry .ghost{margin-left:auto;flex:none}
.composer{border-top:1px solid var(--line);padding:1.067rem 1.333rem 1.333rem;background:var(--surface);border-radius:0 0 var(--radius) var(--radius)}
.composer textarea{width:100%;min-height:7.333rem;resize:vertical;border-radius:.667rem;border:1px solid var(--line-strong);background:var(--surface);padding:.8rem .933rem;line-height:1.7;font-size:max(16px,1.067rem)}
.composer textarea:focus,.field input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.composer-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.533rem .667rem;margin-top:.667rem}
.count{font-size:.867rem;color:var(--ink-3);margin-right:auto}
.count.over{color:var(--warn);font-weight:700}
.left{font-size:.833rem;color:var(--ink-3)}
.composer .primary{width:auto;min-height:2.933rem;padding:0 1.333rem;font-size:1rem}
.side-card{padding:1.2rem 1.333rem}
.side-card h3{margin:0 0 .667rem;font-size:.933rem;color:var(--ink-3);font-weight:700}
.meter{height:.667rem;border-radius:.333rem;background:var(--ai-soft);overflow:hidden;display:flex}
.meter i{background:var(--human);height:100%;transition:width .4s}
.meter-legend{display:flex;justify-content:space-between;font-size:.867rem;margin-top:.4rem}
.meter-legend b{font-size:1.333rem}
.coach p{margin:.4rem 0 0;font-size:.933rem}
.coach .g{color:var(--good);font-weight:700;font-size:.867rem}
.coach .w{color:var(--warn);font-weight:700;font-size:.867rem;margin-top:.667rem}
.challenge{background:var(--surface-2);border-radius:.667rem;padding:.8rem .933rem;font-size:.933rem;font-weight:600}
.challenge small{display:block;font-weight:400;color:var(--ink-3);font-size:.8rem;margin-bottom:.133rem}

/* 하단 탭 · 알림 */
.tabbar{display:none}
.toast{position:fixed;left:50%;bottom:calc(1.6rem + var(--tabbar));transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:.667rem 1.2rem;border-radius:.667rem;font-size:.933rem;opacity:0;transition:.25s;pointer-events:none;z-index:50;max-width:calc(100% - 2rem);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 모바일 ---------- */
@media (max-width:860px){
  :root{--tabbar:calc(4rem + env(safe-area-inset-bottom))}
  nav{display:none}
  .home,.write,.lib{grid-template-columns:minmax(0,1fr);padding-top:1.067rem}
  .home .side{order:-1}
  .plans,.checkout{grid-template-columns:1fr}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;height:var(--tabbar);padding-bottom:env(safe-area-inset-bottom);background:var(--surface);border-top:1px solid var(--line)}
  .tabbar button{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.767rem;color:var(--ink-3)}
  .tabbar button.on{color:var(--accent);font-weight:700}
  .tabbar svg{width:1.467rem;height:1.467rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  body.writing{--tabbar:0px}
  body.writing .tabbar{display:none}
  .write{padding-bottom:1.067rem}
  .tag.ratio{display:inline-block}
  .meter-card{display:none}
  .composer{position:sticky;bottom:0;z-index:4;padding:.667rem .8rem calc(.667rem + env(safe-area-inset-bottom));box-shadow:0 -6px 16px rgba(0,0,0,.06)}
  .composer textarea{min-height:5rem;max-height:40vh}
  .composer-foot{display:grid;grid-template-columns:1fr 1fr;gap:.533rem}
  .composer-foot .count{margin:0}
  .composer-foot .left{text-align:right}
  .composer-foot .ghost,.composer .composer-foot .primary{width:100%;padding:0 .533rem}
  .story{padding:1.067rem;min-height:13.333rem}
  .write-head{padding:.8rem 1.067rem}
  .scrim{align-items:flex-end;padding:0}
  .modal{width:100%;max-height:92vh;border-radius:1.2rem 1.2rem 0 0;padding:1.333rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom))}
  .modal-foot{position:sticky;bottom:calc(-1.2rem - env(safe-area-inset-bottom));background:var(--surface);padding:.8rem 0 .267rem;margin-bottom:-.267rem}
  .modal-foot>*{flex:1}
}
@media (max-width:480px){
  .wrap{padding:0 .8rem}
  .bar{min-height:3.6rem;gap:.533rem}
  .pilot{font-size:.767rem}
  .list-head{flex-direction:column;align-items:stretch;gap:.667rem}
  .list-head .tabs button{flex:1}
  .post{grid-template-columns:1.6rem minmax(0,1fr) auto;gap:.667rem;padding:.8rem .533rem}
  .rank{font-size:1.067rem}
  .likes{font-size:.767rem}
  .likes b{font-size:.9rem}
  .bar .right .uname{display:none}
  .work{grid-template-columns:1fr}
  .work-actions .ghost{flex:1}
  .panel{padding:1.2rem}
  .pay-head h2{font-size:1.4rem}
  .elder-cta{flex-wrap:wrap}
  .elder-cta .ghost{margin-left:0;width:100%}
}


/* ---------- 이어쓰기 대결 ---------- */
.chal{padding:1.867rem 0 3.2rem;max-width:60rem;margin:0 auto}
.chal-intro{margin-bottom:1.2rem}
.chal-intro h2{margin:0;font-size:1.6rem}
.chal-intro p{margin:.4rem 0 0;color:var(--ink-2)}
.chal-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.067rem}
.chal-card{display:flex;flex-direction:column;gap:.533rem;text-align:left;padding:1.333rem;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.chal-card:hover{border-color:var(--accent)}
.chal-card h3{margin:0;font-size:1.133rem}
.chal-card blockquote{margin:0;padding:.667rem .8rem;border-left:3px solid var(--ai);background:var(--ai-soft);border-radius:0 .533rem .533rem 0;font-size:.933rem;line-height:1.7}
.chal-card .clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.chal-card .foot{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;font-size:.867rem;color:var(--ink-2);margin-top:auto}
.chal-card .lead{margin-left:auto;color:var(--ink);font-weight:600}
.chal-card.closed{opacity:.85}
.chal-badges{display:flex;flex-wrap:wrap;gap:.4rem}
.badge{font-size:.767rem;font-weight:700;padding:.133rem .6rem;border-radius:999px;background:var(--surface-2);color:var(--ink-2)}
.badge.live{background:var(--good-soft);color:var(--good)}
.badge.end{background:var(--surface-2);color:var(--ink-3)}
.badge.mine{background:var(--accent-soft);color:var(--accent)}
.back{background:none;border:0;padding:.4rem 0;margin-bottom:.533rem;color:var(--ink-2);font-weight:600}
.chal-hero{padding:1.6rem}
.chal-hero h2{margin:.533rem 0 1rem;font-size:1.467rem}
.opening{border-radius:.8rem;background:var(--ai-soft);padding:1.067rem 1.2rem;border-left:4px solid var(--ai)}
.opening-label{display:block;font-size:.8rem;font-weight:700;color:var(--ai);margin-bottom:.267rem}
.opening blockquote{margin:0;font-size:1.133rem;line-height:1.8;font-weight:600}
.chal-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.067rem;margin-top:.933rem;font-size:.9rem;color:var(--ink-2)}
.chal-meta b{color:var(--ink)}
.chal-cta{display:flex;flex-wrap:wrap;gap:.533rem;margin-top:1.067rem}
.chal-cta .primary{width:auto;padding:0 1.6rem}
.chal-cta .note{margin:0;align-self:center}
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:1.067rem 0;align-items:end}
.pod{position:relative;text-align:left;padding:1.067rem;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.267rem}
.pod:hover{border-color:var(--accent)}
.pod .medal{width:2.267rem;height:2.267rem;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;font-size:1rem}
.pod.r1{order:2;border:2px solid #c99a2e;padding-top:1.6rem}.pod.r1 .medal{background:#c99a2e}
.pod.r2{order:1}.pod.r2 .medal{background:#8e979f}
.pod.r3{order:3}.pod.r3 .medal{background:#a8704a}
.pod b{font-size:1rem}
.pod p{margin:0;font-size:.867rem;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pod .votes{font-size:.867rem;font-weight:700;color:var(--ink)}
.pod.win::after{content:"우승";position:absolute;top:.8rem;right:.8rem;font-size:.733rem;font-weight:800;color:#8a6510;background:#f7ecd0;padding:.067rem .5rem;border-radius:999px}
.entries{list-style:none;margin:.8rem 0 0;padding:0 .533rem .533rem}
.entry{display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;gap:.8rem;align-items:center;padding:.933rem .8rem;border-top:1px solid var(--line)}
.entry:first-child{border-top:0}
.entry.me{background:var(--accent-soft);border-radius:.533rem}
.entry .rank{font-size:1.2rem}
.entry h3{margin:0;font-size:1rem}
.entry p{margin:.133rem 0 0;font-size:.9rem;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.entry-side{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem}
.vote{min-height:2.4rem;padding:0 .8rem;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--surface);font-weight:700;font-size:.867rem;white-space:nowrap}
.vote.on{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.chal-tag{font-size:.733rem;font-weight:700;color:var(--ai);background:var(--ai-soft);border-radius:4px;padding:0 .333rem;margin-left:.4rem;vertical-align:2px}
@media (max-width:860px){
  .chal{padding-top:1.067rem}
  .chal-list{grid-template-columns:1fr}
}
@media (max-width:480px){
  .podium{grid-template-columns:1fr}
  .pod.r1,.pod.r2,.pod.r3{order:0}
  .pod.r1{padding-top:1.067rem}
  .entry{grid-template-columns:1.6rem minmax(0,1fr);}
  .entry-side{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between}
  .chal-cta .primary{width:100%}
}
html.elder .chal{max-width:46rem}
html.elder .chal-list,html.elder .podium{grid-template-columns:1fr}
html.elder .pod.r1,html.elder .pod.r2,html.elder .pod.r3{order:0}
html.elder .pod.r1{padding-top:1.067rem}
html.elder .entry{grid-template-columns:1.6rem minmax(0,1fr)}
html.elder .entry-side{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between}
html.elder .chal-cta .primary{width:100%}
html.elder .opening blockquote{font-size:1rem}
@media (max-width:860px){ html.elder .tabbar button{font-size:.5rem} }

/* ---------- 어르신 모드: 글씨 약 2배, 한 줄 배치, 꼭 필요한 것만 ---------- */
html.elder{font-size:28px}
@media (max-width:480px){ html.elder{font-size:26px} }
html.elder body{line-height:1.55}
html.elder .wrap{max-width:46rem}
html.elder .home,html.elder .write,html.elder .lib{grid-template-columns:minmax(0,1fr)}
html.elder .home .side{order:-1}
html.elder nav,html.elder .pilot,html.elder .bar .right .uname,html.elder .plan-badge{display:none}
html.elder .bar{min-height:3rem;padding-top:.3rem;padding-bottom:.3rem}
html.elder .me{flex-wrap:wrap;gap:.4rem .6rem}
html.elder .me small{display:none}
html.elder .me .linkbtn{font-size:.7rem}
html.elder .usage-top{flex-direction:column;align-items:flex-start;gap:0}
html.elder .usage-top span{font-size:.75rem}
html.elder .logo{font-size:1.2rem}
html.elder .elder-toggle{height:auto;min-height:2rem;padding:.2rem .7rem;font-size:.8rem;border-color:var(--accent);color:var(--accent)}
html.elder .elder-cta,html.elder .today,html.elder .stats,html.elder #genres,html.elder .list-head .tabs [data-sort="genre"]{display:none}
/* 목록은 제목·첫 문장만 크게 */
html.elder .post{grid-template-columns:1fr;padding:.7rem .5rem}
html.elder .rank,html.elder .likes,html.elder .post .meta{display:none}
html.elder .post h3{white-space:normal}
html.elder .post p{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
html.elder .list-head{flex-direction:column;align-items:stretch}
html.elder .list-head .tabs button{flex:1}
/* 글쓰기: 보조 카드는 코칭만, 버튼은 크게 */
html.elder .write .side .side-card:not(.coach){display:none}
html.elder .tag.ratio{display:inline-block}
html.elder .tag:not(.ratio){display:none}
html.elder .turn p{font-size:1rem;line-height:1.7}
html.elder .composer{position:static;box-shadow:none}
html.elder .composer-foot{display:grid;grid-template-columns:1fr;gap:.4rem}
html.elder .composer-foot .count,html.elder .composer-foot .left{text-align:left;margin:0;font-size:.7rem}
html.elder .composer .primary,html.elder .composer .ghost{width:100%;min-height:2.6rem}
html.elder #send{order:-1}
html.elder .composer textarea{font-size:1rem;min-height:5rem}
html.elder .opt em{display:none}
html.elder .work-actions .ghost{flex:1}
html.elder .work{grid-template-columns:1fr}
html.elder .plans,html.elder .checkout{grid-template-columns:1fr}
html.elder .lib .side .bignum div:nth-child(n+3){display:none}
html.elder .modal{width:min(40rem,100%)}
@media (max-width:860px){
  html.elder{--tabbar:calc(3.2rem + env(safe-area-inset-bottom))}
  html.elder .tabbar button{font-size:.6rem}
  html.elder .tabbar svg{width:1.1rem;height:1.1rem}
  html.elder .modal-foot>*{min-height:2.4rem}
}
@media (max-width:480px){
  html.elder .wrap{padding:0 .4rem}
  html.elder .panel{padding:.7rem}
  html.elder .story{padding:.6rem}
  html.elder .turn{padding-left:.5rem}
  html.elder .composer{padding:.5rem}
  html.elder .write-head{padding:.5rem .6rem}
  html.elder .modal{padding:.8rem .7rem calc(.8rem + env(safe-area-inset-bottom))}
}

/* ---------- 쓰기 언어 ---------- */
:lang(ja){font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Noto Sans JP",system-ui,sans-serif}
.lang-badge{font-size:.733rem;font-weight:700;padding:0 .4rem;border-radius:4px;background:var(--human-soft);color:var(--human)}
.badge.lang,.tag.lang{background:var(--human-soft);color:var(--human)}
.tag.lang{font-weight:700}
html.elder .tag.lang{display:inline-block}
.lang-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.533rem;margin:0 0 1rem}
.lp{min-width:0;padding:0 .2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:3rem;border-radius:.667rem;border:1.5px solid var(--line-strong);background:var(--surface);font-weight:700;font-size:1rem}
.lp.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.lang-row{padding:0 0 1rem}
#langFilter{padding-top:.8rem}
html.elder #langFilter{display:flex}
html.elder .lp{font-size:.75rem;min-height:2.4rem}
.modal{overflow-x:hidden}

/* ---- 요금제 기능: 심화 코칭 · 리포트 · 판매 신청 · 연재 · 시상 ---- */
.plan-need{font-size:.667rem;font-weight:800;color:#7a4b00;background:#fde9c2;border-radius:999px;padding:.067rem .45rem;margin-left:.4rem;vertical-align:2px}
.has-feat .plan-need,.plan-need[hidden]{display:none}
.deep-btn{width:100%;margin-top:.8rem}
.work-actions{flex-wrap:wrap;justify-content:flex-end}
.series-tag{font-size:.733rem;font-weight:700;color:#4b3a8f;background:#ebe6fb;border-radius:4px;padding:0 .333rem;margin-left:.4rem;vertical-align:2px}
.sale-tag{font-weight:700;color:#7a4b00}
.award-tag{display:inline-block;font-size:.733rem;font-weight:800;color:#8a6510;background:#f7ecd0;border-radius:999px;padding:.067rem .5rem;margin-top:.2rem}
.sheet{max-width:40rem}
.sheet h4{margin:1.067rem 0 .333rem;font-size:.933rem}
.sheet ul{margin:.267rem 0 0;padding-left:1.2rem}
.sheet li{margin:.2rem 0;line-height:1.6}
.sheet .rw{background:var(--surface-2);border-radius:.667rem;padding:.667rem .8rem;margin:.4rem 0}
.sheet .rw .b{color:var(--ink-3);text-decoration:line-through;text-decoration-color:rgba(0,0,0,.25)}
.sheet .rw .a2{color:var(--ink);font-weight:600;margin-top:.2rem}
.sheet .rw .y{font-size:.8rem;color:var(--ink-3);margin-top:.2rem}
.sheet textarea{width:100%;min-height:7rem;font:inherit;padding:.667rem;border:1px solid var(--line);border-radius:.667rem;background:var(--surface)}
.sheet input[type=text]{width:100%}
.report-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin:.533rem 0}
.report-nums div{background:var(--surface-2);border-radius:.533rem;padding:.533rem;text-align:center}
.report-nums b{display:block;font-size:1.1rem}
.report-nums span{font-size:.733rem;color:var(--ink-3)}
#reportBody p{margin:.4rem 0;font-size:.9rem;line-height:1.6}
#reportBody .lbl{font-weight:700;font-size:.8rem;margin-top:.667rem}
#reportBody ol{margin:.267rem 0 .533rem;padding-left:1.2rem;font-size:.9rem}
#reportBody .primary,#reportBody .ghost{width:100%;margin-top:.533rem}
.awards{list-style:none;margin:.4rem 0 0;padding:0}
.awards li{display:flex;gap:.533rem;align-items:center;padding:.4rem 0;border-top:1px solid var(--line);font-size:.9rem}
.awards li:first-child{border-top:0}
.awards .medal{width:1.8rem;height:1.8rem;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;font-size:.8rem;flex:none}
.awards .m1{background:#c99a2e}.awards .m2{background:#8e979f}.awards .m3{background:#a8704a}
.work-actions .ghost.sm{white-space:nowrap}
@media (max-width:860px){
  .work-actions .ghost.sm{flex:1 1 calc(33.333% - .4rem);min-width:0;padding:0 .4rem}
  .work-actions .plan-need{margin-left:.25rem;padding:0 .3rem}
}

/* ---- 리그 ---- */
@media (max-width:860px){ .tabbar{grid-template-columns:repeat(6,minmax(0,1fr))} .tabbar button{font-size:.7rem} }
.tier-stat{cursor:pointer;border-radius:.533rem}
.tier-stat:hover{background:var(--surface-2)}
.league .lib-head select{min-height:2.4rem;padding:0 .6rem;border:1px solid var(--line);border-radius:.533rem;background:var(--surface);font:inherit}
.tier{display:inline-block;font-size:.733rem;font-weight:800;border-radius:999px;padding:.067rem .5rem;vertical-align:2px}
.tier.rookie{background:#eef1f4;color:#56606b}
.tier.bronze{background:#f5e3d6;color:#8a4f25}
.tier.silver{background:#e7eaee;color:#4b5563}
.tier.gold{background:#f7ecd0;color:#8a6510}
.tier.master{background:#ebe6fb;color:#4b3a8f}
.lg-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.533rem;margin:.8rem 0}
.lg-podium:empty{display:none}
.lg-pod{border:1px solid var(--line);border-radius:var(--radius);padding:.8rem;background:var(--surface);text-align:center;min-width:0}
.lg-pod .medal{width:2rem;height:2rem;margin:0 auto .267rem;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff}
.lg-pod.r1{border:2px solid #c99a2e}.lg-pod.r1 .medal{background:#c99a2e}.lg-pod.r2 .medal{background:#8e979f}.lg-pod.r3 .medal{background:#a8704a}
.lg-pod b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-pod .pts{font-size:1.1rem;font-weight:800;margin-top:.133rem}
.entry .pts{font-weight:800;font-size:1.05rem;white-space:nowrap}
.entry .pts small{font-weight:600;font-size:.733rem;color:var(--ink-3);margin-left:.133rem}
.lg-me .big{font-size:2rem;font-weight:800;line-height:1.2}
.lg-me .tierbar{height:.533rem;background:var(--surface-2);border-radius:999px;overflow:hidden;margin:.533rem 0 .267rem}
.lg-me .tierbar i{display:block;height:100%;background:var(--accent)}
.lg-rules,.lg-tiers{list-style:none;margin:.4rem 0 0;padding:0}
.lg-rules li,.lg-tiers li{display:flex;justify-content:space-between;gap:.533rem;padding:.4rem 0;border-top:1px solid var(--line);font-size:.9rem}
.lg-rules li:first-child,.lg-tiers li:first-child{border-top:0}
.lg-rules b{white-space:nowrap}
.lg-tiers .perk{font-size:.8rem;color:var(--ink-3);text-align:right}
@media (max-width:860px){
  .league{display:flex;flex-direction:column}
  .league .side{display:contents}
  .league #lgMe{order:-1}
}

/* ---- 화면 언어 · 결제 통화 ---- */
.hdr-tools{display:flex;flex-direction:column;align-items:stretch;gap:.267rem}
.ui-lang{font:inherit;font-size:.8rem;min-height:1.9rem;padding:0 .4rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);text-align:center}
.cur-row{display:flex;align-items:center;justify-content:center;gap:.667rem;margin-top:.8rem;flex-wrap:wrap}
.cur-row>span{font-weight:700;font-size:.9rem}
html.elder .ui-lang{font-size:.6rem}

/* ---- 머리글 정리: 언어 선택(보라색), 어르신 모드 버튼은 어르신 모드일 때만 '보통 글씨'로 표시 ---- */
.hdr-tools{flex-direction:row;align-items:center;gap:.4rem}
.elder-toggle{display:none}
html.elder .elder-toggle{display:inline-flex;align-items:center}
.ui-lang{-webkit-appearance:none;appearance:none;min-height:2.6rem;padding:0 2.2rem 0 1rem;font-size:1rem;font-weight:700;color:#fff;border:0;border-radius:999px;cursor:pointer;
  background:#6d4bd8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .9rem center;text-align:left;box-shadow:0 1px 2px rgba(60,30,140,.25)}
.ui-lang:hover{background-color:#5a3bc4}
.ui-lang:focus-visible{outline:3px solid #c9b8f5;outline-offset:2px}
.ui-lang option{color:#1f1f1f;background:#fff}
html.elder .ui-lang{font-size:.6rem;min-height:2.2rem}
@media (max-width:860px){ .ui-lang{min-height:2.4rem;font-size:.95rem;padding:0 2rem 0 .9rem} }
@media (max-width:860px){
  html.elder .ui-lang{font-size:.55rem;padding:0 1.4rem 0 .6rem;min-height:1.8rem;background-position:right .5rem center;background-size:.45rem}
  html.elder .elder-toggle{font-size:.55rem;padding:.15rem .5rem;min-height:1.8rem}
  html.elder .logo{font-size:1rem}
}

/* ---- 하단 사업자 정보 · 약관 링크 ---- */
.site-foot{border-top:1px solid var(--line);margin-top:2rem;padding:1.4rem 0 2rem;font-size:.8rem;color:var(--ink-3);line-height:1.7}
.site-foot p{margin:.4rem 0}
.foot-links{display:flex;flex-wrap:wrap;gap:.2rem 1rem;margin:0 0 .4rem}
.foot-links a{color:var(--ink-2);text-decoration:none}
.foot-links a:hover{text-decoration:underline}
.fine a{color:inherit;text-decoration:underline}
.linkbtn.danger{color:var(--ink-3);font-size:.8rem;margin-top:.8rem}
.linkbtn.danger:hover{color:#c0392b}
body.writing .site-foot{display:none}
html.elder .site-foot{font-size:.55rem}