/* 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}
}

/* ---- Hue Are You (원작 디자인, .hay 안으로 범위 한정) ---- */
.hay *{box-sizing:border-box}
.hay,.hay{margin:0;min-height:100%;background:#ddd8cd}
.hay button{font:inherit}
.hay{--ink:#26221e;--paper:#ece8e1}
.hay{font-family:'Pretendard Variable','Pretendard',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
.hay .desk{min-height:100svh;display:grid;place-items:center;padding:24px;background:#ddd8cd;transition:background .7s}
.hay .result-desk{background:color-mix(in srgb,var(--base) 18%,#d8d5ce)}
.hay .frame{position:relative;width:min(430px,100%);height:min(884px,calc(100svh - 48px));min-height:640px;border-radius:36px;overflow:hidden;background:var(--paper);box-shadow:0 40px 90px -34px rgba(38,34,28,.55),0 0 0 1px rgba(38,34,28,.06)}
.hay .panel{position:absolute;inset:0;z-index:2;padding:52px 32px 38px}
.hay .eyebrow,.hay .meta,.hay .q-top span,.hay .hex,.hay .en{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.2em}
.hay .eyebrow{margin:0;font-size:11px;color:rgba(38,34,30,.44)}
.hay .intro-panel{display:flex;flex-direction:column;justify-content:space-between}
.hay .intro-copy .hay-title{margin:0;font:400 68px/.88 'Instrument Serif',serif;letter-spacing:-.02em}
.hay .intro-copy .hay-title i{font-weight:400}
.hay .intro-copy p{margin:24px 0 0;font-size:16px;line-height:1.7;color:rgba(38,34,30,.62);font-weight:500;letter-spacing:-.02em}
.hay .primary{width:100%;border:0;border-radius:999px;padding:18px;cursor:pointer;font-size:16px;font-weight:650}
.hay .dark{background:var(--ink);color:#f2eee7;box-shadow:0 16px 32px -16px rgba(38,34,30,.7)}
.hay .meta{text-align:center;margin:16px 0 0;font-size:11px;color:rgba(38,34,30,.42);letter-spacing:.13em}
.hay .orb{position:absolute;border-radius:50%;filter:blur(38px);z-index:1;animation:drift 17s ease-in-out infinite}
.hay .orb-a{width:320px;height:320px;right:-110px;top:-95px;background:radial-gradient(circle,rgba(108,132,172,.48),transparent 68%)}
.hay .orb-b{width:300px;height:300px;left:-100px;bottom:-80px;background:radial-gradient(circle,rgba(199,154,110,.4),transparent 68%);animation-direction:reverse;animation-duration:20s}
.hay .quiz-panel{display:flex;flex-direction:column;justify-content:space-between;transition:background-image .45s}
.hay .q-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:15px}
.hay .q-top i{font:italic 18px 'Instrument Serif',serif;color:rgba(38,34,30,.5)}
.hay .q-top span{font-size:11px;color:rgba(38,34,30,.45);letter-spacing:.13em}
.hay .track{height:3px;background:rgba(38,34,30,.13);border-radius:4px}
.hay .track span{display:block;height:100%;border-radius:inherit;background:var(--ink);transition:width .35s}
.hay .axis-mark{align-self:flex-start;margin:18px 0 -6px;padding:6px 9px;border:1px solid rgba(38,34,30,.14);border-radius:99px;font:10px ui-monospace,monospace;letter-spacing:.15em;color:rgba(38,34,30,.5)}
.hay .quiz-panel h2{margin:18px 0 24px;font-size:25px;line-height:1.42;letter-spacing:-.03em;text-wrap:balance}
.hay .options{display:flex;flex-direction:column;gap:10px}
.hay .options button{display:flex;align-items:center;gap:13px;width:100%;min-height:54px;padding:14px 17px;border-radius:15px;border:1px solid rgba(38,34,30,.14);background:rgba(255,255,255,.54);color:var(--ink);text-align:left;font-size:15px;font-weight:550;cursor:pointer;transition:.2s}
.hay .options button:not(:disabled):hover{transform:translateY(-1px);background:rgba(255,255,255,.86);border-color:var(--choice)}
.hay .options button.picked{border-color:var(--choice);background:rgba(255,255,255,.95);box-shadow:0 8px 22px -14px var(--choice)}
.hay .dot{width:13px;height:13px;border:1.5px solid var(--choice);border-radius:50%;flex:none}
.hay .picked .dot{background:var(--choice)}
.hay .frame.result{background:linear-gradient(145deg,var(--base) 0%,color-mix(in srgb,var(--base) 66%,var(--personal)) 48%,var(--personal) 100%);color:#f7f2e9}
.hay .frame.result .orb-a{background:radial-gradient(circle,rgba(255,255,255,.28),transparent 67%)}
.hay .frame.result .orb-b{background:radial-gradient(circle,rgba(0,0,0,.2),transparent 68%)}
.hay .result-panel{display:flex;flex-direction:column;padding-top:42px;gap:20px;animation:fadeup .7s ease both}
.hay .result-head{display:flex;justify-content:space-between;flex:none}
.hay .light{color:rgba(255,255,255,.65)}
.hay .hex{font-size:11px;color:rgba(255,255,255,.75);letter-spacing:.12em}
.hay .result-scroll{overflow-y:auto;padding-right:4px;scrollbar-width:none}
.hay .result-scroll::-webkit-scrollbar{display:none}
.hay .gradient-card{height:88px;border:1px solid rgba(255,255,255,.28);border-radius:18px;background:linear-gradient(90deg,var(--base),var(--personal));display:flex;justify-content:space-between;align-items:flex-end;padding:15px;margin-bottom:22px;box-shadow:0 16px 35px -25px rgba(0,0,0,.5)}
.hay .gradient-card div{display:flex;flex-direction:column;gap:4px}
.hay .gradient-card div:last-child{text-align:right}
.hay .gradient-card small{font:9px ui-monospace,monospace;letter-spacing:.12em;color:rgba(255,255,255,.68)}
.hay .gradient-card b{font:11px ui-monospace,monospace;letter-spacing:.08em}
.hay .en{font-size:10px;margin:0 0 8px;color:rgba(255,255,255,.7);letter-spacing:.16em}
.hay .result-scroll .hay-name{font:400 42px/1.05 'Instrument Serif','Pretendard Variable',serif;margin:0 0 16px;letter-spacing:-.03em}
.hay .desc{font-size:14px;line-height:1.7;font-weight:500;letter-spacing:-.02em;margin:0;color:rgba(255,255,255,.88)}
.hay .desc strong{font-family:ui-monospace,monospace;font-size:11px}
.hay .keywords{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}
.hay .keywords span{padding:6px 9px;border:1px solid rgba(255,255,255,.3);border-radius:99px;font-size:11px;color:rgba(255,255,255,.86)}
.hay .ratios{display:grid;gap:9px;margin-top:20px;padding:15px;border:1px solid rgba(255,255,255,.2);border-radius:16px;background:rgba(255,255,255,.06)}
.hay .ratio{display:grid;grid-template-columns:16px 1fr 16px 60px;align-items:center;gap:7px}
.hay .ratio b{font:10px ui-monospace,monospace}
.hay .ratio span{height:3px;background:rgba(255,255,255,.2);border-radius:9px;overflow:hidden}
.hay .ratio i{display:block;height:100%;background:#fff;border-radius:9px}
.hay .ratio small{font:9px ui-monospace,monospace;text-align:right;color:rgba(255,255,255,.62)}
.hay blockquote{margin:18px 0 2px;padding:15px 0 0;border-top:1px solid rgba(255,255,255,.22);font-size:13px;line-height:1.65;color:rgba(255,255,255,.8)}
.hay .actions{display:flex;flex-direction:column;gap:7px;flex:none}
.hay .light-button{background:#f7f2e9;color:var(--base)}
.hay .text-button{border:0;background:transparent;color:rgba(255,255,255,.78);padding:7px;cursor:pointer;font-size:13px}
.hay .toast{position:absolute;z-index:9;left:50%;bottom:28px;transform:translateX(-50%);padding:12px 18px;background:rgba(25,24,22,.88);color:#fff;border-radius:99px;font-size:13px;white-space:nowrap;animation:fadeup .25s ease}
@keyframes drift{50%{transform:translate(16px,-18px) scale(1.06)}}
@keyframes fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-height:720px) and (min-width:601px){.hay .frame{min-height:0}
.hay .panel{padding-top:34px;padding-bottom:28px}
.hay .intro-copy .hay-title{font-size:58px}
.hay .quiz-panel h2{font-size:22px;margin:16px 0}
.hay .options{gap:7px}
.hay .options button{min-height:48px;padding:11px 15px}
.hay .result-scroll .hay-name{font-size:38px;margin-bottom:13px}
.hay .desc{line-height:1.55}
.hay .keywords{margin-top:13px}
.hay blockquote{margin-top:13px}}
@media(max-width:600px){.hay,.hay{background:var(--paper)}
.hay .desk{display:block;padding:0;background:var(--paper)}
.hay .frame{width:100%;height:100svh;min-height:620px;border-radius:0;box-shadow:none}
.hay .panel{padding:calc(34px + env(safe-area-inset-top)) 24px calc(22px + env(safe-area-inset-bottom))}
.hay .intro-copy .hay-title{font-size:64px}
.hay .quiz-panel h2{font-size:23px}
.hay .options button{min-height:52px;padding:13px 15px}
.hay .result-scroll .hay-name{font-size:40px}
.hay .result-panel{gap:17px}
.hay .toast{bottom:calc(20px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.hay *,.hay *::before,.hay *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
.hay .orb{animation:none}}
.hay .intro-guide{display:block;margin-top:16px;font-size:13px;line-height:1.65;color:rgba(38,34,30,.6)}
.hay .quiz-panel{overflow-y:auto;gap:12px}
.hay .quiz-panel h2{font-size:23px;margin:8px 0 12px}
.hay .quiz-panel .axis-mark{margin:4px 0;font-size:11px;line-height:1.5;font-family:inherit;letter-spacing:0}
.hay .back-button{color:rgba(38,34,30,.6);align-self:center;padding:8px 14px}
.hay .back-button:disabled{opacity:.3;cursor:default}
.hay .section-label{font-size:12px;font-weight:700;margin:0 0 12px;letter-spacing:0}
.hay .color-explanation,.hay .small-tip{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.22);font-size:13px;line-height:1.7}
.hay .color-explanation p,.hay .small-tip p{margin:0 0 8px}
.hay .color-code{font:10px/1.6 ui-monospace,monospace;overflow-wrap:anywhere;opacity:.8}
.hay .axis-detail>p{margin:0 0 8px;font-size:12px}
.hay .axis-detail .axis-caption{font-size:12px;line-height:1.65;margin:9px 0 8px;color:rgba(255,255,255,.84)}
.hay .ratios{gap:16px}
.hay .ratios .section-label{margin:0}
.hay .result-note{display:block;font-size:11px;line-height:1.6;opacity:.72;margin:16px 0 6px}
.hay .ratios .result-note{margin:0}
.hay .text-button:focus-visible,.hay .primary:focus-visible,.hay .options button:focus-visible{outline:3px solid #b594e7;outline-offset:3px}
@media(max-width:600px){.hay .quiz-panel h2{font-size:22px}
.hay .quiz-panel{padding-top:calc(26px + env(safe-area-inset-top))}
.hay .quiz-panel .options button{font-size:14px;line-height:1.6}
.hay .intro-copy .hay-title{font-size:60px}}

/* ToolayBox 페이지 안에 맞추기 */
.hay{background:#ddd8cd}
.hay .desk{min-height:auto;padding:28px 16px 36px}
.hay .frame{height:min(884px,calc(100dvh - 140px))}
.hay .hay-title{margin:0;font:400 68px/.88 'Instrument Serif',serif;letter-spacing:-.02em}
.hay .hay-name{font:400 42px/1.05 'Instrument Serif','Pretendard Variable',serif;margin:0 0 16px;letter-spacing:-.03em;word-break:keep-all}
.hay .result-panel .actions{flex:none}
.hay .hay-share{margin:20px 0 6px;color:#f7f2e9}
.hay .hay-share .tsh-btn{border-color:rgba(255,255,255,.45)}
.hay .hay-share .tsh-btn--main{background:#f7f2e9;color:var(--base);border-color:transparent}
@media(max-width:600px){.hay .desk{padding:0}.hay .frame{height:calc(100svh - 120px);min-height:620px}.hay .intro-copy .hay-title{font-size:60px}.hay .result-scroll .hay-name{font-size:40px}}
@media screen{:root[data-theme="dark"] .hay,:root[data-theme="dark"] .hay .desk{background:#141318}:root[data-theme="dark"] .hay .result-desk{background:color-mix(in srgb,var(--base) 22%,#141318)}}