:root{--blue:#2e4cff;--ink:#172036;--muted:#656d7d;--paper:#fafbff;--yellow:#ffe87a}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Pretendard,'Noto Sans KR',system-ui,sans-serif;font-size:16px;line-height:1.6}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ff8066;outline-offset:4px}header{max-width:1160px;margin:auto;padding:26px 24px;display:flex;align-items:center;justify-content:space-between}.logo{color:var(--ink);font-size:24px;font-weight:900;text-decoration:none;display:flex;align-items:center;gap:10px}.mark{display:grid;place-items:center;background:var(--blue);color:var(--yellow);width:38px;height:38px;border-radius:12px;font-size:19px}.small{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:1px;margin-left:4px}.nav-button{border:0;background:none;font-size:14px;color:var(--muted)}main{max-width:1160px;margin:auto;padding:10px 24px 70px}.hero{background:var(--blue);border-radius:28px;display:grid;grid-template-columns:1.1fr 1fr;overflow:hidden;color:white;min-height:300px}.hero-copy{padding:34px 38px;z-index:1}.eyebrow{font-size:13px;font-weight:700;letter-spacing:2px;color:var(--yellow)}h1{font-size:40px;line-height:1.35;letter-spacing:-1.5px;margin:14px 0}h2{font-size:26px;line-height:1.4;letter-spacing:-.7px}.hero p{color:#e4e9ff;margin:12px 0 22px}.primary{background:var(--blue);color:#fff;border:0;border-radius:12px;padding:14px 22px;font-weight:700}.hero .primary{background:var(--yellow);color:var(--ink)}.hero-image{width:100%;height:100%;object-fit:cover;min-height:300px}.hero-side{display:flex;align-items:center;justify-content:center;background:#2441e8}.hero-side .big-type{font-size:74px;line-height:1;font-weight:900;letter-spacing:-5px;color:#ffe87a;transform:rotate(-8deg)}.intro-row{display:flex;justify-content:space-between;align-items:end;margin:34px 0 18px}.intro-row h2{margin:0}.intro-row p{margin:4px 0 0;color:var(--muted);font-size:14px}.count{font-size:14px;color:var(--muted)}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.filter{border:1px solid #e0e4ee;background:white;padding:9px 19px;border-radius:99px;font-size:14px;font-weight:600}.filter.active{background:var(--ink);border-color:var(--ink);color:white}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{border:1px solid #e5e8f1;border-radius:19px;overflow:hidden;background:white;color:inherit;text-decoration:none;text-align:left;transition:transform .18s,box-shadow .18s;padding:0;width:100%;display:block}.card:hover{transform:translateY(-4px);box-shadow:0 12px 26px #1c285b12}.card-cover{height:150px;padding:23px;display:flex;justify-content:space-between;align-items:end;position:relative}.card-cover .symbol{font-size:54px;line-height:1.2}.cover-label{align-self:start;font-size:12px;letter-spacing:1.5px;font-weight:800;opacity:.65}.card-number{font-size:44px;font-weight:900;opacity:.14;line-height:1}.card-body{padding:18px 20px 20px}.badge{font-size:12px;color:var(--blue);font-weight:700}.card h3{font-size:20px;line-height:1.5;margin:7px 0;letter-spacing:-.5px}.card p{font-size:14px;color:var(--muted);margin:0 0 13px}.meta{font-size:12px;color:#717989}.note{margin:38px 0 0;border-top:1px solid #e2e6ef;padding-top:24px;color:var(--muted);font-size:14px}footer{padding:34px 24px;max-width:1112px;margin:auto;border-top:1px solid #e2e6ef;color:var(--muted);font-size:14px}footer b{color:var(--ink);font-size:20px}footer p{margin:4px 0 16px}footer button{border:0;background:none;color:inherit;padding:0;margin-right:20px;font-size:14px}footer small{display:block;margin-top:20px;font-size:12px}.play{max-width:660px;margin:10px auto 30px}.back{border:0;background:none;padding:8px 0;color:var(--muted);font-size:14px}.play-panel{background:white;border:1px solid #e3e7f0;border-radius:24px;padding:32px;margin-top:18px}.progress-meta{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}.progress{height:7px;background:#eef0f7;border-radius:10px;margin:14px 0 28px;overflow:hidden}.progress span{display:block;height:100%;background:var(--blue);transition:width .2s}.question{font-size:26px;line-height:1.5;margin:0 0 26px}.option{display:block;width:100%;text-align:left;border:1px solid #dee3ee;border-radius:13px;padding:16px 18px;margin:10px 0;background:white;line-height:1.6}.option:hover{background:#f0f3ff;border-color:var(--blue)}.option strong{color:var(--blue);margin-right:12px}.result{text-align:center}.result-icon{font-size:64px}.result-tag{font-size:14px;color:var(--blue);font-weight:700}.result h1{font-size:32px}.result p{color:var(--muted);text-align:left;line-height:1.9}.result .insight{background:#f3f5ff;border-radius:14px;padding:18px 22px;text-align:left;margin:24px 0}.insight h3{font-size:16px;margin:0 0 7px}.insight p{margin:0;font-size:15px}.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.secondary{border:1px solid #dfe3ec;background:white;border-radius:12px;padding:12px 20px}.recommend{margin-top:36px}.recommend .grid{grid-template-columns:1fr 1fr}.recommend .card-cover{height:100px}.recommend .card h3{font-size:17px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:12px 24px;border-radius:12px;display:none;z-index:10;max-width:90%;font-size:14px}.review{border-top:1px solid #e6e9f1;text-align:left;padding:17px 0}.review p{margin:5px 0;font-size:14px}.review b{font-size:16px}.info p{line-height:1.9;color:var(--muted)}@media(max-width:760px){header{padding:20px}.small{display:none}.logo{font-size:21px}main{padding:4px 18px 45px}.hero{grid-template-columns:1fr;border-radius:22px;min-height:0}.hero-copy{padding:28px}.hero h1{font-size:32px}.hero-side{display:none}.hero-image{height:190px;min-height:0}.grid{grid-template-columns:1fr 1fr;gap:12px}.card-cover{height:118px;padding:17px}.card-cover .symbol{font-size:40px}.card-body{padding:14px}.card h3{font-size:17px}.card p{font-size:13px}.card-number{font-size:32px}.intro-row h2{font-size:23px}.count{display:none}.filter{padding:8px 15px}.play-panel{padding:25px 20px}.question{font-size:23px}.recommend .grid{gap:12px}}@media(max-width:380px){.grid{grid-template-columns:1fr}.hero-copy{padding:24px}.nav-button{font-size:12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.mbti-axis .progress{margin:10px 0;background:#f6cdd6}.mbti-axis{margin:20px 0}.mbti-axis .meta{margin:6px 0}.mbti-ratios{margin:28px 0;text-align:left}

.picture-scene{display:block;width:100%;height:auto;border-radius:15px;margin:20px 0}.picture-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.picture-options .option{margin:0}.picture-options .option:last-child{grid-column:1/-1}

.attraction-play{max-width:850px}.attraction-note{margin-top:22px}.attraction-play .picture-scene{background:#f4f4f4}.attraction-play .picture-options{grid-template-columns:repeat(5,1fr)}.attraction-play .picture-options .option{padding:13px 8px;text-align:center;font-size:14px}.attraction-play .picture-options strong{display:block;margin:0 0 4px;font-size:20px}.attraction-play .picture-options .option:last-child{grid-column:auto}@media(max-width:760px){.attraction-play .play-panel{padding:20px 12px}.attraction-play .picture-options{grid-template-columns:1fr 1fr}.attraction-play .picture-options .option:last-child{grid-column:1/-1}.attraction-play .picture-options strong{display:inline;margin-right:8px}}

.attraction-cover{height:170px;background:#eef0f5;overflow:hidden}.attraction-cover img{width:100%;height:100%;object-fit:contain;display:block}@media(max-width:760px){.attraction-cover{height:125px}}
.corner-welcome{background:var(--blue);color:white;border-radius:24px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;margin-bottom:26px}.corner-welcome>div{padding:26px 32px}.corner-welcome h1{font-size:30px;letter-spacing:-1px;margin:8px 0}.corner-welcome p{margin:0;color:#e4e9ff}.corner-welcome img{width:240px;height:180px;object-fit:cover}.corner-nav{margin-bottom:35px}.corner-all{border:1px solid #dee3ec;background:white;padding:8px 16px;border-radius:99px;font-size:14px;margin-bottom:16px}.corner-all span{margin-left:9px;opacity:.7}.corner-all.selected{color:white;background:var(--ink);border-color:var(--ink)}.corner-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.corner-tab{display:flex;align-items:start;text-align:left;gap:10px;padding:17px 14px;background:white;border:1px solid #dde2ee;border-radius:16px;color:var(--ink);min-height:114px}.corner-tab:hover,.corner-tab.selected{border-color:var(--corner-color);box-shadow:0 0 0 1px var(--corner-color)}.corner-tab.selected{background:#f5f7ff}.corner-tab-index{color:var(--corner-color);font-size:13px;font-weight:800;margin-top:3px}.corner-tab-content{flex:1}.corner-tab-content b{display:block;font-size:17px;letter-spacing:-.5px;line-height:1.5}.corner-tab-content>span{display:block;font-size:14px;line-height:1.6;color:var(--muted);margin-top:5px}.corner-tab-count{font-size:12px;background:#eef1f8;border-radius:99px;padding:1px 7px}.corner-section{margin:0 0 42px}.corner-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px;padding-top:16px;border-top:1px solid #e1e6ef}.corner-heading h2{margin:4px 0}.corner-heading p{margin:0;color:var(--muted);font-size:14px}.corner-kicker{font-size:12px;letter-spacing:1.5px;font-weight:800}.corner-total{font-size:14px;color:var(--muted)}@media(max-width:900px){.corner-tabs{grid-template-columns:1fr 1fr}.corner-tab{min-height:95px}}@media(max-width:760px){.corner-welcome>div{padding:23px}.corner-welcome h1{font-size:26px}.corner-welcome img{display:none}.corner-welcome p{font-size:14px}.corner-tabs{gap:10px}.corner-tab{padding:14px 10px;gap:7px}.corner-tab-content b{font-size:16px}.corner-tab-count{display:none}.corner-tab-index{font-size:12px}.corner-tab-content>span{font-size:14px}.corner-section{margin-bottom:32px}}@media(max-width:380px){.corner-tabs{grid-template-columns:1fr}}
.idol-banner,.idol-result-head{padding:24px;border-radius:20px;background:linear-gradient(140deg,#f3e9ff,#ffeef3);margin-bottom:24px}.idol-spark{font-size:64px;color:#a144d2;line-height:1.3}.idol-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.idol-group{border:2px solid #e6daed;background:#fff;border-radius:16px;padding:20px 12px;text-align:left;cursor:pointer;font:inherit}.idol-group b,.idol-group span{display:block}.idol-group b{font-size:18px}.idol-group span{font-size:13px;margin-top:8px;color:#645d70}.idol-group.selected{border-color:#a144d2;background:#f7effc}.idol-group:focus-visible{outline:3px solid #2e4cff;outline-offset:3px}.idol-traits{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.idol-traits span{background:#f3e9ff;border-radius:999px;padding:8px 12px;font-size:14px;color:#6e318e}.idol-cover{background:linear-gradient(140deg,#efe1ff,#ffdfe8);color:#8434ad}.idol-details{margin-top:24px;font-size:14px;line-height:1.8}.idol-details summary{cursor:pointer}.idol-result-head h1{font-size:clamp(32px,7vw,52px)}@media(max-width:480px){.idol-group{padding:16px 10px}.idol-group b{font-size:15px}.idol-banner{padding:20px 16px}}
