/* 학습 설정: a calm side sheet (bottom sheet on phones) with one card per setting. */
#reading-dialog[open]{position:fixed;inset:0 0 0 auto;margin:0;width:min(460px,100vw);max-width:100vw;height:auto;max-height:none;top:0;bottom:0;padding:0!important;border:0;border-radius:24px 0 0 24px;background:var(--pl-bg);color:var(--pl-ink);box-shadow:-24px 0 60px rgba(10,30,24,.18);display:flex;flex-direction:column;overflow:hidden;animation:sp-in .28s var(--pl-ease,ease) both}
#reading-dialog::backdrop{background:rgba(12,30,24,.35);backdrop-filter:blur(2px)}
@keyframes sp-in{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
#reading-dialog>.dialog-header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:18px 20px 6px;background:var(--pl-bg)}
#reading-dialog>.dialog-header h2{margin:0;font-size:22px;letter-spacing:-.4px}
#reading-dialog>.dialog-header button{width:40px;height:40px;min-height:40px;border-radius:50%;border:1px solid var(--pl-line);background:var(--pl-surface)}
#reading-dialog>.settings-note{margin:0 20px 10px!important;font-size:13px;color:var(--pl-muted)}
#reading-dialog .settings-tabs{position:sticky;top:64px;z-index:2;display:flex!important;gap:4px;margin:0 16px 8px!important;padding:4px!important;border-radius:14px!important;background:var(--pl-soft)!important;overflow-x:auto;scrollbar-width:none}
#reading-dialog .settings-tabs [role=tab]{flex:1 0 auto;min-height:40px;padding:0 12px!important;border:0!important;border-radius:11px!important;background:transparent!important;font-weight:700;font-size:14px;color:var(--pl-muted)!important;white-space:nowrap}
#reading-dialog .settings-tabs [role=tab][aria-selected=true]{background:var(--pl-surface)!important;color:var(--pl-pine)!important;box-shadow:0 1px 3px rgba(20,40,32,.12)}
#settings-tab-reading::before{content:"🖥️ "}#settings-tab-listening::before{content:"🎧 "}#settings-tab-learning::before{content:"🌱 "}#settings-tab-feedback::before{content:"💬 "}#settings-tab-developer::before{content:"ℹ️ "}
#reading-dialog [role=tabpanel]{flex:1;overflow-y:auto;padding:6px 16px 90px!important;display:grid;gap:12px;align-content:start}
#reading-dialog [role=tabpanel][hidden]{display:none!important}
#reading-dialog .appearance-field,#reading-dialog .listening-fields,#reading-dialog .settings-toggle,#reading-dialog .reading-preview,#reading-dialog .studio-route-settings,#reading-dialog .pronunciation-style,#reading-dialog #feedback-form{margin:0!important;padding:14px 16px!important;border:1px solid var(--pl-line)!important;border-radius:16px!important;background:var(--pl-surface)!important;box-shadow:none!important}
#reading-dialog fieldset.appearance-field legend{float:left;width:100%;margin-bottom:10px;font-weight:800;font-size:14px}
#reading-dialog .appearance-field label,#reading-dialog .listening-fields label{font-weight:700;font-size:14px}
#reading-dialog .choice-grid{display:flex!important;flex-wrap:wrap;gap:6px!important}
#reading-dialog .choice-grid button{flex:1 1 0;min-height:40px;border-radius:999px!important;border:1px solid var(--pl-line-strong)!important;background:var(--pl-surface)!important;font-weight:700;font-size:13px}
#reading-dialog .choice-grid button[aria-pressed=true],#reading-dialog .choice-grid button.active{background:var(--pl-pine)!important;border-color:var(--pl-pine)!important;color:#fff!important}
#reading-dialog select{width:100%;min-height:44px;border-radius:12px;border:1px solid var(--pl-line);background-color:var(--pl-surface-2);font-weight:600}
#reading-dialog input[type=range]{accent-color:var(--pl-pine);width:100%}
#reading-dialog h3{margin:6px 2px 0;font-size:13px;letter-spacing:.3px;color:var(--pl-muted);text-transform:uppercase}
#reading-dialog .settings-note,#reading-dialog .font-scope-note{font-size:12.5px!important;color:var(--pl-muted)!important;margin:4px 2px 0!important;line-height:1.5}
/* Toggles render as switches */
#reading-dialog .settings-toggle{display:flex!important;align-items:center;justify-content:space-between;gap:12px;font-weight:700;cursor:pointer}
#reading-dialog .settings-toggle input[type=checkbox]{order:2;appearance:none;-webkit-appearance:none;flex:none;width:46px;height:28px;margin:0;border-radius:999px;background:var(--pl-line-strong);position:relative;cursor:pointer;transition:background .2s}
#reading-dialog .settings-toggle input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
#reading-dialog .settings-toggle input[type=checkbox]:checked{background:var(--pl-pine)}
#reading-dialog .settings-toggle input[type=checkbox]:checked::after{transform:translateX(18px)}
#reading-dialog .reset-reading{justify-self:start;border-radius:999px!important}
/* Sticky footer "완료" */
#reading-dialog>footer,#reading-dialog .dialog-actions{position:sticky;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--pl-bg) 30%)}
@media (max-width:640px){
  #reading-dialog[open]{inset:auto 0 0 0;width:100vw;height:92dvh;border-radius:24px 24px 0 0;animation-name:sp-up}
  @keyframes sp-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
}

/* 내정보: profile hero + clean stat cards */
#profile-view{max-width:880px;margin:0 auto}
.pf-hero{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;margin:6px 0 18px;padding:22px;border-radius:24px;background:linear-gradient(120deg,#eef8f1,#fffdf6);border:1px solid var(--pl-line);box-shadow:var(--pl-shadow)}
.pf-avatar{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:var(--pl-pine);color:#fff;font-size:28px;font-weight:800}
.pf-name{margin:0;font-size:22px;letter-spacing:-.4px}.pf-email{margin:2px 0 8px;color:var(--pl-muted);font-size:14px}
.pf-plan{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-weight:800;font-size:13px;background:var(--pl-soft);color:var(--pl-muted)}
.pf-plan[data-plan=premium],.pf-plan[data-plan=business]{background:linear-gradient(135deg,#fff3cf,#fde3a0);color:#7a4b00}
.pf-actions{display:grid;gap:8px;justify-items:end}
.pf-actions a,.pf-actions button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:12px;font:inherit;font-weight:800;font-size:14px;text-decoration:none;cursor:pointer;border:1px solid var(--pl-line-strong);background:var(--pl-surface);color:var(--pl-ink)}
.pf-actions .pf-primary{background:var(--pl-pine);border-color:var(--pl-pine);color:#fff}
.pf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.pf-stat{padding:16px;border-radius:18px;background:var(--pl-surface);border:1px solid var(--pl-line);text-align:center}
.pf-stat strong{display:block;font-size:26px;color:var(--pl-pine);letter-spacing:-.5px}.pf-stat span{font-size:13px;color:var(--pl-muted)}
#profile-view .profile-panel,#profile-view .profile-metrics>*{border-radius:18px!important;border:1px solid var(--pl-line)!important;box-shadow:none!important;background:var(--pl-surface)!important}
#profile-view .profile-heading{display:none}
@media (max-width:640px){.pf-hero{grid-template-columns:auto 1fr}.pf-actions{grid-column:1/-1;justify-items:stretch;grid-template-columns:1fr 1fr}.pf-stats{grid-template-columns:repeat(2,1fr)}}
#profile-view .account-actions,#profile-view #profile-signin,#profile-view #account-status:empty{display:none!important}
#reading-dialog fieldset.appearance-field{display:block;min-width:0}
#reading-dialog fieldset.appearance-field legend{float:none;padding:0;margin:0 0 10px}
#reading-dialog .choice-grid{width:100%;min-width:0}
#reading-dialog .choice-grid button{min-width:0;padding:0 8px}
#reading-dialog [role=tabpanel]{overflow-x:hidden}