/* 취향발견소 공통 스타일 — H안 팔레트, rem 기준, 모바일·데스크탑 */

/* 글자 크기는 html 기준값으로 한 번에 조절한다 (고령 이용자 대응) */
html{font-size:17px}
html.f2{font-size:19.5px}
html.f3{font-size:22.5px}
:root{
  --ink:#111110; --ink2:#37352E; --ink3:#5A574C;
  --line:#E0D2A2; --line2:#F3E9C4;
  --bg:#FDF6D8; --card:#FFFFFF;
  --navy:#0B2E5C; --blue:#194A8C; --lblue:#E3EDFA;
  --amber:#8A5E06; --lamber:#F7E7AE;
  --green:#0B5B46; --lgreen:#D9F0E5;
  --coral:#A6401F; --lcoral:#FAE2D6;
  --r:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.75;-webkit-font-smoothing:antialiased;font-size:1rem}
.wrap{max-width:44rem;margin:0 auto;padding:1.2rem 1.1rem 5rem}
h1,h2,h3{line-height:1.4;margin:0}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* 글자 크기 조절 막대 */
.fsbar{position:sticky;top:0;z-index:50;background:rgba(253,246,216,.96);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);margin:-1.2rem -1.1rem 1.2rem;padding:.5rem 1.1rem;
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.fsbar span{font-size:.82rem;color:var(--ink3);font-weight:700}
.fsbtn{border:2px solid var(--line);background:#fff;border-radius:.6rem;padding:.35rem .8rem;
  font-family:inherit;font-weight:800;cursor:pointer;color:var(--ink2);min-height:2.4rem}
.fsbtn.on{border-color:var(--navy);background:var(--lblue);color:var(--navy)}
.fsbtn.s1{font-size:.85rem} .fsbtn.s2{font-size:1rem} .fsbtn.s3{font-size:1.2rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:.7rem;
  padding:1rem 1.6rem;font-size:1.08rem;font-weight:800;font-family:inherit;cursor:pointer;
  background:var(--navy);color:#fff;min-height:3.4rem;line-height:1.4}
.btn:hover{background:#0F2242}
.btn:focus-visible{outline:3px solid #F0A500;outline-offset:3px}
.btn.ghost{background:#fff;color:var(--ink2);border:2px solid var(--line);font-weight:700}
.btn.ghost:hover{border-color:var(--ink3)}
.btn.sm{padding:.65rem 1.1rem;font-size:.95rem;min-height:2.8rem}
.btn.wide{width:100%}
.muted{color:var(--ink3);font-size:.86rem;line-height:1.7}
.screen{display:none}
.screen.on{display:block}

.brandmark{font-size:.75rem;letter-spacing:.14em;color:var(--ink3);font-weight:700;margin-bottom:1rem}
.hero-t{font-size:1.85rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.8rem}
.hero-s{font-size:1.05rem;color:var(--ink2);margin-bottom:1.5rem;line-height:1.85}
.why{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:1.2rem;margin:1.3rem 0}
.why h3{font-size:1rem;color:var(--navy);margin-bottom:.8rem}
.why-item{display:flex;gap:.8rem;margin-bottom:.9rem;align-items:flex-start}
.why-item:last-child{margin-bottom:0}
.why-num{width:1.7rem;height:1.7rem;border-radius:50%;background:var(--lblue);color:var(--navy);
  font-size:.85rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.15rem}
.why-tx{font-size:.95rem;color:var(--ink2);line-height:1.8}
.why-tx b{color:var(--ink)}
.howto{background:var(--lblue);border-radius:var(--r);padding:1.2rem;margin:1.3rem 0}
.howto h3{font-size:1rem;color:var(--navy);margin-bottom:.7rem}
.howto ol{margin:0;padding-left:1.3rem;font-size:.98rem;color:var(--ink2)}
.howto li{margin-bottom:.5rem}
.disc{border-left:5px solid var(--amber);background:var(--lamber);padding:.9rem 1.1rem;border-radius:0 .7rem .7rem 0;margin:1.3rem 0}
.disc p{margin:0;font-size:.9rem;color:#6B4805;line-height:1.8}

/* 측정 */
.qhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:.7rem;gap:.7rem}
.qcount{font-size:1rem;color:var(--ink2);font-weight:800}
.prog{height:.5rem;background:var(--line2);border-radius:.3rem;overflow:hidden;margin-bottom:1.1rem}
.prog i{display:block;height:100%;background:var(--navy);transition:width .3s ease;width:0}
.stage{background:#E7E5E0;border:2px solid #D3D1CB;border-radius:calc(var(--r) + .45rem);padding:1rem}
.stage.tight{padding:.7rem}
.stim{width:100%;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:2px solid var(--line);background:#fff;display:block}
.stim svg{display:block;width:100%;height:100%;transition:filter .4s ease}
.stim.dim svg{filter:blur(8px)}
.expnote{text-align:center;margin-top:.7rem;font-size:.95rem;color:var(--ink3);min-height:1.6rem;font-weight:600}
.expnote.go{color:var(--navy);font-weight:800}
.ask{text-align:center;font-size:1.15rem;font-weight:800;margin:1.1rem 0 .8rem}
.opts{display:grid;gap:.55rem}
.opt{border:2px solid var(--line);background:#fff;border-radius:.7rem;padding:.85rem 1rem;cursor:pointer;
  font-family:inherit;transition:.12s ease;display:flex;align-items:center;gap:.9rem;
  min-height:3.4rem;text-align:left;width:100%}
.opt:hover{border-color:var(--navy);background:var(--lblue)}
.opt:focus-visible{outline:3px solid #F0A500;outline-offset:2px}
.opt .dot{width:1.1rem;height:1.1rem;border-radius:50%;flex-shrink:0;border:2px solid rgba(0,0,0,.15)}
.opt b{font-size:1.05rem;font-weight:800;color:var(--ink)}
.opt.o1 .dot{background:#C0522A} .opt.o2 .dot{background:#DCA089}
.opt.o3 .dot{background:#C9C7BF} .opt.o4 .dot{background:#7FB09C} .opt.o5 .dot{background:#0F6E56}
.hintbar{text-align:center;margin-top:.9rem;font-size:.85rem;color:var(--ink3)}

/* 결과 */
.headline{background:var(--navy);border-radius:1rem;padding:1.6rem 1.2rem;color:#fff;text-align:center;margin-bottom:.6rem}
.headline .pre{font-size:.82rem;opacity:.85;letter-spacing:.08em;font-weight:700;margin-bottom:.7rem}
.headline .big{font-size:1.45rem;font-weight:800;line-height:1.6}
.headline .big em{font-style:normal;background:rgba(255,255,255,.2);padding:.1rem .5rem;border-radius:.4rem;
  display:inline-block;margin:.15rem 0}
.headline .sub{font-size:.95rem;opacity:.95;margin-top:.8rem;line-height:1.7}
.tname{text-align:center;margin:1.4rem 0 1.6rem}
.tname .n{font-size:1.25rem;font-weight:800;color:var(--navy)}
.tname .d{font-size:1rem;color:var(--ink2);margin-top:.5rem;line-height:1.8}
.sec{margin-top:2.2rem}
.sec-h{font-size:1.2rem;font-weight:800;color:var(--ink);margin-bottom:.35rem}
.sec-d{font-size:.9rem;color:var(--ink3);margin:0 0 1rem;line-height:1.75}
.prev{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.prev figure{margin:0}
.prev .im{aspect-ratio:4/3;border-radius:.7rem;overflow:hidden;border:2px solid var(--line)}
.prev .im svg{display:block;width:100%;height:100%}
.prev figcaption{font-size:.95rem;font-weight:800;text-align:center;margin-top:.5rem}
.prev .ok figcaption{color:var(--green)}
.prev .no figcaption{color:var(--coral)}
.pal{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-radius:.7rem;overflow:hidden;border:2px solid var(--line)}
.pal div{aspect-ratio:1/1.15;position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.5rem}
.pal span{font-size:.72rem;font-family:ui-monospace,Menlo,monospace;font-weight:700}
.gen{display:grid;gap:.7rem}
.gitem{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem}
.gtop{display:flex;justify-content:space-between;align-items:center;gap:.7rem;margin-bottom:.45rem;flex-wrap:wrap}
.gname{font-size:1.08rem;font-weight:800;color:var(--navy)}
.gwhy{font-size:.92rem;color:var(--ink2);line-height:1.75;margin-bottom:.7rem}
.gart{display:flex;flex-wrap:wrap;gap:.45rem}
.gart a{font-size:.9rem;text-decoration:none;color:var(--blue);background:var(--lblue);
  padding:.5rem .85rem;border-radius:1.5rem;border:2px solid #C6D8F0;font-weight:700;min-height:2.4rem;
  display:inline-flex;align-items:center}
.gart a:hover{background:#D6E4F7}
.cards{display:grid;gap:.8rem}
.card{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem}
.card h4{font-size:1.05rem;margin:0 0 .6rem;color:var(--navy)}
.card ul{margin:0;padding-left:1.2rem;font-size:.98rem;color:var(--ink2);line-height:1.9}
.card li{margin-bottom:.35rem}
.ax{margin-bottom:1.3rem}
.ax-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.45rem;gap:.6rem;flex-wrap:wrap}
.ax-nm{font-size:1rem;font-weight:800}
.bar{height:2rem;background:var(--line2);border-radius:.5rem;position:relative;overflow:hidden}
.bar .mid{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#A9A79F;z-index:2}
.bar .ci{position:absolute;top:0;bottom:0;background:rgba(24,48,87,.18);z-index:1}
.bar.flex .ci{background:rgba(138,94,6,.2)}
.bar .pin{position:absolute;top:.2rem;bottom:.2rem;width:.35rem;border-radius:.2rem;background:var(--navy);z-index:3}
.bar.flex .pin{background:var(--amber)}
.ax-ends{display:flex;justify-content:space-between;font-size:.85rem;color:var(--ink3);margin-top:.35rem;font-weight:600}
.tag{display:inline-block;font-size:.8rem;font-weight:800;padding:.2rem .6rem;border-radius:1rem;margin-left:.4rem}
.tag.f{background:var(--lamber);color:#6B4805}
.tag.c{background:var(--lgreen);color:#084636}
.avoid{background:var(--lcoral);border-radius:var(--r);padding:1.1rem 1.2rem;border:2px solid #EFCDBF}
.avoid ul{margin:0;padding-left:1.2rem;font-size:.98rem;color:#7A3418;line-height:1.9}
.saybox{background:#fff;border:3px solid var(--navy);border-radius:var(--r);padding:1.2rem;
  font-size:1rem;line-height:2;white-space:pre-wrap;color:var(--ink)}
.saybox b{color:var(--navy);font-weight:800}
.pbox{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;font-size:.85rem;
  font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--ink2);line-height:1.8;word-break:break-word}
details{background:var(--card);border:2px solid var(--line);border-radius:var(--r);margin-top:.8rem}
summary{padding:1rem 1.1rem;cursor:pointer;font-size:1rem;font-weight:800;color:var(--ink2);list-style:none;min-height:3rem}
summary::-webkit-details-marker{display:none}
summary::before{content:"＋ ";color:var(--navy)}
details[open] summary::before{content:"− "}
.dbody{padding:0 1.1rem 1.1rem}
.acts{display:grid;gap:.6rem;margin-top:1.8rem}
@media(min-width:34rem){.acts{grid-auto-flow:column;justify-content:start}}
.foot{margin-top:2.4rem;padding-top:1.3rem;border-top:2px solid var(--line);font-size:.85rem;color:var(--ink3);line-height:1.85}
.foot b{color:var(--ink2)}
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%) translateY(6rem);background:var(--ink);color:#fff;
  padding:.9rem 1.4rem;border-radius:2rem;font-size:1rem;transition:transform .3s ease;z-index:99;font-weight:700}
.toast.on{transform:translateX(-50%) translateY(0)}
@media print{
  .fsbar,.acts,.btn,.hintbar,details{display:none!important}
  body{background:#fff;font-size:11pt}
  .wrap{max-width:100%;padding:0}
  .headline{background:#fff!important;color:#000!important;border:2px solid #000}
  .headline .big em{background:none!important}
  .sec{page-break-inside:avoid}
}


/* ── 데스크탑: 자극과 선택지를 한 화면에 ── */
@media(min-width:48rem) and (min-height:44rem){
  #s-test .stage{display:flex;justify-content:center;padding:.8rem}
  #s-test .stim{height:min(42vh,21rem);width:auto;max-width:100%}
  #s-test .expnote{margin-top:.5rem;min-height:1.4rem}
  #s-test .ask{margin:.8rem 0 .7rem}
  /* 선택지 줄은 본문 폭을 넘어 화면 폭을 쓴다 */
  #s-test .opts{grid-template-columns:repeat(5,1fr);gap:.55rem;
    width:min(56rem,calc(100vw - 2.4rem));margin-left:50%;transform:translateX(-50%)}
  #s-test .opt{flex-direction:column;align-items:center;justify-content:flex-start;
    text-align:center;gap:.5rem;padding:.85rem .4rem;min-height:0}
  #s-test .opt b{font-size:.98rem;line-height:1.35;word-break:keep-all}
  #s-test .hintbar{margin-top:.7rem}
  /* 글자를 키우면 그림을 줄여 한 화면을 지킨다 */
  html.f2 #s-test .stim{height:min(36vh,17rem)}
  html.f3 #s-test .stim{height:min(30vh,14rem)}
}

/* ── 음악 검사 전용 ── */
.step-h{font-size:0.75rem;letter-spacing:.14em;color:var(--ink3);font-weight:700;margin-bottom:0.625rem}
.step-t{font-size:1.62rem;font-weight:800;letter-spacing:-.02em;margin-bottom:0.75rem}
.step-d{font-size:0.969rem;color:var(--ink2);margin-bottom:1.62rem;line-height:1.7}
.bigbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.62rem;text-align:center}
.lr{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-top:1.25rem}
.lr button{border:1.5px solid var(--line);background:var(--card);border-radius:0.75rem;padding:1.62rem 0.625rem;font-family:inherit;
  font-size:1.06rem;font-weight:700;cursor:pointer;transition:.13s;color:var(--ink)}
.lr button:hover{border-color:var(--navy);background:var(--lblue)}
.dots{display:flex;gap:0.438rem;justify-content:center;margin-top:1.12rem}
.dots i{width:0.562rem;height:0.562rem;border-radius:50%;background:var(--line);display:block}
.dots i.ok{background:var(--green)}
.dots i.no{background:var(--coral)}
.loadbar{height:0.312rem;background:var(--line2);border-radius:0.188rem;overflow:hidden;margin:1.12rem 0 0.625rem}
.loadbar i{display:block;height:100%;background:var(--navy);width:0;transition:width .25s ease}
.ptime{font-size:0.812rem;color:var(--ink3);font-weight:600}
.player{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:2.12rem 1.62rem;text-align:center}
.viz{height:5.5rem;display:flex;align-items:flex-end;justify-content:center;gap:0.25rem;margin-bottom:1.38rem}
.viz i{width:0.312rem;background:var(--navy);border-radius:0.188rem;height:0.375rem;opacity:.55;display:block}
.ptrack{height:0.25rem;background:var(--line2);border-radius:0.188rem;overflow:hidden;margin:0.75rem auto 0;max-width:21.2rem}
.ptrack i{display:block;height:100%;background:var(--amber);width:0}
.gate{margin-top:0.75rem;font-size:0.812rem;color:var(--ink3)}
.rate{margin-top:1.5rem;opacity:.35;pointer-events:none;transition:opacity .3s ease}
.rate.on{opacity:1;pointer-events:auto}
.rate-l{display:flex;justify-content:space-between;font-size:0.781rem;color:var(--ink3);margin-bottom:0.562rem;font-weight:600}

/* ── 사이트 머리글·꼬리글 ── */
#site-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:2px solid var(--line);margin-bottom:1.2rem;flex-wrap:wrap}
#site-head .brand{font-weight:900;font-size:1.15rem;color:var(--navy);text-decoration:none;display:flex;align-items:center;gap:.5rem;letter-spacing:-.01em;white-space:nowrap}
#site-head .bm{width:.9rem;height:.9rem;border-radius:50%;background:var(--navy);box-shadow:.55rem 0 0 -0.2rem var(--amber),-.55rem 0 0 -0.2rem var(--green);display:inline-block}
#site-head nav{display:flex;gap:.2rem;flex-wrap:wrap}
#site-head nav a{color:var(--ink2);text-decoration:none;font-weight:700;padding:.45rem .7rem;border-radius:.6rem;font-size:.95rem}
#site-head nav a.on,#site-head nav a:hover{background:var(--lblue);color:var(--navy)}
#site-head .menu-btn{display:none;border:2px solid var(--line);background:#fff;border-radius:.6rem;font-size:1.2rem;padding:.2rem .6rem;cursor:pointer}
@media(max-width:44rem){
  #site-head .menu-btn{display:block}
  #site-head nav{display:none;width:100%;flex-direction:column}
  #site-head.open nav{display:flex}
  #site-head nav a{padding:.7rem .8rem;border-bottom:1px solid var(--line2)}
}
#site-foot{margin-top:3rem;padding-top:1.2rem;border-top:2px solid var(--line);font-size:.85rem;color:var(--ink3);line-height:1.9}
#site-foot a{color:var(--ink2)}
.notice{background:var(--lblue);border:2px solid #C9DAF3;border-radius:var(--r);padding:.9rem 1.1rem;margin:0 0 1.2rem;font-size:.98rem}
.notice.warn{background:var(--lamber);border-color:#E7D08A}
.notice.ok{background:var(--lgreen);border-color:#BFE3D2}

/* ── 입력 폼 (인구통계·재검사) ── */
.form{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:1.3rem}
.fld{display:block;margin-bottom:1.1rem}
.fld>span{display:block;font-weight:800;margin-bottom:.45rem}
select,input[type=email],input[type=text],input[type=password]{width:100%;font:inherit;font-size:1.02rem;padding:.75rem .85rem;border:2px solid var(--line);border-radius:.6rem;background:#fff;color:var(--ink);min-height:3rem}
select:focus,input:focus{outline:3px solid #F0A500;outline-offset:2px;border-color:var(--navy)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media(max-width:34rem){.row2{grid-template-columns:1fr}}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{border:2px solid var(--line);background:#fff;border-radius:2rem;padding:.6rem 1.1rem;font:inherit;font-weight:700;cursor:pointer;min-height:2.8rem;color:var(--ink2)}
.chip.on{border-color:var(--navy);background:var(--lblue);color:var(--navy)}
.consent{background:var(--lamber);border-radius:.8rem;padding:.9rem 1rem;margin:1rem 0}
.ck{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;line-height:1.6;cursor:pointer}
.ck input{width:1.3rem;height:1.3rem;margin-top:.2rem;flex-shrink:0}
.err{color:var(--coral);font-weight:700;min-height:1.4rem;margin:.3rem 0}
.ok{color:var(--green);font-weight:700}

/* ── 결과 상태 4종 ── */
.statebox{display:grid;gap:.6rem;margin:1rem 0 .4rem}
.st{display:grid;grid-template-columns:8.5rem 1fr;gap:.6rem;align-items:start;padding:.8rem 1rem;border-radius:.8rem;border:2px solid var(--line);background:#fff;font-size:.95rem;line-height:1.55}
.st b{font-size:.95rem}
.st i{font-style:normal;color:var(--ink3)}
.st-dir{border-color:#BFE3D2;background:var(--lgreen)} .st-dir b{color:var(--green)}
.st-need{border-color:#E7D08A;background:var(--lamber)} .st-need b{color:var(--amber)}
.st-unm{background:#F4F3EE} .st-unm b{color:var(--ink3)}
.st-del{background:#fff} .st-del b{color:var(--ink2)}
@media(max-width:34rem){.st{grid-template-columns:1fr}}
.tag.f{background:var(--lamber);color:#6B4805}

/* ── 재검사 ── */
.rc{background:var(--card);border:3px solid var(--navy);border-radius:var(--r);padding:1.2rem;margin-top:1.2rem}
.rc h4{margin:0 0 .5rem;font-size:1.1rem;color:var(--navy)}
.rc .row2{margin-top:.6rem}
table.cmp{width:100%;border-collapse:collapse;font-size:.95rem;margin:.6rem 0}
table.cmp th,table.cmp td{border:1px solid var(--line);padding:.55rem .6rem;text-align:center}
table.cmp th{background:var(--lblue);color:var(--navy)}
table.cmp td:first-child{text-align:left;font-weight:700}

/* ── 결제 자리 ── */
.paycard{background:linear-gradient(135deg,#FFFDF3,#FFF6D6);border:2px dashed #E0C97A;border-radius:var(--r);padding:1.2rem;margin-top:1.2rem}
.paycard h4{margin:0 0 .4rem;font-size:1.05rem}

/* ── 홈·소개 페이지 ── */
.hero{padding:1.5rem 0 1rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin:1.2rem 0}
@media(max-width:44rem){.grid3{grid-template-columns:1fr}}
.tcard{display:block;background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:1.2rem;text-decoration:none;color:var(--ink);transition:.15s}
.tcard:hover{border-color:var(--navy);transform:translateY(-2px)}
.tcard h3{margin:0 0 .4rem;font-size:1.2rem;color:var(--navy)}
.tcard p{margin:0;color:var(--ink2);font-size:.95rem;line-height:1.7}
.tcard .meta{display:block;margin-top:.7rem;font-size:.85rem;color:var(--ink3);font-weight:700}
.prose h2{font-size:1.35rem;margin:2rem 0 .7rem;color:var(--navy)}
.prose h3{font-size:1.1rem;margin:1.4rem 0 .5rem}
.prose p,.prose li{font-size:1.02rem;line-height:1.85;color:var(--ink2)}
.prose table{width:100%;border-collapse:collapse;margin:.8rem 0;font-size:.95rem}
.prose th,.prose td{border:1px solid var(--line);padding:.6rem .7rem;text-align:left;vertical-align:top}
.prose th{background:var(--lblue);color:var(--navy)}
.ref{font-size:.9rem;color:var(--ink2);margin:.5rem 0;padding-left:2.2rem;text-indent:-2.2rem;line-height:1.7}
.ref a{color:var(--blue)}
.people{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:1rem 0}
@media(max-width:40rem){.people{grid-template-columns:1fr}}
.person{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:1.1rem}
.person b{display:block;font-size:1.1rem;color:var(--navy);margin-bottom:.3rem}

/* ── 음악 5지선다 가로 배치 ── */
.opts.row5{grid-template-columns:repeat(5,1fr);gap:.45rem}
.opts.row5 .opt{flex-direction:column;align-items:center;text-align:center;gap:.4rem;padding:.8rem .3rem;min-height:0}
.opts.row5 .opt b{font-size:.85rem;line-height:1.3;word-break:keep-all}
@media(max-width:34rem){.opts.row5{grid-template-columns:1fr}.opts.row5 .opt{flex-direction:row;text-align:left;padding:.85rem 1rem}.opts.row5 .opt b{font-size:1.02rem}}