/* ToolayBox 상단바 베이스 (다른 테스트와 같은 톤) */
:root{--tb-page-bg:#f5f4f0;--tb-page-ink:#1c1c1a;--tb-page-line:#e3e1db;--tb-page-sub:#7a776f}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--tb-page-bg);color:var(--tb-page-ink);-webkit-font-smoothing:antialiased}
.app{display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;border-bottom:1px solid var(--tb-page-line);background:#fbfbf9;flex-wrap:wrap;font-family:"IBM Plex Sans KR",Pretendard,sans-serif}
.brand{display:flex;align-items:baseline;gap:14px;min-width:0;flex-wrap:wrap;row-gap:2px}
.brand-title{font-size:17px;font-weight:700;letter-spacing:-.01em}
.mono-label{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.12em;color:#8a877f}
.page-note{margin:0;padding:18px 28px 6px;font-size:12.5px;line-height:1.7;color:var(--tb-page-sub);font-family:"IBM Plex Sans KR",Pretendard,sans-serif}
@media (max-width:640px){.topbar{padding:14px 16px}.page-note{padding:14px 16px 4px}}
@media screen{
  :root[data-theme="dark"]{--tb-page-bg:#141318;--tb-page-ink:#ecebf0;--tb-page-line:#2e2d36;--tb-page-sub:#a09eab;color-scheme:dark}
  :root[data-theme="dark"] .topbar{background:#1a1920}
}

/* ---- Palette of Me (원작 디자인, .pom 안으로 범위 한정) ---- */
.pom{ --paper:#eeeae2; --ink:#26221e; --line:rgba(38,34,30,.14); }
.pom *{ box-sizing:border-box; }
.pom,.pom{ margin:0; min-height:100%; }
.pom{ background:#d9d8d2; color:var(--ink); font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",sans-serif; }
.pom button{ font:inherit; }
.pom .stage{ min-height:100dvh; display:grid; place-items:center; padding:24px; position:relative; overflow:hidden; background:radial-gradient(circle at 20% 15%,#f3d9c7 0,transparent 32%),radial-gradient(circle at 85% 80%,#c7dbea 0,transparent 30%),#d9d8d2; }
.pom .ambient{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.45; }
.pom .ambient-one{ width:280px;height:280px;background:#e59970;left:-100px;top:8%; }
.pom .ambient-two{ width:320px;height:320px;background:#7ea6c8;right:-110px;bottom:5%; }
.pom .phone{ width:min(430px,100%); height:min(884px,calc(100dvh - 48px)); min-height:680px; background:var(--paper); border-radius:38px; position:relative; overflow:hidden; box-shadow:0 42px 90px -35px rgba(38,34,28,.52),0 0 0 1px rgba(38,34,30,.08); }
.pom .intro,.pom .quiz,.pom .result{ height:100%; padding:28px 30px 24px; display:flex; flex-direction:column; }
.pom .topline,.pom .quiz header,.pom .result header{ display:flex; justify-content:space-between; align-items:center; font-size:10px; letter-spacing:.15em; text-transform:uppercase; }
.pom .topline span:last-child{ letter-spacing:0; color:#756e66; }
.pom .orbs{ height:300px; position:relative; margin-top:5px; }
.pom .orbs i{ position:absolute; border-radius:50%; mix-blend-mode:multiply; filter:saturate(.9); animation:float 7s ease-in-out infinite; }
.pom .orbs i:nth-child(1){width:178px;height:178px;left:14px;top:54px;background:#74a9d8;}
.pom .orbs i:nth-child(2){width:178px;height:178px;right:14px;top:54px;background:#ed8b5d;animation-delay:-2s;}
.pom .orbs i:nth-child(3){width:140px;height:140px;left:114px;top:119px;background:#e4c751;animation-delay:-4s;}
@keyframes float{50%{transform:translateY(-9px) scale(1.025)}}
.pom .intro-copy{ margin-top:-19px; position:relative; z-index:2; }
.pom .kicker{ font-size:10px; letter-spacing:.18em; font-weight:700; margin:0 0 10px; color:#6f675f; }
.pom .pom-title{ font-family:Georgia,"Times New Roman",serif; font-size:67px; line-height:.76; letter-spacing:-.065em; margin:0; font-weight:500; }
.pom .pom-title em{ font-weight:400; margin-left:58px; }
.pom .lead{ font-family:Georgia,"Noto Serif KR",serif; font-size:16px; line-height:1.75; margin:28px 0 0; }
.pom .primary,.pom .share{ border:0; background:var(--ink); color:#fff; border-radius:999px; padding:16px 20px; margin-top:auto; cursor:pointer; transition:.2s; font-weight:700; }
.pom .primary{ display:flex; justify-content:space-between; align-items:center; }
.pom .primary:hover,.pom .share:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -16px #000; }
.pom .fine,.pom .hint,.pom .signature{ margin:10px 0 0; text-align:center; font-size:10px; color:#827a72; }
.pom .back{ border:0;background:none;font-size:20px;cursor:pointer;padding:0; }
.pom .progress{ height:2px;background:rgba(38,34,30,.12);margin-top:22px; }
.pom .progress i{ display:block;height:100%;background:var(--ink);transition:width .35s ease; }
.pom .question-wrap{ margin-top:86px; animation:rise .45s ease both; }
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.pom .question-wrap h2{ font-family:Georgia,"Noto Serif KR",serif;font-weight:500;font-size:27px;line-height:1.42;letter-spacing:-.045em;margin:0 0 38px;word-break:keep-all; }
.pom .answers{ display:grid;gap:12px; }
.pom .answers button{ min-height:67px;border:1px solid var(--line);background:rgba(255,255,255,.4);border-radius:16px;text-align:left;padding:12px 14px;display:grid;grid-template-columns:34px 1fr 18px;align-items:center;gap:8px;cursor:pointer;color:var(--ink);font-size:14px;line-height:1.4;transition:.2s; }
.pom .answers button span{ width:27px;height:27px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font:11px Georgia,serif; }
.pom .answers button b{ font-weight:400;opacity:.35; }
.pom .answers button:hover{ background:#fff;transform:translateY(-2px);border-color:rgba(38,34,30,.35); }
.pom .hint{ margin-top:auto; }
.pom .result-phone{ color:white; transition:background .8s ease; }
.pom .result{ background:linear-gradient(145deg,rgba(255,255,255,.11),transparent 55%); }
.pom .result header{ color:rgba(255,255,255,.75); }
.pom .result header button{ border:0;background:none;color:inherit;font-size:10px;text-decoration:underline;cursor:pointer; }
.pom .result-index{ margin-top:26px;font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.68); }
.pom .color-disc{ width:184px;height:184px;border-radius:50%;margin:22px auto 14px;box-shadow:inset -28px -25px 60px rgba(0,0,0,.16),0 28px 70px -20px rgba(0,0,0,.45);position:relative;animation:bloom .8s cubic-bezier(.2,.7,.2,1) both; }
.pom .glow{ position:absolute;width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.28);filter:blur(18px);top:24px;left:32px; }
@keyframes bloom{from{transform:scale(.35);opacity:0}to{transform:scale(1);opacity:1}}
.pom .result-copy{ text-align:center; }
.pom .result-copy>p:first-child{ font:italic 14px Georgia,serif;margin:0 0 4px;color:rgba(255,255,255,.75); }
.pom .result-copy h2{ font-family:Georgia,"Noto Serif KR",serif;font-size:31px;margin:0 0 9px;letter-spacing:-.04em; }
.pom .hex{ display:inline-flex;align-items:center;gap:6px;font:11px ui-monospace,monospace;letter-spacing:.08em;color:rgba(255,255,255,.75); }
.pom .hex i{ width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.45); }
.pom .message{ font-family:Georgia,"Noto Serif KR",serif;font-size:14px;line-height:1.7;word-break:keep-all;margin:24px 8px 15px; }
.pom .words{ display:flex;flex-wrap:wrap;justify-content:center;gap:7px; }
.pom .words span{ border:1px solid rgba(255,255,255,.38);border-radius:99px;padding:6px 9px;font-size:10px;color:rgba(255,255,255,.88); }
.pom .share{ background:rgba(255,255,255,.94);color:#2b2621;margin-top:auto;width:100%; }
.pom .signature{ color:rgba(255,255,255,.65); }
@media(max-width:520px){.pom .stage{padding:0}
.pom .phone{width:100%;height:100dvh;min-height:620px;border-radius:0}
.pom .intro,.pom .quiz,.pom .result{padding:24px 24px 20px}
.pom .orbs{height:278px}
.pom .question-wrap{margin-top:68px}
.pom .pom-title{font-size:62px}
.pom .color-disc{width:164px;height:164px;margin-top:18px}
.pom .message{margin-top:18px}}
@media(max-height:720px){.pom .orbs{height:230px}
.pom .orbs i{transform:scale(.8)}
.pom .intro-copy{margin-top:-5px}
.pom .question-wrap{margin-top:46px}
.pom .color-disc{width:128px;height:128px;margin:12px auto 8px}
.pom .result-copy h2{font-size:27px}
.pom .message{font-size:13px;margin:13px 4px 10px}}
@media(prefers-reduced-motion:reduce){.pom *{animation:none!important;transition:none!important}}
.pom .phone{overflow-y:auto}
.pom .result{height:auto;min-height:100%}
.pom .result .color-disc{flex-shrink:0}
.pom .subtitle{font-size:14px;line-height:1.6;margin:18px 0 0}
.pom .result-details{display:grid;gap:10px;margin:22px 0 16px}
.pom .result-details article{padding:14px 16px;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.10);border-radius:16px}
.pom .result-details h3{margin:0 0 6px;font-size:13px}
.pom .result-details p{margin:0;font-size:14px;line-height:1.7;word-break:keep-all}
.pom .result-note{font-size:11px;line-height:1.7;color:rgba(255,255,255,.85);margin:0 0 18px}
.pom .result .share{flex-shrink:0}
.pom .answers button{font-size:15px;min-height:70px}
.pom .question-wrap{margin-top:48px}
.pom .question-wrap h2{margin-bottom:24px}
.pom .hint{padding-top:22px;font-size:11px}
.pom .result header,.pom .result-copy>p:first-child,.pom .hex,.pom .signature{color:rgba(255,255,255,.92)}
@media(max-height:760px){.pom .quiz{height:auto;min-height:100%}
.pom .question-wrap{margin-top:32px}}


/* ToolayBox 페이지 안에 맞추기 */
.pom .stage{min-height:auto;padding:28px 16px 36px}
.pom .phone{height:min(884px,calc(100dvh - 140px))}
.pom .pom-title{display:block}
.pom .result .pom-share{margin-top:auto;flex-shrink:0;color:#fff}
.pom .result .pom-share .tsh-btn{border-color:rgba(255,255,255,.45)}
.pom .result .pom-share .tsh-btn--main{background:rgba(255,255,255,.94);color:#2b2621;border-color:transparent}
.pom .result .pom-share .tsh-btn--main:hover{background:#fff}
@media(max-width:520px){.pom .stage{padding:0}.pom .phone{height:auto;min-height:calc(100dvh - 120px)}.pom .intro,.pom .quiz{min-height:calc(100dvh - 120px)}}
@media screen{:root[data-theme="dark"] .pom .stage{background:radial-gradient(circle at 20% 15%,#3a2c24 0,transparent 32%),radial-gradient(circle at 85% 80%,#1f2c38 0,transparent 30%),#141318}}