/* 2026-10-18 토스식 정리 레이어: 마지막에 불러와 서비스 전체 인상을 간단하고 편하게 맞춘다.
   원칙 — 넓은 여백, 굵은 제목 위계, 흰 카드와 연회색 바탕, 테두리·그림자·장식 그라데이션 최소화,
   단색 큰 버튼, 눌렀을 때 살짝 작아지는 반응. 색은 파인링고 초록을 그대로 쓰고 로고는 건드리지 않는다. */
/* Pretendard는 자체 서버에서 제공한다(외부 글꼴 CDN으로 방문자 접속 정보가 가지 않게). */
@font-face{font-family:"Pretendard Variable";src:url('/fonts/Pretendard-Regular.woff2') format('woff2');font-weight:100 500;font-display:swap}
@font-face{font-family:"Pretendard Variable";src:url('/fonts/Pretendard-Bold.woff2') format('woff2');font-weight:600 900;font-display:swap}

:root{
  --tc-bg:#f3f5f4;
  --tc-card:#ffffff;
  --tc-fill:#f2f4f3;
  --tc-fill-strong:#e8ecea;
  --tc-ink:#17211d;
  --tc-sub:#4e5a55;
  --tc-muted:#66706a;
  --tc-line:#eceeed;
  --tc-pine:#1b6b52;
  --tc-pine-press:#145a44;
  --tc-pine-soft:#e7f2ed;
  --tc-radius:20px;
  --tc-radius-sm:14px;
  --tc-shadow:0 2px 10px rgba(17,33,27,.04);
  --pl-bg:var(--tc-bg);
  --ink:var(--tc-ink);
  --muted:var(--tc-sub);
  --line:var(--tc-line);
  --soft:var(--tc-fill);
  --pl-line:var(--tc-line);
  --pl-shadow:var(--tc-shadow);
}
html[data-theme=dark]{--tc-bg:#101413;--tc-card:#1a201e;--tc-fill:#232a27;--tc-fill-strong:#2c3431;--tc-ink:#eef2f0;--tc-sub:#b4bfba;--tc-muted:#8a958f;--tc-line:#2a3230;--tc-pine-soft:#1d3a30}

/* 글꼴과 바탕 */
body,button,input,select,textarea{font-family:"Pretendard Variable",Pretendard,"Noto Sans KR",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif!important;letter-spacing:-.01em}
body{background:var(--tc-bg)!important;color:var(--tc-ink);-webkit-font-smoothing:antialiased}
body[data-view=library]{background:var(--tc-bg)!important}
:where(h1,h2,h3,strong){letter-spacing:-.02em}

/* 헤더: 흰 바탕, 선 없이 */
.site-header{background:color-mix(in srgb,var(--tc-card) 92%,transparent)!important;backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--tc-line)!important;box-shadow:none!important}
.site-header .language-line-navigation .nav-button{border-radius:12px!important;font-weight:600}
.site-header .language-line-navigation .nav-button:hover{background:var(--tc-fill)!important}

/* 버튼 공통 반응 */
:where(button,a,[role=button]){-webkit-tap-highlight-color:transparent}
:where(.pl-start-mode,.pl-playground-game,.pl-start-learning,.pl-playground,.pl-quota-pill,.nav-button,.pl-home-stat):active{transform:scale(.98)!important;transition:transform .08s ease!important}

/* ===== 홈 ===== */
.pl-home-date{color:var(--tc-muted)!important;font-weight:600!important;font-size:14px!important;letter-spacing:0!important}
.pl-home-hello h1{font-size:clamp(26px,2.6vw,32px)!important;font-weight:800!important;color:var(--tc-ink)!important;margin:4px 0 12px!important}
/* 프리미엄 안내: 연초록 한 줄 링크 */
.pl-home-upsell{display:inline-flex!important;flex-wrap:wrap;align-items:center;gap:6px 10px!important;padding:10px 14px!important;background:var(--tc-pine-soft)!important;border:0!important;border-radius:var(--tc-radius-sm)!important;box-shadow:none!important;color:var(--tc-sub)!important;font-weight:500!important;text-decoration:none!important}
.pl-home-upsell span{color:var(--tc-sub)!important;font-weight:600!important}
.pl-home-upsell strong{padding:0!important;background:none!important;box-shadow:none!important;color:var(--tc-pine)!important;font-weight:700!important;border-radius:0!important}
.pl-home-upsell:hover strong{text-decoration:underline}
/* 통계: 낱개 상자 대신 한 장의 흰 카드 */
.pl-home-stats{background:var(--tc-card)!important;border-radius:var(--tc-radius)!important;padding:10px 14px!important;gap:4px!important;box-shadow:var(--tc-shadow)!important}
.pl-home-stat{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:12px!important}
.pl-home-stat strong{color:var(--tc-ink)!important;font-weight:800!important}
.pl-home-stat span,.pl-home-stat small{color:var(--tc-muted)!important;font-weight:500!important}
.pl-home-ring circle:first-child{stroke:var(--tc-fill-strong)!important}

/* 학습하기: 단색 초록 카드, 장식 숲 제거 */
#learning-studio .pl-start-learning{background:var(--tc-pine)!important;background-image:none!important;border:0!important;border-radius:24px!important;box-shadow:0 8px 24px rgba(27,107,82,.18)!important}
#learning-studio .pl-start-learning:hover{background:var(--tc-pine-press)!important}
.pl-start-forest,.pl-start-learning::after,.pl-playground::after{display:none!important}
/* 아래 버튼들과 기능이 겹치는 카드 오른쪽 화살표는 숨긴다(사용자 요청) */
.pl-start-arrow,.pl-playground-arrow{display:none!important}
.pl-start-badge{background:rgba(255,255,255,.16)!important;border:0!important;font-weight:700!important}
.pl-start-mode{background:rgba(255,255,255,.12)!important;border:0!important;border-radius:16px!important;box-shadow:none!important;font-weight:700!important}
.pl-start-mode:hover{background:rgba(255,255,255,.2)!important}
.pl-start-mode{position:relative}
@media (max-width:640px){
 .pl-start-mode{min-height:54px!important;padding:8px 10px!important;gap:8px!important;font-size:15px!important}
 .pl-start-mode>span{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;min-width:0}
 .pl-start-mode img{width:30px!important;height:30px!important;flex:none}
}
.pl-start-reco{position:absolute;top:-8px;right:10px;padding:2px 8px;border-radius:999px;background:#f2b84b;color:#3d2a00;font-style:normal;font-size:11.5px;font-weight:800;line-height:1.5;letter-spacing:0;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.pl-mode-reco{font-style:normal!important;background:var(--tc-pine-soft)!important;color:var(--tc-pine)!important;border-radius:999px!important;padding:2px 9px!important;font-weight:800!important}

/* 놀이터: 흰 카드 + 연회색 타일 */
.home-corners-one>.pl-playground,.pl-playground{background:var(--tc-card)!important;background-image:none!important;border:0!important;border-radius:24px!important;box-shadow:var(--tc-shadow)!important;color:var(--tc-ink)!important}
.pl-playground-copy strong{color:var(--tc-ink)!important;font-weight:800!important}
.pl-playground-now{color:var(--tc-muted)!important}
.pl-playground-arrow{color:var(--tc-muted)!important}
.pl-playground-icon{background:#fff4e0!important;box-shadow:none!important;color:#c77700!important}
.pl-playground-game{background:var(--tc-fill)!important;border:0!important;border-radius:16px!important;box-shadow:none!important;color:var(--tc-ink)!important;font-weight:600!important}
.pl-playground-game:hover{background:var(--tc-fill-strong)!important;transform:none!important;box-shadow:none!important}
.pl-playground-games>.pl-playground-game:first-child{background:#fff4e0!important;color:#7a4b00!important;font-weight:800!important}
.pl-playground-game>span:first-child{background:var(--tc-card)!important;color:#c77700!important}
.pl-playground-copy span,.pl-playground-copy small,.pl-playground-copy p{color:var(--tc-muted)!important}
@media (max-width:900px){
 .pl-playground-game{min-height:52px!important;padding:8px 10px!important;gap:8px!important;font-size:15px!important}
 .pl-playground-game>span:last-child{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-width:0}
 .pl-playground-game>span:first-child{width:30px!important;height:30px!important}
}
@media (max-width:360px){.pl-playground-game{font-size:14px!important}}

/* ===== 내 정보 ===== */
.pf-hero{background:var(--tc-card)!important;background-image:none!important;border:0!important;box-shadow:var(--tc-shadow)!important;border-radius:24px!important}
.pf-avatar{background:var(--tc-pine)!important}
.pf-name{font-weight:800!important;color:var(--tc-ink)!important}
.pf-email{color:var(--tc-sub)!important}
.pf-plan{background:var(--tc-fill)!important;color:var(--tc-sub)!important;border:0!important;font-weight:700!important}
.pf-primary{border-radius:14px!important;box-shadow:none!important;font-weight:700!important}
.pf-stats{background:var(--tc-card)!important;border-radius:24px!important;box-shadow:var(--tc-shadow)!important;padding:8px!important;gap:0!important;overflow:hidden}
.pf-stat{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:16px!important}
.pf-stat strong{color:var(--tc-ink)!important;font-weight:800!important}
.pf-stat span{color:var(--tc-muted)!important}
#profile-error{background:var(--tc-fill)!important;border:0!important;border-radius:16px!important;color:var(--tc-sub)!important;font-size:15px!important}
.profile-panel,.profile-record-note,.profile-account,#profile-account{background:var(--tc-card)!important;border:0!important;box-shadow:var(--tc-shadow)!important;border-radius:24px!important}
.profile-panel h2{font-weight:800!important;color:var(--tc-ink)!important}
.profile-note{color:var(--tc-muted)!important}
/* 구독 관리 상자(내 정보) */
.pl-sub{background:var(--tc-card)!important;border:0!important;box-shadow:var(--tc-shadow)!important;border-radius:24px!important}
.pl-sub-row{border-color:var(--tc-line)!important;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pl-sub .notice{margin:10px 0;padding:12px 14px;border-radius:14px;background:#fff4e0;color:#7a4b00;font-weight:600;line-height:1.5;word-break:keep-all}
.pl-sub .done{margin:10px 0;padding:12px 14px;border-radius:14px;background:var(--tc-pine-soft);color:var(--tc-pine);font-weight:600;line-height:1.5;word-break:keep-all}
.pl-refund{display:block;width:100%;margin-top:12px;min-height:50px;border:0;border-radius:14px;background:var(--tc-fill);color:var(--tc-ink);font:inherit;font-weight:700;cursor:pointer}
.pl-refund:hover{background:var(--tc-fill-strong)}
.pl-sub .refund{color:var(--tc-sub);font-size:14px;text-decoration:underline;text-underline-offset:2px}
.pl-keep{border:0!important;border-radius:28px!important}
.pl-keep .yes{border-radius:14px!important;background:var(--tc-pine)!important;color:#fff!important;border:0!important;font-weight:700!important}
.pl-keep .no{border-radius:14px!important;background:var(--tc-fill)!important;color:var(--tc-sub)!important;border:0!important}

/* 학습 설계 근거(왜 이렇게 배우나요?) */
.ev-panel{border:0!important;border-radius:28px!important;background:var(--tc-card)!important}
.ev-close{border:0!important;background:var(--tc-fill)!important;box-shadow:none!important;outline:none!important}
.ev-close:focus-visible{outline:3px solid var(--tc-pine-soft)!important}
.ev-tabs{background:var(--tc-fill)!important;border:0!important;border-radius:14px!important}
.ev-ai li,.ev-design li,.ev-stage{background:var(--tc-fill)!important;border:0!important;box-shadow:none!important;border-radius:18px!important}
.ev-ai em{color:var(--tc-pine)!important}
@media (max-width:640px){
 .ev-ai,.ev-design{grid-template-columns:1fr!important}
 .ev-sheet{align-items:flex-end!important;padding:0!important}
 .ev-panel{width:100%!important;max-width:none!important;max-height:92dvh!important;border-radius:28px 28px 0 0!important;animation:tc-sheet .28s cubic-bezier(.2,.9,.3,1)}
 .ev-tabs{overflow-x:auto;flex-wrap:nowrap!important}
 .ev-tab{white-space:nowrap}
}

/* 회원 탈퇴 */
.pl-delete-entry{display:block;margin:28px auto 8px;border:0;background:none;color:var(--tc-muted);font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pl-delete{border:0;padding:0;border-radius:28px;width:min(440px,calc(100vw - 32px));background:var(--tc-card);color:var(--tc-ink);box-shadow:0 24px 64px rgba(10,20,16,.24)}
.pl-delete::backdrop{background:rgba(10,20,16,.42)}
.pl-delete-card{padding:26px 22px 20px}
.pl-delete h2{margin:0 0 14px;font-size:22px;font-weight:800;letter-spacing:-.02em}
.pl-delete ul{margin:0 0 12px;padding:14px 16px 14px 32px;border-radius:16px;background:var(--tc-fill);color:var(--tc-sub);line-height:1.6;font-size:14.5px}
.pl-delete li{margin:4px 0;word-break:keep-all}
.pl-delete-refund{display:inline-block;margin-bottom:16px;color:var(--tc-sub);font-size:14px;text-decoration:underline}
.pl-delete-label{display:block;margin-bottom:8px;font-weight:600;font-size:14.5px}
.pl-delete input{width:100%;box-sizing:border-box;min-height:52px;padding:0 14px;border:2px solid transparent;border-radius:14px;background:var(--tc-fill);font:inherit;font-size:16px;color:var(--tc-ink)}
.pl-delete input:focus{outline:0;border-color:#d9480f;background:var(--tc-card)}
.pl-delete-msg{min-height:20px;margin:8px 0;color:#c2410c;font-weight:600;font-size:14px}
.pl-delete-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pl-delete-actions button{min-height:52px;border:0;border-radius:14px;font:inherit;font-weight:700;cursor:pointer}
.pl-delete-keep{background:var(--tc-fill);color:var(--tc-ink)}
.pl-delete-go{background:#d9480f;color:#fff}
.pl-delete-go:disabled{opacity:.4;cursor:not-allowed}

/* 학습 방법·놀이 선택 창: 테두리 없는 칸, 휴대폰에서는 아래에서 올라오는 시트 */
.pl-mode-chooser{background:rgba(10,20,16,.42)!important;backdrop-filter:none!important}
.pl-mode-panel{border:0!important;border-radius:28px!important;box-shadow:0 24px 64px rgba(10,20,16,.24)!important;background:var(--tc-card)!important}
.pl-mode-panel h2{font-weight:800!important;color:var(--tc-ink)!important}
.pl-mode-lead{color:var(--tc-sub)!important}
.pl-mode-badge{background:var(--tc-pine)!important}
.pl-mode-close{border:0!important;background:var(--tc-fill)!important;box-shadow:none!important;color:var(--tc-sub)!important}
.pl-mode-card,.pl-play-card{background:var(--tc-fill)!important;border:0!important;box-shadow:none!important;border-radius:18px!important;transition:background .15s,transform .08s!important}
.pl-mode-card:hover,.pl-play-card:hover{background:var(--tc-fill-strong)!important;transform:none!important}
.pl-mode-card:active,.pl-play-card:active{transform:scale(.98)!important}
.pl-mode-card[data-mode=general]{background:var(--tc-pine-soft)!important}
.pl-mode-card strong{color:var(--tc-ink)!important;font-weight:700!important}
.pl-mode-card span{color:var(--tc-sub)!important}
@media (max-width:640px){
 .pl-mode-chooser{align-items:flex-end!important;padding:0!important}
 .pl-mode-panel{width:100%!important;max-width:none!important;margin:0!important;border-radius:28px 28px 0 0!important;padding-bottom:calc(20px + env(safe-area-inset-bottom))!important;animation:tc-sheet .28s cubic-bezier(.2,.9,.3,1)}
 .pl-mode-panel::before{content:"";display:block;width:40px;height:4px;margin:-6px auto 10px;border-radius:4px;background:var(--tc-fill-strong)}
}
@keyframes tc-sheet{from{transform:translateY(40px);opacity:.6}}
@media (prefers-reduced-motion:reduce){.pl-mode-panel{animation:none!important}}

/* 놀이터 코너(퀴즈·받아쓰기·짝맞추기 등): 카드 안 카드 대신 하나의 면, 보기 버튼은 채움형 */
.home-corner{border:0!important;box-shadow:none!important;border-radius:20px!important;background:var(--tc-card)!important}
.home-corner-heading{border-bottom:0!important}
.home-corner-heading h2{font-weight:800!important;color:var(--tc-ink)!important}
.home-corner-badge{background:var(--tc-pine-soft)!important;color:var(--tc-pine)!important;letter-spacing:0!important}
.home-corner-stat{color:var(--tc-muted)!important;font-weight:600!important}
.home-corner-big{color:var(--tc-ink)!important;letter-spacing:-.02em}
.home-corner-choices{gap:10px!important}
.home-corner-choice{border:0!important;background:var(--tc-fill)!important;border-radius:16px!important;min-height:54px!important;padding:12px 16px!important;font-weight:600!important;color:var(--tc-ink)!important;text-align:left;transition:background .15s,transform .08s!important}
.home-corner-choice:hover:not(:disabled){background:var(--tc-fill-strong)!important;border-color:transparent!important}
.home-corner-choice:active:not(:disabled){transform:scale(.98)}
.home-corner-choice[data-state=right]{background:var(--tc-pine-soft)!important;color:var(--tc-pine)!important;box-shadow:inset 0 0 0 2px var(--tc-pine)!important}
.home-corner-choice[data-state=wrong]{background:#fff1ec!important;color:#c2410c!important;box-shadow:inset 0 0 0 2px #f4a582!important}
.home-corner-listen{border:0!important;background:var(--tc-fill)!important;color:var(--tc-ink)!important;font-weight:600!important}
.home-corner-next{color:var(--tc-pine)!important;font-weight:700!important}
.home-corner-example{background:var(--tc-fill)!important;border-radius:14px!important}
.home-corner-tabs{background:var(--tc-fill)!important}
@media (max-width:640px){.home-corner-choices{grid-template-columns:1fr!important}}
.pl-corner-sheet{background:rgba(10,20,16,.42)!important;backdrop-filter:none!important}
.pl-corner-sheet-panel{background:var(--tc-card)!important;border:0!important;border-radius:28px!important;box-shadow:0 24px 64px rgba(10,20,16,.24)!important}
.pl-corner-sheet-panel .home-corner{padding:4px 2px!important}
.pl-corner-sheet-panel .home-corner-heading h2{display:none!important}
.pl-corner-sheet-top{border-bottom:0!important}
.pl-corner-back{border:0!important;background:var(--tc-fill)!important;color:var(--tc-ink)!important;box-shadow:none!important;font-weight:600!important;border-radius:999px!important}
.pl-corner-sheet-top button:not(.pl-corner-back){border:0!important;background:var(--tc-fill)!important;box-shadow:none!important}
@media (max-width:640px){
 .pl-corner-sheet{align-items:flex-end!important;padding:0!important}
 .pl-corner-sheet-panel{width:100%!important;max-width:none!important;margin:0!important;border-radius:28px 28px 0 0!important;max-height:92dvh!important;padding-bottom:calc(16px + env(safe-area-inset-bottom))!important;animation:tc-sheet .28s cubic-bezier(.2,.9,.3,1)}
}

/* AI 선생님: 파란 강조를 초록으로, 칩·입력은 채움형 */
.tutor-badge{background:var(--tc-pine)!important}
.tutor,.tutor-top,.tutor-bar{background-image:none!important}
.tutor{background-color:var(--tc-bg)!important}
.tutor-title{font-weight:800!important;color:var(--tc-ink)!important}
.tutor-modes{background:var(--tc-fill)!important;border:0!important;border-radius:14px!important}
.tutor-mode{color:var(--tc-sub)!important;border:0!important;font-weight:600!important;border-radius:11px!important}
.tutor-mode[aria-selected=true],.tutor-mode.active,.tutor-mode[aria-pressed=true]{background:var(--tc-card)!important;color:var(--tc-ink)!important;box-shadow:0 1px 4px rgba(0,0,0,.08)!important}
.tutor-level{background-color:var(--tc-fill)!important;border:0!important;border-radius:12px!important;font-weight:600!important}
.tutor-msg{border:0!important;box-shadow:none!important;border-radius:20px!important}
.tutor-msg:not([data-role=user]):not(.user){background:var(--tc-card)!important;color:var(--tc-ink)!important}
.tutor-msg[data-role=user],.tutor-msg.user{background:var(--tc-pine)!important;color:#fff!important}
.tutor-listen{color:var(--tc-pine)!important;font-weight:600!important}
.tutor-starter{background:var(--tc-card)!important;border:0!important;color:var(--tc-ink)!important;box-shadow:var(--tc-shadow)!important;border-radius:999px!important;font-weight:600!important}
.tutor-starter:hover{background:var(--tc-fill)!important}
.tutor-input{background:var(--tc-fill)!important;border:2px solid transparent!important;border-radius:18px!important;box-shadow:none!important}
.tutor-input:focus{background:var(--tc-card)!important;border-color:var(--tc-pine)!important;outline:0!important}
.tutor-send{background:var(--tc-pine)!important;border:0!important;border-radius:14px!important;box-shadow:none!important;font-weight:700!important}
.tutor-send:hover{background:var(--tc-pine-press)!important}
.tutor-mic,.tutor-reset,.tutor-open{background:var(--tc-fill)!important;border:0!important;box-shadow:none!important;color:var(--tc-ink)!important}
.tutor-upsell{background:var(--tc-pine-soft)!important;border:0!important;border-radius:16px!important;color:var(--tc-pine)!important}

/* AI 자동학습 화면 */
.ac{background:var(--tc-bg)!important;background-image:none!important}
.ac-title{font-weight:800!important;letter-spacing:-.03em!important;word-break:keep-all}
.ac-ai-badge,.ac-badge,.ac-question-head .ac-ai-badge{background:var(--tc-pine)!important;background-image:none!important}
/* 읽는 소리에 맞춰 글자가 차례로 초록색으로 */
.ac-target .ac-ch{transition:color .12s ease}
.ac-target .ac-ch.on{color:var(--tc-pine)}
.ac-question{font-weight:800!important;letter-spacing:-.03em!important;word-break:keep-all}
.ac-plan-item{border:0!important;box-shadow:var(--tc-shadow)!important;border-radius:18px!important}
.ac-plan-badge{border:0!important;background:var(--tc-fill)!important}
.ac-top>*{white-space:nowrap}
.ac-answer,.ac-chip{border:0!important;background:var(--tc-card)!important;box-shadow:var(--tc-shadow)!important;border-radius:18px!important;transition:background .15s,transform .08s!important}
.ac-answer:active,.ac-chip:active{transform:scale(.98)}
/* 잠긴(프리미엄) 선택지는 보이되, 무료로 고를 수 있는 항목 아래에 둔다 */
.ac-answers{display:grid}
.ac-answer[data-locked=true]{order:1;opacity:.62}
.ac-answer[data-locked=true]:hover{opacity:.8}
.ac-answer:is([aria-pressed=true],[aria-checked=true],[data-selected=true],.selected,.active),.ac-chip:is([aria-pressed=true],[aria-checked=true],.selected,.active){background:var(--tc-pine-soft)!important;box-shadow:inset 0 0 0 2px var(--tc-pine)!important;color:var(--tc-pine)!important}
.ac-start,.ac-premium-cta{border-radius:14px!important;box-shadow:none!important;font-weight:700!important}
.ac-secondary{background:var(--tc-fill)!important;border:0!important;box-shadow:none!important;border-radius:14px!important}
.ac-card{border:0!important;box-shadow:var(--tc-shadow)!important}
/* 설명이 붙은 선택지는 휴대폰에서 한 줄씩 쌓는 목록으로 */
@media (max-width:640px){
 .ac-answers:has(.ac-answer>strong+span){grid-template-columns:1fr!important;gap:10px!important}
 .ac-answers:has(.ac-answer>strong+span) .ac-answer{display:flex!important;flex-direction:column!important;text-align:left!important;align-items:flex-start!important;justify-content:center!important;gap:3px!important;padding:16px 18px!important;min-height:0!important}
 .ac-answer>strong{font-size:16px!important}
 .ac-answer>span{color:var(--tc-sub)!important}
}
@media (max-width:640px){
 .ac-plan-badge{display:none!important}
 /* 무료 시간은 머리줄 바로 아래 한 줄로: 아래쪽 재생 버튼을 가리지 않게 하고, 그만큼 내용을 내린다 */
 body.ac-open .pl-quota-pill{top:calc(62px + env(safe-area-inset-top))!important;bottom:auto!important;white-space:nowrap!important;font-size:12px!important;padding:3px 3px 3px 10px!important;gap:8px!important;box-shadow:0 2px 10px rgba(17,33,27,.10)!important}
 body.ac-open .pl-quota-pill strong{padding:3px 9px!important;font-size:11.5px!important}
 body.pl-free.ac-open .ac-top{margin-bottom:34px!important}
}

/* 무료 남은 시간: 흰 알약, 숫자 강조 */
.pl-quota-pill{background:var(--tc-card)!important;border:0!important;box-shadow:0 6px 24px rgba(17,33,27,.12)!important;font-weight:600}
.pl-quota-pill strong{background:var(--tc-pine)!important;color:#fff!important;font-weight:700}

.pl-quota-time{font-weight:800;font-variant-numeric:tabular-nums}
/* 휴대폰 홈 등 학습 화면 밖: 버튼을 가리지 않게 오른쪽 아래 작은 시간 칩으로 */
@media (max-width:640px){
 body:not(.ac-open) .pl-quota-pill{left:auto!important;right:12px!important;width:auto!important;justify-content:center!important;padding:7px 12px!important;gap:6px!important;font-size:13px!important;bottom:calc(12px + env(safe-area-inset-bottom))!important}
 body:not(.ac-open) .pl-quota-pill .pl-quota-label,body:not(.ac-open) .pl-quota-pill strong{display:none!important}
 body:not(.ac-open) .pl-quota-pill .pl-quota-time::before{content:"⏱ ";font-weight:600}
 body:not(.ac-open) .pl-quota-pill[data-empty=true] strong{display:inline-flex!important}
}

/* 무료 시간 1분 전 알림 */
.pl-quota-toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:95;width:max-content;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:16px;background:#17211d;color:#fff;font-weight:600;font-size:14.5px;line-height:1.45;text-align:center;word-break:keep-all;box-shadow:0 10px 30px rgba(0,0,0,.2);animation:tc-toast .3s cubic-bezier(.2,.9,.3,1);transition:opacity .4s,transform .4s}
.pl-quota-toast.out{opacity:0;transform:translate(-50%,10px)}
@keyframes tc-toast{from{opacity:0;transform:translate(-50%,12px)}}

/* 푸터: 조용하게 */
.site-utility-footer,.forest-footer{color:var(--tc-muted)!important;background:transparent!important;border-top:0!important}

/* ===== 학습 설정 창 ===== */
#reading-dialog{border:0!important;border-radius:28px!important;background:var(--tc-card)!important;box-shadow:0 24px 64px rgba(10,20,16,.24)!important}
#reading-dialog::backdrop{background:rgba(10,20,16,.42)}
#reading-dialog .dialog-header h2{font-weight:800!important;color:var(--tc-ink)!important}
#reading-dialog .dialog-header button{border:0!important;background:var(--tc-fill)!important;box-shadow:none!important;outline:none!important}
#reading-dialog .dialog-header button:focus-visible{outline:3px solid var(--tc-pine-soft)!important;outline-offset:2px!important}
#reading-dialog #system-size{margin-left:0!important;width:100%!important;max-width:none!important}
#reading-dialog .settings-tabs{background:var(--tc-fill)!important;border:0!important;border-radius:14px!important;padding:4px!important}
#reading-dialog .settings-tabs button{border:0!important;border-radius:11px!important;font-weight:600!important;color:var(--tc-sub)!important;background:transparent!important}
#reading-dialog .settings-tabs button:is([aria-selected=true],.active){background:var(--tc-card)!important;color:var(--tc-ink)!important;box-shadow:0 1px 4px rgba(0,0,0,.08)!important}
#reading-dialog section{background:transparent!important;border:0!important;box-shadow:none!important}
#reading-dialog .appearance-field{border-color:var(--tc-line)!important}
#reading-dialog .font-stepper{display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px!important;align-items:center;gap:10px!important;width:100%!important;max-width:100%!important;box-sizing:border-box}
#reading-dialog .font-stepper button{width:44px!important;min-width:0!important;height:44px!important;padding:0!important;border:0!important;border-radius:12px!important;background:var(--tc-fill)!important;color:var(--tc-ink)!important;font-weight:700!important}
#reading-dialog input[type=range]{accent-color:var(--tc-pine);width:100%;min-width:0}
#reading-dialog .choice-grid button{border:0!important;background:var(--tc-fill)!important;color:var(--tc-ink)!important;border-radius:999px!important;font-weight:600!important;box-shadow:none!important}
#reading-dialog .choice-grid button:is([aria-pressed=true],.active,[aria-checked=true]){background:var(--tc-pine)!important;color:#fff!important}
#reading-dialog select{background-color:var(--tc-fill)!important;border:0!important;border-radius:12px!important;min-height:48px;font-weight:600}
#reading-dialog .dialog-actions{border-top:0!important;background:var(--tc-card)!important}
#reading-dialog .dialog-actions .primary-button{border-radius:14px!important;min-height:52px!important;font-weight:700!important;box-shadow:none!important}
@media (hover:none){#settings-pointer-effects{display:none!important}}
@media (min-width:641px){#reading-dialog{width:min(640px,92vw)!important;max-width:640px!important}}
@media (max-width:640px){
 #reading-dialog{width:100vw!important;max-width:100vw!important;margin:auto 0 0!important;border-radius:28px 28px 0 0!important;max-height:90dvh!important}
 #reading-dialog[open]{animation:tc-sheet .28s cubic-bezier(.2,.9,.3,1)}
 #reading-dialog .dialog-actions{padding-bottom:calc(12px + env(safe-area-inset-bottom))!important}
 #reading-dialog .dialog-actions .primary-button{width:100%!important}
}

/* ===== 무료 시간 소진 안내(결제 유도) 창 ===== */
.pl-paywall-card{border:0!important;border-radius:28px!important;box-shadow:0 24px 64px rgba(10,20,16,.24)!important}
.pl-paywall-card h2,.pl-paywall-card h3{word-break:keep-all;font-weight:800!important}
.pl-paywall-perks{background:var(--tc-fill)!important;border:0!important;border-radius:18px!important}
.pl-paywall-primary{border-radius:14px!important;min-height:54px!important;font-weight:700!important;box-shadow:none!important;outline:none!important}
.pl-paywall-primary:focus-visible{outline:3px solid var(--tc-pine-soft)!important;outline-offset:2px!important}
.pl-paywall-signup{border:0!important;background:var(--tc-fill)!important;color:var(--tc-ink)!important;border-radius:14px!important;min-height:52px!important;font-weight:700!important}
.pl-paywall-secondary{color:var(--tc-muted)!important;font-weight:600!important}
@media (max-width:640px){
 .pl-paywall{align-items:flex-end!important;padding:0!important}
 .pl-paywall-card{width:100%!important;max-width:none!important;border-radius:28px 28px 0 0!important;padding-bottom:calc(20px + env(safe-area-inset-bottom))!important;animation:tc-sheet .28s cubic-bezier(.2,.9,.3,1)}
}

/* ===== 첫 로딩 화면: 장식 줄이고 채움형 보기 ===== */
#load-state{background:var(--tc-bg)!important}
.pl-loader-halo,.pl-spark{display:none!important}
.loading-heading{font-weight:700!important;color:var(--tc-sub)!important;font-size:17px!important;letter-spacing:-.01em}
.pl-loader-bar{background:var(--tc-fill-strong)!important;height:4px!important;border-radius:4px!important;overflow:hidden}
.pl-loader-bar span{background:var(--tc-pine)!important;border-radius:4px!important}
.pl-fact-kicker{color:var(--tc-muted)!important;font-weight:600!important;letter-spacing:0!important}
.pl-fact-card{background:var(--tc-card)!important;border:0!important;box-shadow:var(--tc-shadow)!important;border-radius:24px!important}
.pl-fact-lang{background:var(--tc-pine-soft)!important;color:var(--tc-pine)!important;border:0!important;font-weight:700!important}
.pl-fact-word{color:var(--tc-ink)!important;font-weight:800!important}
.pl-fact-speak{background:var(--tc-fill)!important;border:0!important;box-shadow:none!important;color:var(--tc-ink)!important;font-weight:600!important}
.pl-fact-speak:hover{background:var(--tc-fill-strong)!important}
.pl-fact-options button,.pl-fact-option{background:var(--tc-card)!important;border:0!important;box-shadow:var(--tc-shadow)!important;border-radius:16px!important;min-height:56px!important;font-weight:600!important;color:var(--tc-ink)!important;transition:background .15s,transform .08s!important}
.pl-fact-options button:hover{background:var(--tc-fill)!important}
.pl-fact-options button:active{transform:scale(.98)}
.pl-fact-options button:is([data-state=right],.is-right){background:var(--tc-pine-soft)!important;color:var(--tc-pine)!important;box-shadow:inset 0 0 0 2px var(--tc-pine)!important}
.pl-fact-options button:is([data-state=wrong],.is-wrong){background:#fff1ec!important;color:#c2410c!important;box-shadow:inset 0 0 0 2px #f4a582!important}
.pl-fact-score{color:var(--tc-pine)!important;font-weight:700!important}
.pl-fact-controls button,.pl-fact-go{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--tc-sub)!important;font-weight:600!important}
.pl-fact-controls button:hover{color:var(--tc-ink)!important;background:var(--tc-fill)!important}
.pl-fact-go:not([hidden]){background:var(--tc-pine)!important;color:#fff!important;border-radius:14px!important}

/* ===== 모바일·앱(설치형) 편의 ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
:where(button,a,[role=button],input,select,label,summary){touch-action:manipulation}
/* iOS는 16px 미만 입력칸에 초점이 가면 화면을 확대한다 */
@media (max-width:640px){:where(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){font-size:max(16px,1em)!important}}
/* 설치형(홈 화면) 실행: 노치·홈바 영역 여백, 당겨서 새로고침 튐 방지 */
@media (display-mode:standalone){
 body{overscroll-behavior-y:none}
 .site-header{padding-top:calc(env(safe-area-inset-top) + 8px)!important}
 .site-utility-footer{padding-bottom:calc(env(safe-area-inset-bottom) + 16px)!important}
 .ac-top{padding-top:calc(env(safe-area-inset-top) + 10px)!important}
}
/* 길게 눌렀을 때 버튼 글자 선택·확대 메뉴가 뜨지 않게 */
:where(button,.pl-start-mode,.pl-playground-game,.pl-mode-card,.ac-answer,.home-corner-choice){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* 공통 카드·대화상자·입력 */
:where(dialog,.modal,.pl-modal,.sm-modal){border:0!important;border-radius:24px!important;box-shadow:0 20px 60px rgba(17,33,27,.18)!important}
:where(input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],input:not([type]),select,textarea){border-radius:12px;border-color:var(--tc-line)}
:where(input,select,textarea):focus-visible{outline:2px solid var(--tc-pine)!important;outline-offset:1px}

.pl-sub .notice-soft{margin:8px 0 0;padding:10px 12px;border-radius:12px;background:var(--tc-fill,#f2f4f3);color:var(--tc-sub,#4e5a55);font-size:13.5px;line-height:1.5;word-break:keep-all}

/* 2026-10-19 디자인 진단 반영: 남은 파란 강조·초점 테두리를 초록으로, 작은 터치 영역 넓히기 */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--tc-pine)!important;outline-offset:2px}
.home-corner button:not(.home-corner-choice):not(.home-corner-tile):not(.home-corner-listen):not(.home-corner-next),.home-corner-check,.home-corner .primary{background:var(--tc-pine)!important;border-color:var(--tc-pine)!important;color:#fff!important}
.home-corner-input{border:2px solid transparent!important;background:var(--tc-fill)!important;border-radius:14px!important;min-height:48px}
.home-corner-input:focus{border-color:var(--tc-pine)!important;background:var(--tc-card)!important}
.home-corner-stat,.home-corner-quiz-head .home-corner-stat{color:var(--tc-muted)!important}
.tutor-mode[aria-selected=true]{color:var(--tc-pine)!important}
.ac-summary-edit{min-height:44px!important;min-width:44px!important;padding:0 12px!important}
.site-header .language-line-navigation .nav-button{min-width:44px!important;min-height:44px!important}
.pl-home-ring-text small,.pl-home-stat span{font-size:max(12px,.75rem)!important}
/* 2026-10-19 베타테스트 반영 */
body:has(.pl-mode-chooser:not([hidden]),.pl-corner-sheet:not([hidden]),.tutor:not([hidden])) .skip-link{display:none}
@media (max-width:760px){#settings-pane-reading{grid-template-columns:minmax(0,1fr)!important}}
#settings-pane-reading .appearance-field{min-width:0}
#settings-pane-reading .appearance-field input[type=range]{display:block;width:100%;box-sizing:border-box}
#settings-pane-reading .reset-reading{min-height:44px!important;height:auto!important;line-height:1.3!important;white-space:normal}
/* 2026-10-19 2차 개선: 터치 영역·근거 시트·선택 카드 */
.tutor-mode{min-height:44px!important}
.pl-quota-pill{min-height:44px;box-sizing:border-box}
.site-header :is(a,button)[href*="/login"],.site-header .auth-nav :is(a,button){min-height:44px;display:inline-flex;align-items:center}
.settings-dialog :is(.theme-option,.color-option,[data-theme-choice],[data-accent]){min-height:44px}
body:has(.ev-sheet) .pl-quota-pill{display:none!important}
@media (max-width:640px){
  .ev-sheet :is(ol,ul,.ev-grid){grid-template-columns:minmax(0,1fr)!important}
  .ac-answers{grid-template-columns:minmax(0,1fr)!important}
  .ac-answer{min-height:56px}
}
.ac-interests .ac-chip,.ac-goals .ac-chip{min-height:44px}
:is(.pl-mode-card,.pl-playground-game,.home-corner-tile) :is(h3,strong,.title){white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
/* 사용자에게 의미 없는 개발 일수는 숨긴다 */
#development-days{display:none!important}

/* 2026-10-19 3차 개선(2차 베타 결과) */
#settings-pane-reading .font-stepper{display:flex;align-items:center;gap:8px}
#settings-pane-reading .font-stepper input[type=range]{flex:1 1 auto;width:auto!important;min-width:0}
#settings-pane-reading .font-stepper button{flex:none;min-width:44px;min-height:44px}
#reading-dialog .choice-grid button{min-height:44px}
.topbar .brand,.site-header .brand{min-height:44px;display:inline-flex;align-items:center}
.pl-auth-login{min-height:44px!important;display:inline-flex;align-items:center}
.pl-start-badge{background:#2d6a56!important;color:#fff!important}
@media (min-width:900px){
  body[data-view=library] #workspace{overflow-y:auto!important}
  body[data-view=library] #library-view>*{flex-shrink:0}
}
.biz-footer a{display:inline-block;padding:12px 4px;min-height:44px;box-sizing:border-box}
.ac-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:1000;max-width:calc(100vw - 32px);padding:14px 18px;border-radius:14px;background:#17211d;color:#fff;font-size:15px;box-shadow:0 10px 30px rgba(0,0,0,.2)}

/* 2026-10-19 4차 개선(3차 베타 결과) */
/* PC 홈: 칸 높이를 화면에 고정하면 놀이터가 아래 버튼을 덮는다 → 내용 높이, 넘치면 스크롤 */
@media (min-width:900px){
  body[data-view=library] #library-view{height:auto!important;min-height:100%;grid-template-rows:none!important;grid-auto-rows:auto!important}
  body[data-view=library] #workspace{overflow-y:auto!important}
}
/* 설정 창 글자 크기: − 슬라이더 + 가 겹치지 않게 세 칸 고정 */
#reading-dialog .font-stepper{display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px!important;gap:8px!important;align-items:center}
#reading-dialog .font-stepper input[type=range]{width:100%!important;min-width:0!important;margin:0!important}
/* 홈 카드 제목은 말줄임 대신 두 줄까지 */
#library-view :is(.pl-playground-game,.pl-mode-card,.learning-studio-home button,.learning-studio-home a) span{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere}
/* AI 선생님 상단: 좁은 휴대폰에서 줄바꿈 */
.tutor :is(.tutor-head,.tutor-top,.tutor-bar,.tutor-controls){flex-wrap:wrap;min-width:0}
.tutor .tutor-modes{flex-wrap:wrap;min-width:0;max-width:100%}
.tutor .tutor-level{max-width:100%;min-width:0}
.tutor .tutor-mode{white-space:normal!important}
/* 2026-10-19 학습 화면 개편: 간결·실용, 긴 단어도 칸 안에 */
.ac .ac-top{display:grid!important;grid-template-columns:44px 1fr auto auto;align-items:center;gap:10px}
.ac .ac-progress{height:6px;border-radius:999px;background:var(--tc-fill,#eef1ef);overflow:hidden}
.ac .ac-progress-bar{height:100%;border-radius:999px;background:var(--tc-pine,#1b6b52);transition:width .4s ease}
.ac .ac-count{font-size:13px;font-weight:800;color:var(--tc-pine,#1b6b52);font-variant-numeric:tabular-nums}
.ac .ac-time{font-size:12.5px;color:var(--tc-muted,#66706a);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:420px){.ac .ac-time{font-size:0}.ac .ac-time::first-letter{font-size:0}.ac .ac-top{grid-template-columns:44px 1fr auto}.ac .ac-time{display:none}}
.ac .ac-card{min-width:0;max-width:100%;box-shadow:0 1px 2px rgba(23,33,29,.04),0 12px 32px rgba(23,33,29,.06)!important;border:1px solid var(--tc-line,#e7ebe9)}
.ac .ac-card *{max-width:100%;min-width:0}
.ac .ac-target,.ac .ac-meaning,.ac .ac-reading{overflow-wrap:anywhere;word-break:keep-all;text-align:center}
.ac .ac-target{font-size:clamp(26px,7vw,44px)!important}
.ac .ac-target .ac-ch{color:#a9b2ad;transition:color .12s linear}
.ac .ac-card[data-karaoke=false] .ac-target .ac-ch,.ac .ac-target[data-karaoke=false] .ac-ch{color:inherit}
.ac .ac-target .ac-ch.on{color:var(--tc-pine,#1b6b52)}
.ac .ac-meaning{font-size:clamp(16px,4.4vw,20px);color:var(--tc-ink,#17211d);font-weight:600}
.ac .ac-reading{font-size:15px;color:var(--tc-muted,#66706a)}
.ac .ac-cue{font-size:12.5px;font-weight:800;letter-spacing:.2px;color:var(--tc-pine,#1b6b52);background:#e8f3ee;border-radius:999px;padding:5px 12px}
.ac .ac-chip{font-size:13px;color:var(--tc-muted,#66706a);font-weight:700}
.ac .ac-tip{font-size:13.5px;color:var(--tc-muted,#66706a);text-align:center;max-width:440px}
.ac .ac-controls{gap:28px!important}
.ac .ac-ctrl{width:56px;height:56px;border-radius:50%;border:0;background:var(--tc-fill,#eef1ef);font-size:18px}
.ac .ac-play{width:72px!important;height:72px!important}
.ac .ac-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ac .ac-tool,.ac .ac-tool-select{min-height:40px;border-radius:999px;border:1px solid var(--tc-line,#e7ebe9);background:#fff;padding:0 14px;font-size:13.5px;font-weight:700}
/* 일시정지 중 단어 사전 */
.ac.is-lookup .ac-target .word-study-inline{font:inherit;color:var(--tc-pine,#1b6b52);background:none;border:0;padding:0 2px;border-bottom:2px dotted currentColor;cursor:pointer;border-radius:4px}
.ac.is-lookup .ac-target .word-study-inline:hover{background:#e8f3ee}
html[data-theme=dark] .ac .ac-card{border-color:#2a3330}
html[data-theme=dark] .ac .ac-cue{background:#1d3a30;color:#8fd3b4}
@media (prefers-reduced-motion:reduce){.ac .ac-target .ac-ch,.ac .ac-progress-bar{transition:none}}
/* '이렇게 학습할게요' 분석 요약 */
.ac-analysis{width:100%;box-sizing:border-box;background:#fff;border:1px solid var(--tc-line,#e7ebe9);border-radius:22px;padding:18px;display:grid;gap:14px}
.ac-an-head{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ac-an-stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:16px;background:var(--tc-fill,#f2f4f3)}
.ac-an-stat strong{font-size:26px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--tc-ink,#17211d)}
.ac-an-stat span{font-size:12.5px;color:var(--tc-muted,#66706a);font-weight:700}
.ac-an-stat.is-new strong{color:var(--tc-pine,#1b6b52)}
.ac-an-stat.is-review strong{color:#b7791f}
.ac-an-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--tc-fill,#eef1ef)}
.ac-an-bar span{height:100%;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.ac-an-bar .is-new{background:var(--tc-pine,#1b6b52)}
.ac-an-bar .is-review{background:#e0a43a}
.ac-an-why{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ac-an-why li{display:flex;gap:10px;align-items:flex-start}
.ac-an-icon{flex:none;width:32px;height:32px;border-radius:10px;background:var(--tc-fill,#f2f4f3);display:grid;place-items:center;font-size:16px}
.ac-an-why strong{display:block;font-size:14.5px;line-height:1.35;overflow-wrap:anywhere}
.ac-an-why small{display:block;font-size:12.5px;color:var(--tc-muted,#66706a);margin-top:2px;line-height:1.4}
.ac-summary{font-size:13.5px}
html[data-theme=dark] .ac-analysis{background:#18201d;border-color:#2a3330}
@media (prefers-reduced-motion:reduce){.ac-an-bar span{transition:none}}
/* 자동학습 검색 */
.ac-search{width:100%;display:grid;gap:10px}
.ac-search-input{width:100%;box-sizing:border-box;min-height:52px;border-radius:16px;border:2px solid transparent;background:var(--tc-fill,#f2f4f3);padding:0 16px;font:inherit;font-size:16px}
.ac-search-input:focus{outline:none;border-color:var(--tc-pine,#1b6b52);background:#fff}
.ac-search-count{margin:0;font-weight:800;color:var(--tc-pine,#1b6b52);font-size:14.5px}
.ac-search-empty{margin:0;color:var(--tc-muted,#66706a);font-size:13.5px}
.ac-search-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ac-search-list li{display:flex;gap:10px;justify-content:space-between;padding:10px 14px;border-radius:12px;background:#fff;border:1px solid var(--tc-line,#e7ebe9);font-size:14px}
.ac-search-list strong{overflow-wrap:anywhere}
.ac-search-list span{color:var(--tc-muted,#66706a);text-align:right;overflow-wrap:anywhere}
html[data-theme=dark] .ac-search-input:focus,html[data-theme=dark] .ac-search-list li{background:#18201d}
/* 2026-10-20 내 정보 분석 대시보드 */
.pf-stats[hidden]{display:none!important}
.pd{display:grid;gap:14px;margin:16px 0 24px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.pd{grid-template-columns:repeat(2,minmax(0,1fr))}.pd-head,.pd-kpis,.pd-ai,.pd-empty{grid-column:1/-1}}
.pd-head{display:flex;flex-direction:column;gap:2px}
.pd-title{margin:0;font-size:22px;font-weight:800;letter-spacing:-.4px}
.pd-sub{margin:0;font-size:13px;color:var(--tc-muted,#66706a)}
.pd-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pd-kpi{background:#fff;border:1px solid var(--tc-line,#e7ebe9);border-radius:20px;padding:14px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.pd-kpi-label{font-size:12.5px;font-weight:700;color:var(--tc-muted,#66706a)}
.pd-kpi strong{font-size:clamp(22px,6vw,30px);font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums;color:var(--tc-ink,#17211d)}
.pd-kpi-note{font-size:12px;line-height:1.35;color:var(--tc-muted,#66706a)}
.pd-kpi-note.is-up{color:var(--tc-pine,#1b6b52);font-weight:700}
.pd-card{background:#fff;border:1px solid var(--tc-line,#e7ebe9);border-radius:22px;padding:18px;min-width:0;opacity:0;transform:translateY(10px)}
.pd.is-in .pd-card{animation:pd-in .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes pd-in{to{opacity:1;transform:none}}
.pd-h{margin:0 0 12px;font-size:15.5px;font-weight:800}
.pd-h4{margin:14px 0 8px;font-size:13.5px;font-weight:800;color:var(--tc-sub,#4e5a55)}
.pd-note{margin:10px 0 0;font-size:13.5px;color:var(--tc-sub,#4e5a55);line-height:1.5}
.pd-note.is-alert{color:#b7791f;font-weight:700}
.pd-est{display:block;margin-top:6px;font-size:11.5px;color:var(--tc-muted,#66706a)}
.pd-empty{margin:0;padding:18px;border-radius:18px;background:var(--tc-fill,#f2f4f3);text-align:center;color:var(--tc-sub,#4e5a55)}
.pd-goal-wrap{display:flex;align-items:center;gap:18px}
.pd-ring{width:110px;height:110px;flex:none;transform:rotate(-90deg)}
.pd-ring circle{fill:none;stroke-width:12}
.pd-ring-bg{stroke:var(--tc-fill,#eef1ef)}
.pd-ring-fg{stroke:var(--tc-pine,#1b6b52);stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1)}
.pd-goal-text{display:flex;flex-direction:column;gap:4px}
.pd-goal-text strong{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.pd-goal-text span{font-size:13.5px;color:var(--tc-sub,#4e5a55)}
.pd-bars{display:flex;align-items:flex-end;gap:4px;height:120px}
.pd-bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%;min-width:0}
.pd-bar span{width:100%;max-width:22px;border-radius:6px 6px 3px 3px;background:#cfe5da;height:0;transition:height .8s cubic-bezier(.2,.8,.2,1)}
.pd.is-in .pd-bar span{height:max(3px,var(--h))}
.pd-bar.is-zero span{background:var(--tc-fill,#eef1ef)}
.pd-bar.is-now span{background:var(--tc-pine,#1b6b52)}
.pd-bar small{font-size:10.5px;color:var(--tc-muted,#66706a);height:13px;line-height:13px;white-space:nowrap}
.pd-heat-grid{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
.pd-heat-grid i,.pd-heat-legend i{display:block;aspect-ratio:1;border-radius:4px;background:var(--tc-fill,#eef1ef)}
.pd-heat-grid i.is-pad{background:transparent}
:is(.pd-heat-grid,.pd-heat-legend) i[data-l="1"]{background:#cfe5da}
:is(.pd-heat-grid,.pd-heat-legend) i[data-l="2"]{background:#93c7ae}
:is(.pd-heat-grid,.pd-heat-legend) i[data-l="3"]{background:#4f9a7a}
:is(.pd-heat-grid,.pd-heat-legend) i[data-l="4"]{background:#1b6b52}
.pd-heat-legend{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin-top:8px;font-size:11.5px;color:var(--tc-muted,#66706a)}
.pd-heat-legend i{width:12px}
.pd-stack{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--tc-fill,#eef1ef)}
.pd-stack span{width:0;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.pd.is-in .pd-stack span{width:var(--w)}
:is(.pd-stack span,.pd-keys li i).is-strong,.pd-keys li.is-strong i{background:#1b6b52}
.pd-stack span.is-medium,.pd-keys li.is-medium i{background:#93c7ae}
.pd-stack span.is-weak,.pd-keys li.is-weak i{background:#e0a43a}
.pd-keys{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px;font-size:13px}
.pd-keys li{display:flex;align-items:center;gap:6px}
.pd-keys i{width:10px;height:10px;border-radius:3px}
.pd-langs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pd-langs li{display:grid;grid-template-columns:minmax(64px,auto) 1fr auto;align-items:center;gap:10px;font-size:13.5px}
.pd-lang-bar{height:8px;border-radius:999px;background:var(--tc-fill,#eef1ef);position:relative;overflow:hidden}
.pd-lang-bar::after{content:'';position:absolute;inset:0 auto 0 0;width:0;background:var(--tc-pine,#1b6b52);border-radius:999px;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.pd.is-in .pd-lang-bar::after{width:var(--w)}
.pd-langs small{color:var(--tc-muted,#66706a)}
.pd-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pd-mini div{background:var(--tc-fill,#f2f4f3);border-radius:14px;padding:10px;text-align:center;display:flex;flex-direction:column}
.pd-mini strong{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.pd-mini span{font-size:12px;color:var(--tc-muted,#66706a)}
.pd-forecast{display:flex;gap:8px;align-items:flex-start}
.pd-forecast p{margin:0;font-size:14px;line-height:1.5;border-bottom:1px dashed var(--tc-line,#cfd6d2);padding-bottom:4px}
.pd-badge{flex:none;font-size:11px;font-weight:800;color:var(--tc-muted,#66706a);border:1px dashed currentColor;border-radius:999px;padding:2px 8px}
.pd-ai{background:linear-gradient(160deg,#f2faf6,#fff 60%)}
.pd-advice{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media (min-width:900px){.pd-advice{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pd-advice li{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--tc-line,#e7ebe9);border-radius:16px;padding:12px}
.pd-ai-icon{flex:none;width:36px;height:36px;border-radius:12px;background:#e8f3ee;display:grid;place-items:center;font-size:18px}
.pd-advice strong{display:block;font-size:14.5px;line-height:1.35;overflow-wrap:anywhere}
.pd-advice p{margin:3px 0 0;font-size:13px;color:var(--tc-sub,#4e5a55);line-height:1.5}
html[data-theme=dark] :is(.pd-kpi,.pd-card,.pd-advice li){background:#18201d;border-color:#2a3330}
html[data-theme=dark] .pd-ai{background:linear-gradient(160deg,#16261f,#18201d 60%)}
@media (prefers-reduced-motion:reduce){.pd-card{opacity:1;transform:none}.pd.is-in .pd-card{animation:none}.pd-bar span,.pd-stack span,.pd-lang-bar::after,.pd-ring-fg{transition:none}}
.pd-heat-grid{grid-auto-columns:minmax(0,26px)!important;justify-content:center}
.ac .ac-top{grid-template-columns:44px auto minmax(0,1fr) auto auto!important}
.ac .ac-top .ac-pine{display:flex;align-items:center}
.ac .ac-top .ac-progress{min-width:40px}
@media (max-width:420px){.ac .ac-top{grid-template-columns:44px auto minmax(0,1fr) auto!important}}
body.ac-open .pl-quota-pill{top:calc(70px + env(safe-area-inset-top))!important}
/* 2026-10-20 5차 개선(4차 베타 결과) */
.pl-auth-login{height:auto!important;min-height:44px!important;padding-block:0!important}
.wrap .top nav a,.biz-footer p a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
/* PC 홈: 아래 고정 띠가 "왜 이렇게 배우나요?"를 덮지 않게 여백 */
@media (min-width:900px){body[data-view=library] #workspace{padding-bottom:56px!important}}
/* 완료 화면: 내일 약속 */
.ac-promise{width:100%;box-sizing:border-box;background:#fff;border:1px solid var(--tc-line,#e7ebe9);border-radius:20px;padding:16px;text-align:center;display:grid;gap:8px}
.ac-promise h3{margin:0;font-size:16px;font-weight:800}
.ac-promise p{margin:0;font-size:13.5px;color:var(--tc-sub,#4e5a55);line-height:1.5}
.ac-promise-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ac-promise-row .ac-chip{min-height:44px;padding:0 16px}
.ac-promise-done{font-weight:700;color:var(--tc-pine,#1b6b52)!important}
html[data-theme=dark] .ac-promise{background:#18201d;border-color:#2a3330}

/* 2026-10-20 글자 점검 결과: 내 정보 대시보드가 고정 높이에 잘리지 않게 스크롤, 가로 휴대폰 놀이터 시트 스크롤 */
body[data-view=profile] #workspace{overflow-y:auto!important;-webkit-overflow-scrolling:touch}
body[data-view=profile] #main{height:auto!important;min-height:100%}
.pl-corner-sheet{overflow-y:auto!important;overscroll-behavior:contain}
.pl-corner-sheet .home-curiosity{overflow:visible!important;max-height:none!important;height:auto!important}
@media (max-height:500px){.pl-corner-sheet .home-curiosity h2{min-height:0!important;font-size:22px!important}}

/* 2026-10-20 내 정보 개편: 프로필 → 분석 대시보드 → 예전 기록 순서, 예전 숫자 4칸 숨김 */
body[data-view=profile] #profile-view{grid-template-rows:none!important;grid-auto-rows:auto!important;height:auto!important;align-content:start!important}
body[data-view=profile] #profile-view>*{grid-row:auto!important}
body[data-view=profile] #profile-view>.pf-hero{grid-column:1/-1!important;grid-row:1!important}
body[data-view=profile] #profile-view>.pd{grid-column:1/-1!important;grid-row:2!important}
#profile-view .pf-stats,body[data-view=profile] #profile-view>.pf-stats{display:none!important}
body[data-view=profile] #profile-view>.profile-insights{grid-column:1/9!important}
body[data-view=profile] #profile-view>.profile-history{grid-column:9/13!important}
@media (max-width:899px){body[data-view=profile] #profile-view>:is(.profile-insights,.profile-history){grid-column:1/-1!important}}
/* 놀이터 출처 ⓘ: 기본 삼각형 표시 없이 44px 버튼 */
.curiosity-source>summary{list-style:none;display:inline-grid;place-items:center;min-width:44px;min-height:44px;cursor:pointer;color:var(--tc-muted,#66706a)}
.curiosity-source>summary::-webkit-details-marker{display:none}
.curiosity-source>summary svg{width:20px;height:20px}
/* 가로 휴대폰: 무료 시간 알약이 내용을 덮지 않게 */
@media (max-height:500px){
  body.ac-open .pl-quota-pill{display:none!important}
  .pl-quota-pill{top:auto!important;bottom:10px!important;left:auto!important;right:10px!important;transform:scale(.88);transform-origin:bottom right}
}
/* 태블릿 폭: 머리글이 붐벼 로고와 겹치지 않게 설정·내 정보는 아이콘만 */
@media (min-width:600px) and (max-width:1024px){.site-header .nav-button .nav-label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.site-header .nav-button{min-width:44px;justify-content:center}}
/* 5차 베타: 로그인 링크 44px 확정, 홈 하단 띠가 버튼을 덮지 않게 */
a.pl-auth-login.pl-auth-login{min-height:44px!important;height:44px!important;box-sizing:border-box!important;display:inline-flex!important;align-items:center!important}
@media (min-width:900px){body[data-view=library] .site-utility-footer{position:relative!important;z-index:0!important}}
/* 무료 시간 알약: 학습 화면(자체 시간 표시)과 가로 휴대폰에서는 숨김 */
body.ac-open .pl-quota-pill{display:none!important}
@media (max-height:500px) and (orientation:landscape){.pl-quota-pill{display:none!important}}
/* 6차 베타: 큰 글자 설정에서도 글자 크기 조절이 겹치지 않게, 팀 필터 칩 44px */
#reading-dialog .font-stepper{grid-template-columns:auto minmax(0,1fr) auto!important}
.chips button,.filters button,[class*=filter] button{min-height:44px}
/* 대시보드: 나를 알아가는 중(첫 7일) */
.pd-warmup{grid-column:1/-1;background:linear-gradient(160deg,#f2faf6,#fff 70%)}
.pd-warm-lead{margin:0 0 10px;font-weight:700;font-size:14.5px}
.pd-warm-bar{height:10px;border-radius:999px;background:var(--tc-fill,#eef1ef);overflow:hidden}
.pd-warm-bar span{display:block;height:100%;width:0;background:var(--tc-pine,#1b6b52);border-radius:999px;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.pd.is-in .pd-warm-bar span{width:var(--w)}
.pd-warm-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.pd-warm-steps li{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;font-size:14px;color:var(--tc-muted,#66706a)}
.pd-warm-steps li span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--tc-fill,#eef1ef);font-weight:800;font-size:12.5px}
.pd-warm-steps li.is-open{color:var(--tc-ink,#17211d)}
.pd-warm-steps li.is-open span{background:var(--tc-pine,#1b6b52);color:#fff}
.pd-warm-steps small{font-size:12px}
html[data-theme=dark] .pd-warmup{background:linear-gradient(160deg,#16261f,#18201d 70%)}
/* 아직 듣고 계세요? */
.ac-still{position:fixed;left:50%;bottom:calc(120px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;width:min(360px,calc(100vw - 32px));box-sizing:border-box;background:#fff;border-radius:22px;padding:18px;box-shadow:0 18px 48px rgba(0,0,0,.18);display:grid;gap:8px;text-align:center}
.ac-still strong{font-size:17px}.ac-still p{margin:0;font-size:13.5px;color:var(--tc-sub,#4e5a55);line-height:1.5}
html[data-theme=dark] .ac-still{background:#18201d}
/* 숙련 4단계 */
.pd-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:12px}
.pd-tier{border-radius:14px;padding:10px 4px;text-align:center;background:var(--tc-fill,#f2f4f3);display:flex;flex-direction:column;gap:2px}
.pd-tier strong{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.pd-tier span{font-size:12px;color:var(--tc-muted,#66706a);font-weight:700}
.pd-tier.is-proficient strong{color:#4f9a7a}.pd-tier.is-mastered{background:#e8f3ee}.pd-tier.is-mastered strong{color:var(--tc-pine,#1b6b52)}
.ac-milestone{margin:4px 0 0;padding:12px 16px;border-radius:16px;background:linear-gradient(135deg,#fff3cf,#e8f3ee);font-weight:800;color:#5a4400;text-align:center;animation:pd-in .6s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){.ac-milestone{animation:none}}
/* 9차 베타: 어두운 테마 완료 버튼 대비, 설정 색상 버튼이 글자 크기 버튼을 덮지 않게 */
html[data-theme=dark] #reading-dialog .primary-button{color:#0f2a20!important}
#reading-dialog #settings-pane-reading .choice-grid{float:none!important;margin:8px 0 0!important}
/* 10차 베타: 설정 창 색상 버튼끼리 겹치지 않게 줄바꿈 */
#reading-dialog #settings-pane-reading fieldset.appearance-field{display:block!important;clear:both}
#reading-dialog #settings-pane-reading .choice-grid{display:flex!important;flex-wrap:wrap!important;gap:8px!important;width:100%!important}
#reading-dialog #settings-pane-reading .choice-grid button{flex:0 0 auto!important;position:static!important}
/* 12차 베타: 홈 '왜 이렇게 배우나요?' 링크 터치 영역 */
[data-open-evidence]{min-height:44px!important;padding:0 8px!important;display:inline-flex!important;align-items:center}
/* 13차 베타: 어두운 테마 내 정보 대비, 하단 '왜 이렇게 배우나요?' 버튼 크기 */
html[data-theme=dark] .pf-primary{color:#0f2a20!important}
html[data-theme=dark] .site-header .nav-button[aria-current=page],html[data-theme=dark] .site-header .nav-button.is-active{color:#c0ebcf!important}
.learning-design-entry button,.forest-footer [data-open-evidence]{min-height:44px!important;display:inline-flex!important;align-items:center;padding:0 10px!important}
/* 14차 베타: PC 하단 '왜 이렇게 배우나요?' 44px(더 강한 규칙), 선생님 듣기 버튼 색·여백 */
body .forest-footer .learning-design-entry button[data-open-evidence]{min-height:44px!important;padding:0 12px!important;line-height:1.2!important}
.tutor .tutor-listen{color:var(--tc-pine,#1b6b52)!important;min-height:36px;margin-top:4px;position:relative;z-index:0}