/* PM #60 승인 홈. 무대 CSS는 수정하지 않고 홈·비풀이 내비에만 적용한다. */
body.home-screen {background:#F4F2EC;color:#1B1F3B;}
body.home-screen #app {max-width:1440px;padding:28px;}
body:not(.quiz-screen) .nav {background:#0E1333;color:#fff;border-color:#26306B;}
body:not(.quiz-screen) .nav>a {color:#BDC5E1;}
body:not(.quiz-screen) .nav>a.active {background:#26306B;color:#FFE9A6;}
body:not(.quiz-screen) .nav .account-sidebar .card {background:#1B234B;color:#fff;}
body:not(.quiz-screen) .nav .account-sidebar a {color:#FFE9A6;}
/* 사이드바(≥768px)는 화면 높이 전체를 남색으로 채우고 계정 영역은 맨 아래에 둔다.
   nav 높이가 내용에 따라 줄어드는 브라우저에서도 아래가 비지 않도록 레일 배경을 따로 깐다. */
@media (orientation:landscape) and (min-width:768px) and (min-height:501px) {
  body:not(.quiz-screen)::before {content:'';position:fixed;top:0;bottom:0;left:0;width:var(--sidebar);background:#0E1333;z-index:9;pointer-events:none;}
  body:not(.quiz-screen) .nav {top:0;bottom:var(--navigation-bottom,0px);height:auto;min-height:0;box-sizing:border-box;}
  body:not(.quiz-screen) .nav .account-sidebar {margin-top:auto;flex:none;border-top-color:#26306B;}
  body:not(.quiz-screen) .nav .account-sidebar .card {padding:12px;border-radius:var(--r-md);}
}
.qol-home {--night:linear-gradient(125deg,#0E1333,#26306B);--highlight:#E8BC4C;}
.qol-home h1,.qol-home h2,.qol-home h3,.qol-home p {margin:0;}
.qol-home a {text-decoration:none;}
.qol-home .portrait-label {display:none;}
.home-hero {position:relative;isolation:isolate;background:var(--night);color:#fff;border-radius:var(--r-2xl);padding:36px;overflow:hidden;margin-bottom:22px;}
.home-hero:before {content:'';position:absolute;inset:0;z-index:-1;opacity:.6;background-image:radial-gradient(circle,#FFE9A6 1px,transparent 1.5px),radial-gradient(circle,#fff8 1px,transparent 1.5px),radial-gradient(ellipse at 90% 30%,#657AE233,transparent 55%);background-size:97px 89px,157px 143px,100% 100%;background-position:30px 11px,16px 51px,0 0;pointer-events:none;}
.home-mobile-header {display:none;}
.home-brand {color:#FFE9A6;display:flex;gap:var(--sp-2);align-items:center;min-height:44px;font-size:var(--fs-body);font-weight:800;}
.home-brand img {width:30px;height:30px;}
.home-brand small {display:block;font-size:var(--fs-caption);font-weight:500;letter-spacing:.1em;}
.member-hero>.home-brand {display:none;}
.home-eyebrow {color:#FFE9A6;font-size:var(--fs-caption);letter-spacing:.08em;font-weight:700;margin-bottom:12px!important;}
.guest-hero {display:grid;grid-template-columns:1.6fr 1fr;gap:var(--sp-6);align-items:center;min-height:350px;}
.home-hero h1 {font-size:var(--fs-display);line-height:1.3;font-weight:850;letter-spacing:-.045em;}
.home-hero h1 em {font-style:normal;color:#FFE08A;}
.home-subtitle {font-size:var(--fs-body);color:#D3D8EF;line-height:1.7;margin-top:14px!important;}
.home-entry {display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:24px;max-width:640px;}
.home-entry {align-items:flex-end;}
.home-entry .input {flex:1 1 150px;min-width:0;background:#fff;color:#1B1F3B;border:2px solid transparent;border-radius:var(--r-md);height:52px;padding:12px 14px;font-size:var(--fs-body);}
.home-entry .input::placeholder {color:#6B7194;opacity:1;}
.home-entry .input:focus,.home-entry .input:focus-visible {border-color:#E8BC4C;outline:none;box-shadow:0 0 0 3px #E8BC4C66;}
.home-tier-pick {flex:1 1 190px;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1);}
.home-tier-pick label {font-size:var(--fs-caption);font-weight:700;color:#C9D0EE;}
.home-tier-box {position:relative;display:flex;}
.home-entry .home-tier-box select {flex:1 1 auto;padding-left:52px;padding-right:34px;text-align:left;text-align-last:left;cursor:pointer;}
.home-tier-gem,.home-tier-arrow {position:absolute;top:0;bottom:0;display:flex;align-items:center;pointer-events:none;}
.home-tier-gem {left:8px;top:50%;bottom:auto;width:32px;height:32px;margin-top:-16px;justify-content:center;border-radius:var(--r-sm);background:#26306B;}
.home-tier-gem .tier-gem {width:19px;height:21px;}
.home-tier-arrow {right:14px;font-size:var(--fs-caption);color:#1B1F3B;}
.home-entry .alert {width:100%;color:#762A2D;}
.home-primary {display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 20px;background:linear-gradient(#FFE08A,#E3AE35);border:0;border-radius:var(--r-md);color:#432E07;box-shadow:0 4px 0 #9C6E12;font-weight:800;font-size:var(--fs-body);cursor:pointer;}
@media (hover: hover) and (pointer: fine) {
  .home-primary:hover {filter:brightness(1.05);}
}
.home-primary:disabled {opacity:.65;}
.home-account-links {display:flex;align-items:center;gap:var(--sp-3);margin-top:12px;color:#9FA9CC;font-size:var(--fs-small);}
.home-account-links a {color:#E9EDFF;min-height:44px;display:inline-flex;align-items:center;}
.home-character {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;}
.quto-wrap {display:inline-flex;justify-content:center;line-height:0;}
.quto {overflow:visible;max-width:100%;}
.home-bubble {position:relative;background:#fff;color:#1B1F3B;padding:12px 16px;border-radius:var(--r-lg);font-size:var(--fs-small);font-weight:650;max-width:260px;line-height:1.5;text-align:center;margin-bottom:8px;}
.home-bubble:after {content:'';position:absolute;bottom:-8px;left:50%;border:7px solid transparent;border-top-color:#fff;border-bottom:0;}
.home-floating-chips {position:absolute;inset:70px 0 35px;pointer-events:none;}
.home-floating-chips span {position:absolute;padding:7px 10px;border:1px solid #FFFFFF26;background:#FFFFFF12;border-radius:var(--r-sm);backdrop-filter:blur(3px);font-size:var(--fs-caption);animation:home-chip 3.5s ease-in-out infinite;}
.home-floating-chips span:nth-child(1) {top:6%;left:0;transform:rotate(-12deg);}
.home-floating-chips span:nth-child(2) {top:2%;right:0;animation-delay:-1s;}
.home-floating-chips span:nth-child(3) {bottom:0;left:3%;animation-delay:-2s;}
.home-floating-chips span:nth-child(4) {bottom:3%;right:2%;animation-delay:-.5s;}
.member-hero {display:grid;grid-template-columns:1fr 190px;gap:var(--sp-6);align-items:center;}
.home-member-main {display:flex;align-items:center;gap:var(--sp-6);min-width:0;}
.member-hero .home-character {flex:0 0 185px;}
.member-hero .home-bubble {font-size:var(--fs-caption);padding:8px 10px;max-width:210px;}
.member-hero h1 {font-size:var(--fs-display);}
.home-greeting {min-width:0;}
.home-tier-line {display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);margin-top:16px;font-size:var(--fs-caption);color:#D5DBEF;}
.home-tier-line .tier {font-size:var(--fs-caption);}
.home-xp {height:8px;overflow:hidden;border-radius:var(--r-pill);background:#FFFFFF22;margin-top:12px;}
.home-xp>span {display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,#E3AE35,#FFE9A6);}
.home-status-chips {display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:16px;font-size:var(--fs-caption);}
.home-status-chips>span {background:#FFFFFF16;border:1px solid #FFFFFF1F;padding:4px 8px;border-radius:var(--r-sm);}
.home-trial-note {color:#D5DBEF;font-size:var(--fs-small);margin-top:16px!important;}
.home-goal {display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);}
.goal-ring {width:140px;height:140px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#E8BC4C var(--goal),#FFFFFF24 0);padding:8px;}
.goal-ring>span {width:100%;height:100%;background:#202958;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;}
.goal-ring strong {font-size:36px;line-height:1.2;}
.goal-ring small {font-size:var(--fs-body-lg);color:#B7C0DD;}
.goal-ring em {font-style:normal;font-size:var(--fs-caption);color:#FFE9A6;margin-top:4px;}
.home-goal .home-primary {width:100%;}
.resume-label {font-size:var(--fs-caption);color:#D5DBEF;text-align:center;overflow-wrap:anywhere;}
.home-calendar {grid-column:1/-1;display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-2);border-top:1px solid #FFFFFF20;padding-top:16px;margin-top:0;}
.home-calendar>div {text-align:center;background:#FFFFFF0B;padding:8px 4px;border-radius:var(--r-sm);border:1px solid transparent;font-size:var(--fs-caption);color:#CBD3ED;}
.home-calendar strong {display:block;font-size:var(--fs-body-lg);}
.home-calendar .today {border-color:#E8BC4C;}
.home-calendar .learned {background:#E8BC4C22;color:#FFE9A6;}
.home-content {display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sp-5);}
.home-card {min-width:0;background:#fff;border-radius:var(--r-xl);padding:24px;box-shadow:0 5px 20px #0E133307;border:1px solid #E9E6DE;}
.home-card-title {display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:16px;flex-wrap:wrap;}
.home-card h2,.home-features>h2 {font-size:var(--fs-title-sm);letter-spacing:-.035em;}
.home-card-title>span {font-size:var(--fs-caption);padding:4px 8px;border-radius:var(--r-sm);background:#F5F2E7;color:#7D6425;}
.home-card-title>a {font-size:var(--fs-caption);color:#536182;display:flex;align-items:center;min-height:44px;}
.home-modes {grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);}
.home-mode {min-width:0;border-radius:var(--r-xl);padding:24px;display:flex;gap:var(--sp-4);align-items:center;color:#fff;min-height:142px;box-shadow:0 4px 12px #0E133316;}
.mode-practice {background:linear-gradient(125deg,#2F6FEB,#1C3FA8);}
.mode-battle {background:linear-gradient(125deg,#E4572E,#A92A4E);}
.mode-review {background:linear-gradient(125deg,#12A39A,#0B6E6A);}
.home-mode-icon {display:grid;place-items:center;background:#FFFFFF1A;border:1px solid #FFFFFF20;border-radius:var(--r-md);flex:0 0 50px;width:50px;height:54px;font-size:var(--fs-display);}
.home-mode h2 {font-size:var(--fs-title-sm);display:flex;justify-content:space-between;gap:var(--sp-5);}
.home-mode h2>span {font-size:var(--fs-body);opacity:.7;}
.home-mode p {font-size:var(--fs-caption);color:#FFFFFFCB;margin-top:4px;}
.home-mode small {display:inline-block;font-size:var(--fs-caption);padding:4px 8px;border-radius:var(--r-xs);margin-top:12px;background:#FFFFFF1A;}
.home-daily {grid-column:span 7;}
.home-subjects {grid-column:span 5;}
.home-question {font-size:var(--fs-title-sm);line-height:1.6;font-weight:700;margin-bottom:16px!important;}
.home-grade-label {display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-small);margin-bottom:16px;}
.home-grade-label select {min-height:44px;width:auto;padding:8px 30px 8px 12px;}
.home-daily .stimulus-box {font-size:var(--fs-body-lg);max-height:220px;overflow:auto;margin:12px 0;}
.home-daily .figure-wrap {max-width:100%;margin:12px auto;}
.home-daily .question-figure {display:block;width:100%;height:auto;max-height:220px;}
.home-daily-choices {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);margin-top:16px;}
.home-daily-choices button {min-width:0;display:flex;align-items:center;gap:var(--sp-2);min-height:max(52px,var(--choice-min-height));padding:12px;border-radius:var(--r-md);background:#F8F8FA;border:1px solid #E2E4EC;font-size:var(--fs-body);text-align:left;overflow-wrap:anywhere;}
.daily-number {width:24px;height:24px;flex:0 0 24px;background:#E9ECF5;border-radius:var(--r-sm);color:#66718B;font-size:var(--fs-caption);display:grid;place-items:center;}
.home-daily-choices button>span:last-child {min-width:0;}
.home-daily-choices button.is-correct {background:#E9F7ED;border-color:#65B580;color:#256339;}
.home-daily-choices button.is-wrong {background:#FFF1E5;border-color:#D8A06C;color:#8D521F;}
.home-daily-choices button:disabled {cursor:default;opacity:1;}
.home-daily-choices button:has(.figure-wrap) {flex-wrap:wrap;}
/* 공통 그림 렌더러는 래퍼 없이 SVG를 넣는다. 선택 라벨의 폭을 그림과 분리한다. */
.home-daily-choices button:has(>.question-figure) {flex-wrap:wrap;}
.home-daily-choices button>.question-figure {flex:0 0 100%;min-width:0;}
.home-daily-choices .figure-wrap {width:100%;margin:0;}
.home-daily-choices .question-figure {max-height:100px;}
.home-daily-feedback:not(:empty) {margin-top:16px;background:#F4F6FB;border-radius:var(--r-md);padding:16px;font-size:var(--fs-body);line-height:1.7;}
.home-daily-feedback p {margin-top:8px;}
.home-daily-feedback small {display:block;font-size:var(--fs-caption);color:#536182;}
.home-subject-map {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4) var(--sp-2);}
.home-subject {background:none;border:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);min-height:76px;min-width:44px;font-size:var(--fs-caption);}
.subject-ring {display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:color-mix(in srgb,var(--subject) 10%,white);}
.member-home .subject-ring {background:conic-gradient(var(--subject) var(--mastery),#EEF0F6 0);padding:4px;}
.subject-ring>span {display:grid;place-items:center;border-radius:50%;font-size:var(--fs-title);width:100%;height:100%;}
.member-home .subject-ring>span {background:#fff;}
.home-subject strong {font-size:var(--fs-caption);font-weight:650;white-space:nowrap;}
.home-subject small {color:var(--subject);font-size:var(--fs-caption);font-weight:700;}
.subject-bar {width:80%;height:4px;background:#EEF0F6;border-radius:var(--r-sm);overflow:hidden;}
.subject-bar i {display:block;height:100%;background:var(--subject);}
.home-ranking {grid-column:span 5;}
.home-stats {grid-column:span 3;}
.home-badges {grid-column:span 4;}
.home-stats>h2 {margin-bottom:16px;}
.home-stats-grid {display:grid;gap:var(--sp-3);}
.home-stats-grid a {display:flex;flex-direction:column;gap:var(--sp-2);background:#F6F7FB;border-radius:var(--r-md);padding:16px;color:#1B1F3B;min-height:100px;}
.home-stats-grid a>span {font-size:var(--fs-caption);color:#64708B;}
.home-stats-grid strong {font-size:var(--fs-title);}
.home-stats-grid small {font-size:var(--fs-caption);color:#64708B;}
.home-rank-row {display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;gap:var(--sp-2);align-items:center;padding:12px 8px;border-bottom:1px solid #F0EEE8;font-size:var(--fs-small);min-height:48px;}
.home-rank-row>strong {overflow-wrap:anywhere;}
.home-rank-row>small {white-space:nowrap;}
.rank-number {text-align:center;font-size:var(--fs-body-lg);}
.home-rank-row>span:nth-last-child(2),.home-rank-row>small {font-size:var(--fs-caption);color:#64708B;}
.home-rank-row.mine {background:#FFF5D9;border-radius:var(--r-md);border:1px solid #F2D991;margin-top:16px;}
.home-footnote {font-size:var(--fs-caption);line-height:1.6;color:#7B8398;margin-top:16px!important;}
.home-empty {font-size:var(--fs-label);color:#7B8398;line-height:1.8;padding:16px 0;}
.home-badge-list {display:flex;flex-wrap:wrap;gap:var(--sp-3);}
.home-badge {flex:0 0 calc(33.333% - 8px);display:flex;align-items:center;flex-direction:column;gap:var(--sp-2);padding:8px 4px;filter:grayscale(1);opacity:.5;min-width:0;}
.home-badge>span:first-child {font-size:var(--fs-headline);width:50px;height:50px;display:grid;place-items:center;background:#F4F2EC;border-radius:50%;}
.home-badge strong {font-size:var(--fs-caption);text-align:center;}
.home-badge small {font-size:var(--fs-caption);color:#7B8398;}
.home-badge.earned {filter:none;opacity:1;}
.home-badge.earned>span:first-child {background:#FFF3D0;}
.home-road {grid-column:1/-1;}
.home-tier-road {display:flex;justify-content:space-between;gap:var(--sp-3);margin-top:24px;}
.home-tier-road>div {display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);min-width:60px;}
.home-tier-road svg {width:42px;height:49px;filter:drop-shadow(0 3px 4px #0E133315);}
.home-tier-road small {font-size:var(--fs-caption);color:#67718B;}
.home-features {grid-column:1/-1;}
.home-features>h2 {margin-bottom:16px;}
.home-feature-list {display:flex;gap:var(--sp-3);}
.home-feature-list>article {flex:1;min-width:0;padding:24px;}
.home-feature-list>article>span {display:block;font-size:var(--fs-display);margin-bottom:12px;}
.home-feature-list h3 {font-size:var(--fs-body);}
.home-feature-list p {font-size:var(--fs-caption);color:#7B8398;margin-top:8px;}
.home-carousel-dots {display:none;}
.home-final {grid-column:1/-1;text-align:center;background:#FFF3D4;padding:32px;border-radius:var(--r-xl);}
.home-final h2 {font-size:var(--fs-title-sm);margin-bottom:16px;}
.quto .body {animation:quto-bob 2.6s ease-in-out infinite;}
.quto .eye {animation:quto-blink 4.2s infinite;transform-box:fill-box;transform-origin:center;}
.quto .arm {animation:quto-wave 1.6s ease-in-out infinite;transform-origin:0 50%;transform-box:fill-box;}
.quto .spark {animation:quto-twinkle 1.8s ease-in-out infinite;}
.quto .shadow {animation:quto-shadow 2.6s ease-in-out infinite;transform-origin:center;transform-box:fill-box;opacity:.15;}
.quto.is-still * {animation:none!important;}
@keyframes quto-bob {50% {transform:translateY(-8px);}}
@keyframes quto-blink {0%,92%,98%,100% {transform:scaleY(1);}95% {transform:scaleY(.1);}}
@keyframes quto-wave {50% {transform:rotate(-28deg);}}
@keyframes quto-twinkle {50% {opacity:.3;}}
@keyframes quto-shadow {50% {transform:scaleX(.8);opacity:.2;}}
@keyframes home-chip {50% {translate:0 -6px;}}
/* 세로는 폭이 아니라 방향으로 판정한다. 태블릿 세로도 같은 흐름을 따른다. */
@media (orientation:portrait) {
  body:not(.quiz-screen) {padding-left:0;padding-bottom:calc(78px + env(safe-area-inset-bottom));}
  body:not(.quiz-screen) .nav {top:auto;right:0;bottom:var(--navigation-bottom,0px);width:100%;height:auto;display:grid;grid-template-columns:repeat(5,1fr);padding:8px 4px max(8px,var(--safe-area-bottom));overflow:visible;background:#fff;border-top:1px solid #E5E4ED;gap:0;}
  body:not(.quiz-screen) .nav>a {flex-direction:column;justify-content:center;min-height:56px;padding:4px;font-size:var(--fs-caption);gap:var(--sp-1);border-radius:var(--r-md);color:#77819A;}
  body:not(.quiz-screen) .nav>a.active {background:transparent;color:#1C3FA8;}
  body:not(.quiz-screen) .nav>[data-nav=battle] {margin-top:-22px;background:linear-gradient(#E4572E,#A92A4E);color:#fff;box-shadow:0 4px 12px #A92A4E40;border:4px solid #fff;height:72px;border-radius:var(--r-xl);width:68px;justify-self:center;}
  body:not(.quiz-screen) .nav>[data-nav=battle] .ico {width:25px;height:25px;}
  body:not(.quiz-screen) .nav .account-sidebar,body:not(.quiz-screen) .nav>[data-review-menu] {display:none;}
  body.home-screen .topbar {display:none;}
  body.home-screen #app {padding:0;max-width:700px;}
  .qol-home .pc-label {display:none;}
  .qol-home .portrait-label {display:block;}
  .home-hero {border-radius:0 0 var(--r-2xl) var(--r-2xl);margin-bottom:0;padding:22px 24px 28px;}
  .home-mobile-header {display:flex;justify-content:space-between;align-items:center;width:100%;gap:var(--sp-4);}
  .home-mobile-header>a {color:#FFE9A6;font-size:var(--fs-caption);min-height:44px;display:flex;align-items:center;}
  .guest-hero {display:flex;flex-direction:column;gap:0;min-height:0;}
  .guest-hero .home-character {order:1;width:100%;padding-top:18px;}
  .guest-hero .home-guest-copy {order:2;text-align:center;width:100%;margin-top:22px;}
  .guest-hero .home-eyebrow {display:none;}
  .guest-hero .quto {width:170px;height:180px;}
  .guest-hero .home-floating-chips {inset:70px 0 20px;}
  .home-hero h1 {font-size:var(--fs-headline);line-height:1.35;}
  .home-subtitle {font-size:var(--fs-small);margin-top:12px!important;}
  .home-entry {flex-direction:column;align-items:stretch;max-width:none;gap:var(--sp-3);margin-top:24px;}
  .home-tier-pick {flex:none;}
  .home-entry .input {flex:auto;height:56px;text-align:center;}
  .home-entry .home-primary {min-height:56px;font-size:var(--fs-body);}
  .home-account-links {justify-content:center;margin-top:12px;font-size:var(--fs-small);}
  .home-account-links>a:first-child,.home-account-links>span {display:none;}
  .home-content {display:flex;flex-direction:column;gap:var(--sp-5);padding:24px 20px;}
  .home-card {padding:20px;border-radius:var(--r-xl);}
  .home-card h2,.home-features>h2 {font-size:var(--fs-title-sm);}
  .guest-home .home-modes,.guest-home .home-road {display:none;}
  .guest-home .home-features {order:-1;}
  .home-feature-list {overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}
  .home-feature-list>article {flex:0 0 88%;scroll-snap-align:start;}
  .home-carousel-dots {display:flex;justify-content:center;}
  .home-carousel-dots button {border:0;background:transparent;width:44px;height:44px;padding:16px;display:grid;place-items:center;}
  .home-carousel-dots button span {width:7px;height:7px;border-radius:50%;background:#C6C9D4;}
  .home-carousel-dots button[aria-pressed=true] span {background:#1C3FA8;width:18px;border-radius:var(--r-xs);}
  .home-modes {display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px;gap:var(--sp-3);}
  .home-mode {flex:0 0 78%;scroll-snap-align:start;min-height:132px;padding:20px;gap:var(--sp-3);}
  .home-mode h2 {font-size:var(--fs-title-sm);}
  .home-mode small {font-size:var(--fs-caption);}
  .home-subject-map {display:flex;overflow-x:auto;gap:var(--sp-4);padding-bottom:8px;}
  .home-subject {flex:0 0 60px;}
  .subject-bar {display:none;}
  .home-question {font-size:var(--fs-body-lg);}
  .home-daily-choices {gap:var(--sp-2);}
  .home-daily-choices button {font-size:var(--fs-label);padding:11px 9px;gap:var(--sp-2);min-height:max(56px,var(--choice-min-height));}
  .home-daily .question-figure {max-height:240px;}
  .home-daily .stimulus-box {max-height:260px;}
  .home-stats-grid {grid-template-columns:1fr 1fr;gap:var(--sp-3);}
  .home-stats-grid a {padding:16px 12px;}
  .home-stats-grid strong {font-size:var(--fs-title);}
  .home-badge-list {flex-wrap:nowrap;overflow-x:auto;gap:var(--sp-4);}
  .home-badge {flex:0 0 68px;}
  .member-hero {grid-template-columns:1fr 82px;gap:var(--sp-4) var(--sp-3);padding:22px 20px 18px;}
  .member-hero>.home-brand {display:flex;grid-column:1/-1;}
  .home-member-main {flex-direction:column;align-items:stretch;gap:var(--sp-3);}
  .member-hero .home-character {flex:auto;align-items:flex-start;flex-direction:row;gap:var(--sp-2);}
  .member-hero .home-character .quto-wrap {order:-1;}
  .member-hero .home-character .quto {width:82px;height:87px;}
  .member-hero .home-bubble {font-size:var(--fs-caption);max-width:150px;margin:0;align-self:center;}
  .member-hero .home-bubble:after {bottom:50%;left:-8px;border:8px solid transparent;border-left:0;border-right-color:#fff;}
  .member-hero h1 {font-size:var(--fs-title);}
  .member-hero .home-eyebrow {display:none;}
  .home-tier-line {font-size:var(--fs-caption);gap:var(--sp-2);}
  .home-tier-line .tier {font-size:var(--fs-caption);}
  .home-status-chips {font-size:var(--fs-caption);gap:var(--sp-2);margin-top:12px;}
  .home-status-chips>span {padding:4px 8px;}
  .home-goal {align-self:center;gap:var(--sp-3);}
  .goal-ring {width:84px;height:84px;padding:4px;}
  .goal-ring strong {font-size:var(--fs-title);}
  .goal-ring small {font-size:var(--fs-caption);}
  .goal-ring em {font-size:var(--fs-caption);}
  .home-goal .home-primary {padding:8px 4px;font-size:var(--fs-small);min-height:var(--h-lg);white-space:nowrap;}
  .resume-label {font-size:var(--fs-caption);}
  .home-calendar {gap:var(--sp-1);padding-top:12px;}
  .home-calendar>div {font-size:var(--fs-caption);}
}
/* TV 미러링/휴대폰 가로: 왼쪽 고정 상태 패널, 오른쪽만 스크롤한다. */
@media (orientation:landscape) and (max-height:500px) {
  body.home-screen {padding:0;height:100dvh;overflow:hidden;}
  body.home-screen .topbar {display:none;}
  body.home-screen #app {padding:0;max-width:none;height:100dvh;}
  body.home-screen .qol-home {height:100%;}
  body.home-screen .nav {top:auto;left:12px;right:auto;bottom:var(--navigation-bottom,0px);display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-1);width:276px;padding:0 0 var(--safe-area-bottom);border:0;height:calc(50px + var(--safe-area-bottom));background:transparent;overflow:visible;}
  body.home-screen .nav>a {flex-direction:column;font-size:var(--fs-caption);padding:4px;min-height:44px;gap:var(--sp-1);justify-content:center;background:#FFFFFF10;border-radius:var(--r-sm);}
  body.home-screen .nav>a .ico {width:17px;height:17px;}
  body.home-screen .nav .account-sidebar,body.home-screen .nav>[data-review-menu] {display:none;}
  body.home-screen:has(.guest-home) .nav {display:none;}
  .guest-hero {height:100%;border-radius:0;padding:26px 38px;margin:0;grid-template-columns:1.2fr 1fr;gap:var(--sp-6);min-height:0;}
  .guest-hero .home-mobile-header {display:flex;position:absolute;top:12px;left:38px;right:38px;justify-content:space-between;}
  .home-mobile-header>a {display:flex;align-items:center;min-height:44px;color:#FFE9A6;font-size:var(--fs-caption);}
  .guest-hero .home-guest-copy {padding-top:40px;}
  .guest-hero h1 {font-size:var(--fs-headline);}
  .guest-hero .home-eyebrow {display:none;}
  .guest-hero .home-subtitle {font-size:var(--fs-caption);margin-top:10px!important;}
  .guest-hero .home-entry {margin-top:16px;gap:var(--sp-2);}
  .guest-hero .home-entry .input {height:48px;flex-basis:120px;}
  .guest-hero .home-primary {padding:10px 14px;}
  .guest-hero .home-account-links {margin-top:5px;}
  .guest-home .home-content {display:none;}
  .guest-hero .home-character {padding-top:20px;}
  .guest-hero .quto {width:200px;height:212px;}
  .guest-hero .home-bubble {font-size:var(--fs-caption);}
  .guest-hero .home-floating-chips {inset:75px 0 25px;}
  /* 기존 배경은 유지한다. flex 스크롤의 끝 여백은 실제 항목으로 확보해 독 아래로 버튼이 숨지 않게 한다. */
  .member-hero {position:fixed;left:0;top:0;bottom:0;width:300px;border-radius:0;padding:14px 18px 16px;margin:0;display:flex;flex-direction:column;gap:var(--sp-3);align-items:stretch;justify-content:flex-start;overflow-x:hidden;overflow-y:auto;}
  .member-hero>* {flex-shrink:0;}
  .member-hero:after {content:'';display:block;flex:0 0 var(--navigation-clearance,74px);pointer-events:none;}
  .member-hero>.home-brand {display:flex;min-height:38px;font-size:var(--fs-small);}
  .home-member-main {gap:var(--sp-2);align-items:center;}
  .member-hero .home-character {flex:0 0 96px;}
  .member-hero .quto {width:96px;height:102px;}
  .member-hero .home-bubble {font-size:var(--fs-caption);padding:4px 8px;max-width:118px;}
  .member-hero .home-eyebrow {display:none;}
  .member-hero h1 {font-size:var(--fs-body);line-height:1.4;}
  .home-tier-line {margin-top:8px;gap:var(--sp-1);font-size:var(--fs-caption);}
  .home-tier-line .tier {font-size:var(--fs-caption);}
  .home-status-chips {gap:var(--sp-1);font-size:var(--fs-caption);margin-top:8px;}
  .home-status-chips>span {padding:2px 4px;}
  .home-xp {height:5px;margin-top:7px;}
  .home-goal {display:grid;grid-template-columns:56px 1fr;gap:var(--sp-2) var(--sp-3);margin-top:4px;}
  .goal-ring {grid-row:span 2;width:56px;height:56px;padding:4px;}
  .goal-ring strong {font-size:var(--fs-body-lg);}
  .goal-ring small {font-size:var(--fs-caption);}
  .goal-ring em {font-size:var(--fs-caption);margin-top:2px;}
  .home-goal .home-primary {font-size:var(--fs-small);min-height:44px;padding:8px;}
  .resume-label {font-size:var(--fs-caption);text-align:left;}
  .member-hero .home-calendar {display:none;}
  .member-home .home-content {margin-left:300px;height:100%;overflow-y:auto;overscroll-behavior:contain;padding:14px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-3);align-content:start;}
  .home-modes {grid-column:1/-1;gap:var(--sp-2);}
  .home-mode {padding:14px 10px;gap:var(--sp-2);min-height:114px;align-items:flex-start;flex-direction:column;}
  .home-mode-icon {width:36px;height:36px;flex-basis:36px;font-size:var(--fs-title-sm);border-radius:var(--r-sm);}
  .home-mode h2 {font-size:var(--fs-body);gap:var(--sp-3);}
  .home-mode p {font-size:var(--fs-caption);}
  .home-mode small {font-size:var(--fs-caption);margin-top:8px;}
  .home-card {padding:16px;border-radius:var(--r-lg);}
  .home-card h2 {font-size:var(--fs-body);}
  .home-card-title {gap:var(--sp-2);margin-bottom:12px;}
  .home-card-title>span {font-size:var(--fs-caption);}
  .home-daily {grid-column:span 4;}
  .home-subjects {grid-column:span 2;}
  .home-question {font-size:var(--fs-body);}
  .home-daily-choices {gap:var(--sp-2);}
  .home-daily-choices button {font-size:var(--fs-small);padding:8px;gap:var(--sp-2);min-height:max(var(--h-lg),var(--choice-min-height));}
  .daily-number {width:20px;height:20px;flex-basis:20px;font-size:var(--fs-caption);}
  .home-subject-map {grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3) var(--sp-1);}
  .subject-ring {width:44px;height:44px;}
  .home-subject strong {font-size:var(--fs-caption);}
  .home-ranking {grid-column:span 3;}
  .home-rank-row {font-size:var(--fs-caption);gap:var(--sp-1);grid-template-columns:24px minmax(0,1fr) auto auto;padding:8px 0;}
  .home-rank-row small {font-size:var(--fs-caption);}
  .home-ranking .home-card-title>a {font-size:var(--fs-caption);}
  .home-stats {grid-column:span 3;}
  .home-badges {grid-column:1/-1;}
  .home-badge-list {flex-wrap:nowrap;overflow-x:auto;}
  .home-badge {flex:0 0 65px;}
  .home-road,.home-features {display:none;}
}
@media (prefers-reduced-motion:reduce) {
  .quto *,.home-floating-chips span {animation:none!important;transition:none!important;}
  .qol-home * {scroll-behavior:auto!important;}
}
.qol-home .home-account-links a,.qol-home .home-mobile-header>a {min-width:44px;justify-content:center;}
@media (orientation:landscape) and (max-height:500px) {
  .member-hero>.home-brand {min-height:44px;}
}
.home-hero {text-align:left;}
@media (orientation:portrait) {
  .member-home .home-road,.member-home .home-features {display:none;}
  .member-home .home-modes {order:0;}
  .member-home .home-daily {order:1;}
  .member-home .home-subjects {order:2;}
  .member-home .home-stats {order:3;}
  .member-home .home-ranking {order:4;}
  .member-home .home-badges {order:6;}
}
@media (orientation:landscape) and (max-height:500px) {
  .member-home .home-modes {order:0;}
  .member-home .home-daily {order:1;}
  .member-home .home-subjects {order:2;}
  .member-home .home-ranking {order:3;}
  .member-home .home-stats {order:5;}
  .member-home .home-badges {order:6;}
}
body:not(.quiz-screen) .nav .account-sidebar .btn {background:#26306B;border-color:#465383;color:#FFE9A6;}
body:not(.quiz-screen) .nav .account-sidebar .btn.primary {background:#2F6FEB;color:#fff;}
@media (orientation:landscape) and (max-height:500px) {
  html:has(body.home-screen),body.home-screen #app,.member-home .home-content {min-height:0;}
  html:has(body.home-screen) {height:100%;overflow:hidden;}
  body.home-screen .home-content {min-width:0;}
}

/* 홈의 가로 클리핑은 콘텐츠에만 둔다. 독의 조상인 html/body는 세로 문서 스크롤을 그대로 쓴다.
   iOS standalone에서 고정 UI와 루트 클리핑을 함께 쓰는 조건을 피하며 가로 레일은 유지한다.
   풀이 무대·화이트보드·펜 캔버스의 touch-action 은 body.home-screen 밖이라 건드리지 않는다. */
html:has(body.home-screen),body.home-screen {max-width:100%;}
body.home-screen {touch-action:pan-y pinch-zoom;}
.qol-home {position:relative;max-width:100%;overflow-x:hidden;}
@supports (overflow:clip) {
  .qol-home {overflow-x:clip;}
}
body.home-screen :is(.home-feature-list,.home-modes,.home-subject-map,.home-badge-list) {overscroll-behavior-x:contain;touch-action:pan-x pan-y;}

/* 10단계 티어 길: 작은 화면은 레일 안에서만 스크롤한다. */
.home-tier-road {overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y;padding-bottom:8px;}
.home-tier-road>div {flex:0 0 66px;}
.home-tier-road small {text-align:center;overflow-wrap:anywhere;}

/* 상태바 아래로 홈 조작부를 옮기되 화면 전체 높이는 유지한다. */
@media (orientation:portrait) {
  .home-hero { padding-top:calc(22px + var(--safe-area-top)); }
}
@media (orientation:landscape) and (max-height:500px) {
  .guest-hero .home-mobile-header { top:calc(12px + var(--safe-area-top)); }
  .guest-hero { padding-top:calc(26px + var(--safe-area-top)); }
  .member-hero { top:var(--safe-area-top); }
  .member-home .home-content { padding-top:calc(14px + var(--safe-area-top)); }
}

/* PM #85: 가족 홈 카드는 격자 전체 폭을 쓰고 버튼을 한 줄 묶음으로 둔다(가로 홈에서 글자가 세로로 깨지던 문제). */
.home-content .family-home {grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;padding:16px 24px;}
.home-content .family-home .btn {flex:1 1 160px;}
@media (orientation:landscape) and (max-height:500px) {.home-content .family-home {padding:12px 16px;order:4;}}

/* #2748: 휴대폰의 기존 순서를 유지하고, 넓은 홈에서 요약 카드의 최소 폭을 보장한다. */
.home-overview {display:contents;}
@media (min-width:768px) and (min-height:501px) {
  body.home-screen #app {max-width:1440px;padding:var(--sp-6);}
  .home-content {display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sp-5);padding:0;align-items:start;}
  .qol-home .home-content>* {order:0;}
  .home-card {padding:var(--sp-6);}
  .home-overview {grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:var(--sp-5);align-items:start;}
  .home-overview>.home-card {grid-column:auto;order:0;}
  .qol-home .home-content>#seasonHome,.qol-home .home-content>#growthHome {grid-column:span 6;}
  .home-content>.home-daily {grid-column:span 7;}
  .home-content>.home-subjects {grid-column:span 5;}
  .home-modes {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);overflow:visible;padding-bottom:0;}
  .home-mode {padding:var(--sp-5);gap:var(--sp-3);align-items:center;min-height:142px;background-blend-mode:multiply;background-color:rgba(0,0,0,.24);}
  .home-mode>:last-child {flex:1;min-width:0;}
  .home-mode h2 {font-size:var(--fs-title-sm);line-height:1.4;gap:var(--sp-3);}
  .home-mode h2 .nav-game-label {display:inline-flex;flex-direction:row;gap:0;font-size:inherit;line-height:inherit;opacity:1;}
  .home-mode p {font-size:var(--fs-label);line-height:1.5;color:#fff;}
  .home-mode small {font-size:var(--fs-caption);color:#fff;background:#0002;}
  .home-subject-map {display:grid;grid-template-columns:repeat(auto-fit,minmax(54px,1fr));gap:var(--sp-4) var(--sp-2);overflow:visible;padding-bottom:0;}
  .home-subject small {color:var(--text);}
  .home-footnote,.home-empty,.home-feature-list p,.home-tier-road small {color:var(--muted);}
  .member-home .home-road,.member-home .home-features {display:block;grid-column:1/-1;}
  .home-tier-road {gap:var(--sp-4);}
  .home-feature-list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);overflow:visible;}
  .home-feature-list>article {min-width:0;}
  .home-feature-list p {font-size:var(--fs-label);line-height:1.5;}
  .home-carousel-dots {display:none;}
}
/* 남색 사이드바의 보조 로그인 버튼은 밝은 면 위 금색 글자가 되지 않도록 한다. */
body:not(.quiz-screen) .nav .account-sidebar a.btn {background:transparent;border-color:currentColor;}