/* 모이릿 소개 페이지. 색 이름: 한지·솔·감 */
:root{
  --paper:#F4EFE4;--paper2:#FBF8F1;--sage:#E3EAD6;--ink:#12302B;--ink2:#1B3F39;--text:#17201D;--sub:#5B6660;--cta:#E4572E;--cta2:#C9431D;--mark:#F0B323;--line:#D9D3C4;
  --pad:clamp(20px,5vw,80px);
  --h1:clamp(32px,9.2vw,44px);--h2:clamp(24px,7vw,34px);--h3:clamp(18px,5vw,22px);--body:clamp(15px,4.1vw,17px);--cap:13.5px;
  --sec:72px;
  --ph:min(86vw,380px);
  --mid:clamp(17px,4.9vw,24px);
}
@media(min-width:768px){:root{--h1:clamp(44px,5.4vw,84px);--h2:clamp(32px,3.5vw,52px);--h3:clamp(20px,1.8vw,26px);--body:clamp(16px,1.3vw,19px);--sec:clamp(88px,8vw,132px);--mid:clamp(24px,2.6vw,38px)}}
@media(min-width:1100px){:root{--ph:clamp(420px,29vw,440px)}}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:light;overflow-x:clip}
body{background:var(--paper);color:var(--text);font-family:MoiritBody,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;font-size:var(--body);line-height:1.7;word-break:keep-all;overflow-wrap:normal;overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3,.ham{font-family:Hahmlet,'Apple SD Gothic Neo','Malgun Gothic',serif;font-weight:700;line-height:1.3;letter-spacing:-.02em}
h1{font-size:var(--h1)}h2{font-size:var(--h2)}h3{font-size:var(--h3)}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--cta);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.l{display:block}.s{display:inline}
@media(max-width:767px){.s{display:block}}
.wrap{width:min(1280px,100% - 2*var(--pad));margin-inline:auto}
@media(min-width:1700px){.wrap{width:min(1480px,100% - 2*var(--pad))}}
section{padding-block:var(--sec);scroll-margin-top:64px;position:relative}
.dark{background:var(--ink);color:var(--paper)}
.sage{background:var(--sage)}
.lead{color:var(--sub);margin-top:18px}.dark .lead{color:#C7D2CB}
.eye{display:block;font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--cta2);margin-bottom:14px}
.dark .eye{color:var(--mark)}
.hl{background:linear-gradient(transparent 62%,var(--mark) 62% 92%,transparent 92%)}
.dark .hl{background:none;color:var(--mark)}
.note{font-size:var(--cap);font-weight:500;color:var(--sub);margin-top:16px;line-height:1.55}
.dark .note{color:#AEBDB5}
.mt{margin-top:28px}.mt2{margin-top:48px}
/* 두 칸 배치 */
.two{display:grid;gap:40px;justify-items:start}
.two .ph-box{justify-self:center}
@media(min-width:1100px){.two{grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,110px);align-items:center}.two.rev>:first-child{order:2}.two .ph-box{justify-self:center}}
/* 앱 화면 */
.ph{width:var(--ph);border-radius:calc(var(--ph)*.148);box-shadow:0 34px 60px -24px rgba(18,48,43,.55);background:#1a1a1c}
.dark .ph{box-shadow:0 34px 70px -20px rgba(0,0,0,.7)}
.ph-box{display:flex;flex-direction:column;align-items:center;position:relative;width:fit-content}
.ph-box .note{text-align:center;max-width:var(--ph)}
/* 머리 */
.homebar{background:var(--paper2);border-bottom:1px solid var(--line);padding:9px 20px;text-align:center;font-size:13.5px;line-height:1.4}
.homebar a{text-decoration:none;font-weight:600;color:var(--sub)}
.nav{position:sticky;top:0;z-index:40;background:rgba(244,239,228,.93);backdrop-filter:blur(8px);border-bottom:1px solid rgba(217,211,196,.7)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:60px}
.nav img.logo{height:30px;width:auto}
.nav ul{display:none;list-style:none;padding:0;gap:clamp(18px,2.2vw,34px);font-size:15px;font-weight:600;white-space:nowrap}
.nav ul a{text-decoration:none}.nav ul a:hover{color:var(--cta2)}
.nav .gp img{height:40px;width:auto}
.navEnd{display:flex;align-items:center;gap:10px;flex:none}.gameLink{display:block;width:40px;height:40px;border-radius:11px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.22);transition:transform .2s}.gameLink:hover{transform:translateY(-2px)}.gameLink img{display:block;width:40px;height:40px}
@media(min-width:900px){.nav ul{display:flex}}
/* 받기 배지 */
.gp{display:inline-block;border-radius:10px;transition:transform .2s}
.gp:hover{transform:translateY(-2px)}
.gp img{width:200px;height:60px}
.get{display:flex;flex-wrap:wrap;align-items:center;column-gap:14px}
/* 첫 화면: 인물이 주인공 */
.hero{padding:0}
.herogrid{display:grid}
.herotext{padding:clamp(32px,6vw,56px) var(--pad) 36px}
.hero .lead{margin-top:22px;font-size:clamp(16px,4.3vw,18px)}
.hero .get{margin-top:30px}
.heroimg{position:relative;background:var(--sage);overflow:hidden}
.heroimg video{width:100%;height:100%;object-fit:cover;object-position:50% 0}
@media(min-width:768px){.hero .lead{font-size:clamp(18px,1.5vw,22px)}}
@media(min-width:768px){
  .herogrid{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);min-height:clamp(560px,calc(100vh - 100px),920px)}
  .herotext{align-self:center;padding:48px 28px 48px max(var(--pad),calc((100vw - 1280px)/2))}
  
}
@media(min-width:1700px){.herotext{padding-left:calc((100vw - 1480px)/2)}}
/* 쇼츠 폰 틀 */
.frame{position:relative;width:var(--ph);aspect-ratio:9/16;background:#1a1a1c;padding:10px;border-radius:calc(var(--ph)*.125);box-shadow:0 40px 70px -26px rgba(18,48,43,.6)}
.frame .in{height:100%;border-radius:calc(var(--ph)*.1);overflow:hidden;background:#12302B center/cover}
.frame video{width:100%;height:100%;object-fit:cover;pointer-events:none}
video::-webkit-media-controls,video::-webkit-media-controls-panel,video::-webkit-media-controls-start-playback-button,video::-webkit-media-controls-overlay-play-button,video::-internal-media-controls-overlay-cast-button{display:none!important;-webkit-appearance:none;opacity:0!important}
/* 인물 띠: 두 줄, 반대 방향 */
.people .plane{overflow:hidden;margin-top:18px}
.people .plane.a{margin-top:40px}
.people .tr{display:flex;width:max-content;animation:flow 90s linear infinite}
.people .plane.b .tr{animation-direction:reverse}
.people .plane:hover .tr{animation-play-state:paused}
@keyframes flow{to{transform:translateX(-33.3333%)}}
.people .pc{height:300px;width:240px;margin-right:12px;background:var(--ink2);border-radius:20px;overflow:hidden;flex:none;position:relative}
.people .pc img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto;border-radius:0}
@media(min-width:768px){.people .pc{height:440px;width:352px;margin-right:16px;border-radius:24px}}
/* 흐르는 띠 */
.mq{background:var(--mark);overflow:hidden;padding:13px 0;white-space:nowrap;font-family:Hahmlet,serif;font-weight:700;font-size:clamp(16px,1.5vw,21px);color:var(--text)}
.mq .tr{display:inline-flex;animation:mq 46s linear infinite}
.mq span{padding-inline:22px;position:relative}
.mq span::after{content:"·";position:absolute;right:-3px}
@keyframes mq{to{transform:translateX(-50%)}}
/* 모토 */
.motto{padding-block:clamp(96px,10vw,160px)}
.motto .grid{display:grid;gap:40px}
@media(min-width:1000px){.motto .grid{grid-template-columns:minmax(220px,.38fr) 1fr;gap:40px}.motto .side{position:sticky;top:110px;align-self:start}}
.motto .side h2{font-size:var(--h2)}
.motto .lines{font-family:Hahmlet,serif;font-weight:700;font-size:var(--mid);line-height:1.5;letter-spacing:-.02em}
.motto .para+.para{margin-top:clamp(44px,5vw,80px)}
.js .motto .lines .l{color:rgba(244,239,228,.26);transition:color .7s}
.js .motto .lines .l.lit{color:var(--paper)}
.big{font-family:Hahmlet,serif;font-weight:700;font-size:clamp(42px,12.5vw,128px);line-height:1.2;letter-spacing:-.03em;color:var(--mark);margin-top:clamp(80px,9vw,140px)}
@media(min-width:768px){.big{font-size:clamp(84px,9.4vw,160px)}}
/* 고민 */
.worry .grid{display:grid;gap:36px}
@media(min-width:1000px){.worry .grid{grid-template-columns:.8fr 1.2fr;gap:64px}.worry .side{position:sticky;top:96px;align-self:start}}
.wcards{display:grid;gap:12px}
@media(min-width:620px){.wcards{grid-template-columns:1fr 1fr;gap:14px}}
.wc{display:flex;gap:14px;align-items:flex-start;text-align:left;background:var(--paper2);border:2px solid transparent;border-radius:18px;padding:18px;font-weight:600;line-height:1.45;transition:background .2s,border-color .2s,transform .15s;width:100%;font-size:clamp(15px,4.1vw,18px)}
@media(min-width:620px){.wc{min-height:112px;padding:22px}}
.wc:hover{transform:translateY(-2px)}
.wc i{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:15px;color:transparent;background:#fff;margin-top:1px}
.wc[aria-pressed=true]{background:#FFF1DF;border-color:var(--cta)}
.wc[aria-pressed=true] i{background:var(--cta);border-color:var(--cta);color:#fff}
.wres{margin-top:26px;background:var(--ink);color:var(--paper);border-radius:20px;padding:22px}
.wres b{font-family:Hahmlet,serif;font-size:clamp(30px,3vw,44px);display:block;line-height:1.1;color:var(--mark)}
.wres p{margin-top:10px;font-weight:600;line-height:1.55}
/* 비교 */








/* 질문 체험 */
.qbox{background:var(--paper2);border-radius:28px;padding:clamp(20px,5vw,30px);box-shadow:0 26px 50px -30px rgba(18,48,43,.45);width:100%;max-width:640px}
.qhead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.qcount{font-weight:700;font-size:14px;line-height:1.3}
.segs{display:flex;gap:6px;margin-top:14px}
.segs i{flex:1;height:6px;border-radius:9px;background:var(--line);transition:background .3s}
.segs i.on{background:var(--cta)}
.qp{min-height:252px;display:flex;flex-direction:column}
.qp .q{font-size:clamp(21px,6vw,30px);margin:26px 0 22px;min-height:2.6em}
.opt{display:block;width:100%;text-align:left;padding:15px 18px;margin-top:10px;border-radius:16px;border:2px solid var(--line);background:#fff;font-weight:600;line-height:1.4;transition:background .15s,border-color .15s,color .15s,transform .1s;font-size:clamp(15px,4.1vw,17px)}
.opt:hover{border-color:var(--cta)}
.opt[aria-pressed=true]{background:var(--cta);border-color:var(--cta);color:#fff}
.qbtm{display:flex;justify-content:space-between;align-items:center;margin-top:16px;gap:12px;min-height:30px}
.back{font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px;color:var(--sub);line-height:1.3;white-space:nowrap}
.done h3{margin-top:24px}
.picks{list-style:none;padding:0;margin-top:16px;display:grid;gap:6px;font-size:14.5px;font-weight:600}
.picks li{background:var(--sage);border-radius:10px;padding:7px 12px;line-height:1.4}
.btn{display:inline-block;background:var(--cta);color:#fff;padding:14px 24px;border-radius:99px;font-weight:700;text-decoration:none;line-height:1.3;transition:background .2s}
.btn:hover{background:var(--cta2)}
.btn2{display:inline-block;padding:14px 8px;font-weight:600;text-decoration:underline;text-underline-offset:4px;line-height:1.3}
/* 잠금 */
.gate{position:relative;width:var(--ph);border-radius:calc(var(--ph)*.148);box-shadow:0 34px 60px -24px rgba(18,48,43,.55)}
.gate img{width:100%;border-radius:calc(var(--ph)*.148)}
.gate .open{position:absolute;inset:0;height:100%;opacity:0;filter:blur(14px);transition:opacity 1s,filter 1.2s}
.gate.on .open{opacity:1;filter:none}
.pill{margin-top:18px;background:var(--ink);color:var(--paper);font-weight:700;font-size:14.5px;padding:9px 18px;border-radius:99px;line-height:1.3;white-space:nowrap}
.pill b{color:var(--mark)}
.gate.shake{animation:sh .5s}
@keyframes sh{20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
.warnbox{margin-top:16px;font-weight:700;color:var(--cta2);line-height:1.5}
.okbox{margin-top:16px;font-weight:700;color:var(--ink);line-height:1.5}
.keys{display:grid;gap:12px;margin-top:30px;width:100%}
.key{background:var(--paper2);border-radius:18px;padding:18px 20px;font-weight:600;line-height:1.5;display:flex;gap:14px;align-items:center;font-size:clamp(15px,4.1vw,18px)}
.key i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--cta)}
.quote{font-family:Hahmlet,serif;font-weight:700;font-size:clamp(25px,7.2vw,34px);line-height:1.4;letter-spacing:-.02em}
@media(min-width:768px){.quote{font-size:clamp(38px,4.6vw,72px)}}
@media(min-width:1100px){.two .quote{font-size:clamp(30px,2.9vw,46px)}}
/* 쌓이는 시간 */
.acc .top{display:grid;gap:24px}
@media(min-width:1000px){.acc .top{grid-template-columns:1.2fr .8fr;align-items:end}}
.acc .count{font-family:Hahmlet,serif;font-weight:700;font-size:clamp(66px,19vw,96px);line-height:1;letter-spacing:-.03em;color:var(--mark)}
@media(min-width:768px){.acc .count{font-size:clamp(96px,10vw,170px);text-align:right}}
.acc .count small{font-size:.28em;color:var(--paper);margin-left:8px;letter-spacing:-.01em}
.acc .cap{font-weight:600;color:#C7D2CB;line-height:1.5}
@media(min-width:768px){.acc .cap{text-align:right}}
.cells{display:grid;grid-template-columns:repeat(25,1fr);grid-auto-flow:row;gap:clamp(2px,.6vw,4px);margin-top:36px}
.cells i{aspect-ratio:1;border-radius:2px;background:rgba(244,239,228,.07);transition:background .3s,transform .3s}
.cells i.a{background:var(--mark)}.cells i.b{background:var(--cta)}.cells i.c{background:var(--paper)}
@media(min-width:900px){.cells{grid-template-columns:repeat(100,1fr);grid-template-rows:repeat(5,auto);grid-auto-flow:column;gap:3px}}
.range{margin-top:34px}
input[type=range]{width:100%;height:44px;accent-color:var(--cta);cursor:pointer;background:none}
.ticks{position:relative;height:40px;margin-top:6px}
.ticks button{position:absolute;top:0}.ticks button:nth-child(1){left:0}.ticks button:nth-child(2){left:29.3%;transform:translateX(-50%)}.ticks button:nth-child(3){right:0}
.ticks button{font-weight:700;padding:8px 18px;border-radius:99px;background:var(--ink2);color:var(--paper);line-height:1.3;transition:background .2s;white-space:nowrap}
.ticks button.on,.ticks button:hover{background:var(--cta)}
.acc .foot{display:grid;gap:18px;margin-top:40px}
@media(min-width:1000px){.acc .foot{grid-template-columns:1fr 1fr 1fr;gap:20px}}
.fc{background:var(--ink2);border-radius:18px;padding:22px;font-weight:600;line-height:1.55;font-size:clamp(15px,4.1vw,18px)}
/* 고정 스크롤 */
.sticky{display:grid;gap:56px}
@media(min-width:1100px){.sticky{grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px)}.sticky .pin{position:sticky;top:68px;align-self:start;justify-self:center;display:flex;flex-direction:column;align-items:center}.step{min-height:min(720px,88vh);display:flex;flex-direction:column;justify-content:center;padding-block:24px}}
.pinbox{position:relative;width:var(--ph);border-radius:calc(var(--ph)*.148);box-shadow:0 34px 60px -24px rgba(18,48,43,.55);aspect-ratio:585/1221;background:#1a1a1c}
.pinbox img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .5s;border-radius:calc(var(--ph)*.148)}
.pinbox img.on{opacity:1}
@media(max-width:1099px){.sticky .pin{display:none}}
.step .ph-box{margin:0 auto 26px}
@media(max-width:1099px){.step+.step{margin-top:56px}}
@media(min-width:1100px){.step .ph-box{display:none}}
.step .n{font-family:Hahmlet,serif;font-weight:700;color:var(--cta2);font-size:18px;display:block;margin-bottom:8px}
.step h3{font-size:clamp(23px,6.6vw,30px)}
@media(min-width:768px){.step h3{font-size:clamp(30px,3vw,44px)}}
.step p{margin-top:16px;color:var(--sub)}
.match{display:grid;gap:10px;margin-top:24px;max-width:460px}
.mcard{display:flex;align-items:center;gap:14px;background:var(--paper2);border-radius:16px;padding:10px 14px 10px 10px;font-weight:700;line-height:1.3}
.mcard img{width:58px;height:58px;border-radius:12px;object-fit:cover}
.mcard span{flex:1;font-size:clamp(15px,4.1vw,18px)}
.bar{height:10px;background:var(--line);border-radius:9px;overflow:hidden;margin-top:7px}
.bar i{display:block;height:100%;background:var(--cta);border-radius:9px;width:0;transition:width 1.6s cubic-bezier(.2,.7,.2,1)}
.in .bar i,.no-js .bar i{width:var(--w)}
/* 단계 안 볼거리 */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px;max-width:520px}
.duo .pc{width:auto}.duo .pc:nth-child(even){margin-top:22px}.duo .pc span{font-size:clamp(11px,3vw,13px);left:8px;bottom:8px}
.ans{list-style:none;padding:0;margin-top:14px;display:grid;gap:10px}
.ans li{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:700;line-height:1.4;font-size:clamp(15px,4.1vw,17px)}
.ans small{display:block;font-weight:500;color:var(--sub);font-size:clamp(13px,3.6vw,14.5px)}
.ans i{font-style:normal;flex:none;background:var(--sage);border-radius:8px;padding:4px 9px;font-size:13px;line-height:1.3}
.ans i.d{background:#FFE7D6}
/* 인물 카드 공통 */
.pc{position:relative;flex:none}
.pc img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:20px}
.pc span{position:absolute;left:10px;bottom:10px;background:rgba(251,248,241,.96);color:var(--text);border-radius:10px;padding:5px 10px;font-size:var(--cap);font-weight:700;line-height:1.3;white-space:nowrap}
/* 온도 */
.tcard{background:var(--paper2);border-radius:24px;padding:clamp(20px,3vw,32px);margin-top:30px;width:100%;max-width:560px}
.tcard .pct{font-family:Hahmlet,serif;font-weight:700;font-size:clamp(50px,14vw,84px);line-height:1;color:var(--cta2)}
.tcard .bar{height:16px;margin-top:16px}
.tcard .sub{margin-top:14px;font-weight:600;color:var(--sub);font-size:clamp(14px,3.9vw,16px);line-height:1.5}
/* 모이 체험 */
.chat{background:var(--paper2);border-radius:28px;padding:clamp(14px,3vw,24px);width:100%;max-width:640px;box-shadow:0 26px 50px -30px rgba(18,48,43,.45)}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{padding:9px 14px;border-radius:99px;font-weight:700;font-size:14px;background:var(--paper);line-height:1.3;white-space:nowrap}
.tabs button[aria-selected=true]{background:var(--ink);color:var(--paper)}
.log{margin-top:16px;min-height:420px;display:flex;flex-direction:column;gap:9px}
.m{max-width:92%;width:fit-content;padding:11px 14px;border-radius:16px;line-height:1.5;font-size:clamp(14.5px,3.9vw,16px);animation:up .35s both}
.m.me{align-self:flex-end;background:var(--ink);color:var(--paper);border-bottom-right-radius:5px}
.m.you{background:var(--sage);border-bottom-left-radius:5px}
.m.moi{background:#FBE9B6;border-bottom-left-radius:5px;font-weight:500}
.m.moi b{display:block;font-size:13px;font-weight:800;margin-bottom:2px;line-height:1.3}
.m.moi small{display:block;font-size:13px;color:#5d5026;font-weight:500;line-height:1.45}
.item{background:rgba(255,255,255,.6);border-radius:10px;padding:8px 10px;margin-top:6px;font-weight:700;line-height:1.4}
.only{display:inline-block;font-size:12px;font-weight:700;background:var(--ink);color:var(--paper);padding:3px 8px;border-radius:7px;margin-bottom:5px;line-height:1.3}
.dots{display:inline-flex;gap:4px;padding:15px 16px;background:#FBE9B6;border-radius:14px;width:fit-content}
.dots i{width:7px;height:7px;background:#5d5026;border-radius:50%;animation:bl 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes bl{50%{opacity:.25}}
@keyframes up{from{opacity:0;transform:translateY(8px)}}
.pick{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.pick button{background:#fff;border-radius:99px;padding:8px 15px;font-weight:700;font-size:14px;line-height:1.3;white-space:nowrap;border:2px solid transparent}
.pick button:hover{border-color:var(--cta)}
.pick button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.tap{font-size:13px;font-weight:700;color:var(--cta2);line-height:1.3;margin-top:6px}
/* 모이 활용 */
.uses{display:grid;gap:14px;margin-top:40px}
@media(min-width:768px){.uses{grid-template-columns:1fr 1fr;gap:18px}}
@media(min-width:1200px){.uses{grid-template-columns:repeat(4,1fr)}}
.use{background:var(--paper2);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:14px;min-height:230px}
.use h3{font-size:clamp(18px,5vw,21px)}
.use .bb{background:var(--ink);color:var(--paper);padding:10px 13px;border-radius:14px 14px 4px 14px;font-weight:600;font-size:clamp(14px,3.8vw,15px);line-height:1.45;width:fit-content;align-self:flex-end}
.use .bb.m2{background:#FBE9B6;color:var(--text);border-radius:14px 14px 14px 4px;align-self:flex-start}
.use p{color:var(--sub);font-size:clamp(14.5px,3.9vw,15.5px);line-height:1.55;margin-top:auto}
.flow{list-style:none;padding:0;counter-reset:f;display:grid;gap:10px;margin-top:30px}
@media(min-width:620px){.flow{grid-template-columns:1fr 1fr;gap:14px}}
@media(min-width:1200px){.flow{grid-template-columns:repeat(4,1fr)}}
.flow li{counter-increment:f;background:var(--ink);color:var(--paper);border-radius:18px;padding:18px 20px;font-weight:600;line-height:1.5;font-size:clamp(15px,4vw,16.5px)}
.flow li::before{content:counter(f);display:block;font-family:Hahmlet,serif;font-size:26px;line-height:1.1;color:var(--mark);margin-bottom:8px}
/* 모먼트 */
.mos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px;width:100%}
.mo{background:var(--paper2);border-radius:18px;overflow:hidden;box-shadow:0 18px 30px -22px rgba(18,48,43,.4)}
.mo img{width:100%;aspect-ratio:1;object-fit:cover}
.mo p{padding:10px 12px 12px;font-size:clamp(11.5px,3.25vw,14.5px);line-height:1.5;font-weight:500}
.mo b{display:block;font-size:clamp(11.5px,3.1vw,13px);font-weight:800;line-height:1.3;margin-bottom:3px}
.mo:nth-child(even){transform:translateY(22px)}
.mos{padding-bottom:22px}
/* 안전 */
.stairs{display:grid;gap:10px;margin-top:40px}
.stair{background:var(--ink2);border-radius:16px;padding:16px 18px;font-weight:700;line-height:1.45;display:flex;gap:14px;align-items:center;font-size:clamp(15px,4.1vw,18px)}
.stair i{font-family:Hahmlet,serif;font-style:normal;font-size:24px;color:var(--mark);line-height:1;flex:none}
.stair:nth-child(2){margin-left:4%}.stair:nth-child(3){margin-left:8%}.stair:nth-child(4){margin-left:12%}.stair:nth-child(5){margin-left:16%}
.stair small{display:block;font-weight:500;font-size:13.5px;color:#C7D2CB;line-height:1.5}
@media(min-width:900px){
  .stairs{grid-template-columns:repeat(5,1fr);align-items:end;gap:12px}
  .stair{display:block;padding:22px;margin-left:0!important}
  .stair i{display:block;font-size:36px;margin-bottom:12px}
  .stair:nth-child(1){min-height:170px}.stair:nth-child(2){min-height:220px}.stair:nth-child(3){min-height:270px}.stair:nth-child(4){min-height:320px}.stair:nth-child(5){min-height:370px}
}
.safe3{display:grid;gap:12px;margin-top:20px}
@media(min-width:1000px){.safe3{grid-template-columns:repeat(3,1fr);gap:12px}}
.safe3 div{border:1px solid rgba(244,239,228,.2);border-radius:16px;padding:18px;font-weight:600;line-height:1.5;font-size:clamp(15px,4vw,17px)}
.fits{display:grid;gap:26px;width:100%}
.fit h3{font-size:clamp(23px,6.6vw,30px)}
@media(min-width:768px){.fit h3{font-size:clamp(28px,2.8vw,42px)}}
.fit ul{list-style:none;padding:0;margin-top:16px;display:grid;gap:8px}
.fit li{background:var(--paper2);border-radius:12px;padding:10px 14px;font-weight:600;line-height:1.5;font-size:clamp(15px,4vw,17px)}
.fit.no li{background:transparent;border:1.5px dashed #A9A491}
.loop{width:min(100%,560px);border-radius:28px;aspect-ratio:4/5;object-fit:cover;box-shadow:0 34px 60px -30px rgba(18,48,43,.55)}
/* 자주 묻는 질문 */
.faq .grid{display:grid;gap:32px}
@media(min-width:1000px){.faq .grid{grid-template-columns:.7fr 1.3fr;gap:64px}.faq .side{position:sticky;top:96px;align-self:start}}
details.q{border-bottom:1px solid var(--line)}
details.q summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 2px;font-weight:700;line-height:1.45;font-size:clamp(16px,4.3vw,20px)}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+";font-size:24px;font-weight:400;line-height:1;color:var(--cta2);flex:none}
details.q[open] summary::after{content:"−"}
details.q .a{padding:0 2px 22px;color:var(--sub);line-height:1.65}
/* 마지막 */
.cta{text-align:center;padding-block:clamp(96px,10vw,170px)}
.cta .quote{color:var(--paper)}
.cta .quote em{font-style:normal;color:var(--mark)}
.cta .get{justify-content:center;margin-top:36px;flex-direction:column}
/* 아래 */
footer{background:var(--paper);padding:30px 0 44px;color:var(--sub);font-size:12px;line-height:1.7}
footer .logo{height:26px;width:auto;margin-bottom:14px}
.flinks{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:10px}
.flinks a{text-decoration:none;white-space:nowrap}.flinks a:hover{text-decoration:underline}
footer b{color:var(--text)}
.biz summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:4px;padding:4px 0}
.biz summary::-webkit-details-marker{display:none}
.biz summary::after{content:"";width:0;height:0;border:4px solid transparent;border-top:5px solid currentColor;border-bottom:0}
.biz[open] summary::after{border-top:0;border-bottom:5px solid currentColor}
.biz p{margin-top:6px;font-size:11.5px}
footer .copy{display:block;margin-top:12px;font-size:11px}
/* 아래 고정 받기 */
.bbar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(244,239,228,.97);border-top:1px solid var(--line);padding:9px 14px calc(9px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:12px;transform:translateY(110%);transition:transform .3s}
.bbar.on{transform:none}
.bbar .gp img{width:140px;height:42px}
@media(min-width:900px){.bbar{display:none}}
/* 등장 */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  .js .motto .lines .l{color:var(--paper)}
  .mq .tr{transform:none}
  /* 인물 띠는 움직임 줄이기에서도 움직이되 절반 속도 */
  .people .tr{animation:flow 180s linear infinite!important}
  .people .plane.b .tr{animation-direction:reverse!important}
}

.duo{align-items:start}

/* 가독성: 휴대폰 본문 15, 안내 13 이상 / 컴퓨터 본문 17, 안내 14 이상. 대비 4.5:1 이상 */
:root{--cta2:#B53A12;--ctat:#C8431C;--cap:13.5px}
@media(min-width:768px){:root{--cap:14.5px;--body:clamp(17px,1.3vw,19px)}}
.btn{background:var(--ctat)}.btn:hover{background:var(--cta2)}
.opt[aria-pressed=true]{background:var(--ctat);border-color:var(--ctat)}
.ticks button.on,.ticks button:hover{background:var(--ctat)}
.wc[aria-pressed=true] i{background:var(--ctat);border-color:var(--ctat)}
.only{font-size:13px}.back,.qcount,.tabs button,.pick button{font-size:14px}
.gp img{width:207px;height:80px}
.nav .gp img{height:48px;width:124px}
.bbar .gp img{height:52px;width:134px}
.pill{font-size:14.5px}.homebar{font-size:14px}.nav ul{font-size:15px}
.m{font-size:clamp(15px,4.1vw,16px)}
.m.moi b,.m.moi small,.tap{font-size:13.5px}
.item{font-size:15px}
.mo p{font-size:13px;padding:10px 10px 12px}.mo b{font-size:13px}
.tcard .sub,.picks,.use p,.use .bb,.flow li,.ans li,.mcard span{font-size:15px}
.ans small,.stair small{font-size:var(--cap)}

.mcard img{width:92px;height:92px;border-radius:14px}
.biz p,footer .copy{font-size:12px}
.uses{grid-template-columns:1fr}
@media(min-width:768px){
  .uses{grid-template-columns:1fr 1fr}
  .only{font-size:14px}
  .m,.item,.tcard .sub,.picks,.use p,.use .bb,.flow li,.ans li,.mcard span,.fit li,.safe3 div,.fc,.key,.wc,details.q .a{font-size:17px}
  .m.moi b,.m.moi small,.tap,.mo p,.mo b{font-size:14.5px}
  
  .mcard img{width:112px;height:112px}
}

.ticks button.on,.ticks button:hover{color:#fff}

.duo .pc span{font-size:var(--cap)}
.ans i{font-size:var(--cap)}
@media(min-width:768px){.hero h1{font-size:clamp(35px,4.8vw,84px)}}


/* 휴대폰 첫 화면: 인물이 위쪽 약 45%, 그 아래 제목과 받기 */
@media(max-width:767px){
  .homebar{display:none}
  .heroimg{order:-1;height:45vh;height:45svh;min-height:280px}
  .herotext{padding:16px var(--pad) 30px}
  .hero .eye{margin-bottom:6px}
  .hero .lead{margin-top:10px;line-height:1.55}
  .hero .get{margin-top:12px}
  .hero .gp img{width:176px;height:68px}
}
.home-m{display:none}
@media(max-width:767px){.home-m{display:inline-flex}}
/* 고정 휴대폰 틀: 화면 높이에 맞춰 틀과 설명이 모두 보이게 */
@media(min-width:1100px){
  .pinbox{--ph:clamp(300px,calc((100vh - 118px)/2.087),440px)}
  .sticky .pin .note{margin-top:10px;line-height:1.4}
}
@media(min-width:1100px) and (max-height:740px){.sticky .pin{position:static}}
/* 받기 버튼 모양, 안내 */
button.gp{background:none;border:0;padding:0;cursor:pointer;display:inline-block;line-height:0}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%,10px);z-index:60;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:14px;font-size:15px;font-weight:600;line-height:1.4;white-space:nowrap;max-width:calc(100vw - 20px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:0 14px 30px -10px rgba(18,48,43,.6)}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media(min-width:900px){.toast{bottom:32px;font-size:17px}}
/* 아래 고정 줄 불투명, 푸터 누르는 높이 */
.bbar{background:var(--paper)}
.flinks{gap:0 16px}
.flinks a,.biz summary{display:inline-flex;align-items:center;min-height:40px}
.biz p a{position:relative}.biz p a::after{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px}
/* 좁은 폭 제목 여유 */
@media(max-width:767px){:root{--h2:clamp(22px,6.5vw,34px)}}

/* 작은 멈춤·재생 버튼(쇼츠, 인물 띠) */
.mini{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;font-size:var(--cap);font-weight:700;line-height:1.3;text-decoration:underline;text-underline-offset:3px;color:var(--sub);white-space:nowrap}
.dark .mini{color:#C7D2CB}
.people .foot{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.people .foot .mini{margin-top:14px}
.people.paused .tr,.people.paused .plane:hover .tr{animation-play-state:paused!important}

/* ===== 2026-11-02 대표 음성 수정 ===== */
/* 첫 화면 영상: 얼굴이 잘리지 않게 4:5 틀, 위쪽 기준. 휴대폰은 위쪽 약 45% 전체 폭 */
@media(min-width:768px){
  .herogrid{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding-right:max(var(--pad),calc((100vw - 1280px)/2))}
  .heroimg{justify-self:center;width:min(42vw,calc(min(100vh - 136px,880px)*.8));aspect-ratio:4/5;border-radius:28px;margin:18px 0;box-shadow:0 34px 60px -30px rgba(18,48,43,.5)}
}
@media(min-width:1700px){.herogrid{padding-right:calc((100vw - 1480px)/2)}}

/* 소제목: 그 구역 큰 제목의 절반. 휴대폰은 읽을 수 있게 15px 아래로 내리지 않는다 */
.eye{font-size:max(15px,calc(var(--h2)*.5));line-height:1.3;letter-spacing:-.01em;margin-bottom:.55em}
.hero .eye{font-size:calc(var(--h1)*.5)}
@media(min-width:768px){.hero .eye{font-size:clamp(17.5px,2.4vw,42px)}}
@media(min-width:768px) and (max-width:1099px){.hero h1{font-size:4.2vw}.hero .eye{font-size:2.1vw}.cta .quote{font-size:4.4vw}}
.step .n{font-size:clamp(22px,2.2vw,32px);margin-bottom:10px;line-height:1.3}
/* 연한 초록 구역: 컴퓨터·휴대폰 같은 색. 글자는 어둡게 */
:root{--leaf:#CFE6D4;--leaf-card:#FBF8F1;--leaf-sub:#2F4A42;--leaf-eye:#8A3A10;--leaf-strong:#0F5A43}
.dark{background:var(--leaf);color:var(--ink)}
.dark .lead,.dark .note,.dark .mini{color:var(--leaf-sub)}
.dark .eye{color:var(--leaf-eye)}
.dark .hl{color:var(--leaf-strong)}
.dark .ph{box-shadow:0 34px 60px -24px rgba(18,48,43,.55)}
.js .motto .lines .l{color:rgba(18,48,43,.34)}
.js .motto .lines .l.lit{color:var(--ink)}
.big{color:var(--leaf-strong)}


.acc .count{color:var(--leaf-strong)}
.acc .count small{color:var(--ink)}
.acc .cap{color:var(--leaf-sub)}
.cells i{background:rgba(18,48,43,.1)}
.cells i.a{background:var(--leaf-strong)}.cells i.b{background:var(--ctat)}.cells i.c{background:#E0A516}
.ticks button{background:var(--leaf-card);color:var(--ink)}
.fc{background:var(--leaf-card)}
.stair{background:var(--leaf-card)}
.stair i{color:var(--leaf-eye)}
.stair small{color:var(--leaf-sub)}
.safe3 div{border-color:rgba(18,48,43,.28)}
.cta .quote{color:var(--ink)}
.cta .quote em{color:var(--leaf-strong)}
.key{background:var(--paper2)}
.dark .key{background:var(--leaf-card)}
@media(prefers-reduced-motion:reduce){.js .motto .lines .l{color:var(--ink)}}
/* 고민 결과 칸·모이 쓰는 법 순서 칸도 같은 계열로 */
.wres{background:var(--leaf);color:var(--ink)}
.wres b{color:var(--leaf-strong)}
.flow li{background:var(--leaf);color:var(--ink)}
.flow li::before{color:var(--leaf-eye)}
.pill{background:var(--leaf);color:var(--ink)}
.pill b{color:var(--leaf-strong)}

/* 모먼트 왼쪽 글 */
.mo p,.mo b{font-size:14px}
@media(min-width:768px){.mo p,.mo b{font-size:17px}.mo p{padding:12px 14px 14px}}

/* 쇼츠: 가운데 큰 재생 버튼 */
.frame .in{position:relative}
.bigplay{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;background:rgba(18,48,43,.18);transition:background .2s;cursor:pointer;border-radius:inherit}
.bigplay i{display:block;width:clamp(88px,26%,116px);aspect-ratio:1;border-radius:50%;background:var(--ctat);box-shadow:0 14px 34px -8px rgba(0,0,0,.55);position:relative;transition:transform .15s,opacity .2s}
.bigplay i::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:clamp(18px,3vw,24px) 0 clamp(18px,3vw,24px) clamp(30px,5vw,38px);border-color:transparent transparent transparent #fff}
.bigplay:hover i{transform:scale(1.06)}
.bigplay.on{background:transparent}
.bigplay.on i{opacity:0}
.bigplay.on:hover i,.bigplay.on:focus-visible i{opacity:.85}
.bigplay.on i::after{left:50%;width:32%;height:40%;border-style:solid;border-width:0 clamp(9px,1.4vw,11px);border-color:#fff;box-sizing:border-box}
.dark .frame{box-shadow:0 40px 70px -26px rgba(18,48,43,.6)}

/* 비교 아래 한 줄 */
.people .foot{justify-content:flex-end}
.ph-box:has(>.loop){width:min(100%,560px)}

/* ===== 2026-11-02 대표 지시: 모든 구역에 보라색 판 사진 =====
   판 색은 앱 가입 화면과 같은 #390F3E. 사진에 구워 넣었고(make-bg.py), 글은 흰색·금색, 카드는 밝은 칸에 어두운 글. */
:root{--plate:#2A0C30;--on:#EFE6F3;--gold:#F6CB52;
  --paper:#F7F1F8;--paper2:#FCF9FD;--sage:#EBDFF0;--ink:#2E1036;--ink2:#3D1747;--text:#21142A;--sub:#5C4E66;--line:#DCD0E3;
  --leaf:#EADDF1;--leaf-card:#FCF9FD;--leaf-sub:#4E3F58;--leaf-strong:#5A1F78}
body{background:var(--plate)}
main section,.dark,.sage{background:var(--plate);color:#fff}
main section{isolation:isolate}
/* 사진 칸: 긴 구역에서도 화면 높이만큼만 차지하고 따라온다(고정 배경 방식을 쓰지 않아 휴대폰에서도 깨지지 않음) */
.bgp{position:absolute;inset:0;z-index:-1;pointer-events:none}
.bgp picture{display:contents}
.bgp img{position:sticky;top:0;width:100%;max-width:none;height:100%;max-height:100vh;max-height:100lvh;object-fit:cover}
.bgp::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--plate),transparent 110px,transparent calc(100% - 110px),var(--plate))}
.thrifty .bgp img{display:none}
.nav{background:rgba(247,241,248,.94);border-bottom-color:rgba(220,208,227,.7)}
.heroimg{background:var(--ink2)}
.frame .in{background-color:var(--ink)}
.bigplay{background:rgba(57,15,62,.18)}
/* 사진 위 글 */
.lead,.dark .lead,.note,.dark .note,.mini,.dark .mini,.step p,.acc .cap{color:var(--on)}
.eye,.dark .eye,.step .n,.big,.acc .count,.gold{color:var(--gold)}
.hl,.dark .hl{background:none;color:var(--gold)}

.acc .count small{color:#fff}
.js .motto .lines .l{color:rgba(255,255,255,.5)}
.js .motto .lines .l.lit{color:#fff}
.cta .quote{color:#fff}.cta .quote em{color:var(--gold)}
.okbox{color:#fff}.warnbox{color:#FFD2BC}
.cells i{background:rgba(255,255,255,.14)}
.cells i.a{background:var(--gold)}.cells i.c{background:#fff}
.safe3 div{border-color:rgba(255,255,255,.36);background:rgba(42,12,48,.55)}
.fit.no li{border-color:rgba(255,255,255,.55);background:rgba(42,12,48,.55)}
details.q{border-bottom-color:rgba(255,255,255,.3)}
details.q .a{color:var(--on)}
details.q summary::after{color:var(--gold)}
/* 밝은 칸 안 글은 어둡게 */
.wc,.qbox,.fc,.stair,.key,.dark .key,.tcard,.chat,.use,.mo,.mcard,.fit li,.ticks button,.wres,.flow li,.pill,.pc span{color:var(--text)}
.fit.no li{color:#fff}
.ticks button.on,.ticks button:hover{color:#fff}
.tcard .pct{color:var(--leaf-strong)}
/* 어두운 판 위에서 앱 화면·사진 테두리가 보이게 */
.ph,.dark .ph,.pinbox,.gate,.frame,.dark .frame,.loop{box-shadow:0 0 0 1px rgba(255,255,255,.24),0 34px 60px -24px rgba(0,0,0,.75)}
.wres,.qbox,.chat,.mo{box-shadow:0 26px 50px -30px rgba(0,0,0,.7)}
#vsound{margin-top:6px}
@media(prefers-reduced-motion:reduce){.js .motto .lines .l{color:#fff}}

/* ===== 2026-11-02 대표 추가 수정 ===== */
/* 휴대폰 첫 화면 영상: 9:16 전체가 잘리지 않게. 위 메뉴 아래 한 화면에 다 들어가도록 폭을 맞춘다 */
@media(max-width:767px){
  .heroimg{height:auto;min-height:0;aspect-ratio:9/16;justify-self:center;width:min(100%,calc((100vh - 60px)*.5625));width:min(100%,calc((100svh - 60px)*.5625))}
}
/* 휴대폰 비교표: 컴퓨터처럼 빠른 방식·모이릿 방식 두 칸을 나란히. 항목 이름은 각 줄 맨 위 */
/* ===== 2026-11-02 콘텐츠 확장: 시장·앱 비교·대상·마음카드 ===== */
/* 고민 → 차별화 연결 */




/* 시장 */
.mktabs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-width:440px}
.mktabs button{min-height:46px;padding:8px 10px;border-radius:14px;background:rgba(42,12,48,.6);border:1px solid rgba(255,255,255,.4);color:#fff;font-weight:700;font-size:15px;line-height:1.3}
.mktabs button[aria-selected=true]{background:var(--gold);border-color:var(--gold);color:var(--text)}
.mkp{margin-top:18px}
.kpis{display:grid;gap:12px}
@media(min-width:900px){.kpis{grid-template-columns:1fr 1fr;gap:16px}.kpis>.kpi:nth-child(3):last-child{grid-column:span 2}}
@media(min-width:1200px){#mp0 .kpis,#mp1 .kpis{grid-template-columns:repeat(3,1fr)}#mp0 .kpi,#mp1 .kpi{grid-column:auto}}
.kpi{background:var(--paper2);color:var(--text);border-radius:22px;padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:14px}
.kpi h3{font-size:clamp(17px,4.6vw,20px);line-height:1.4}
.pair{display:flex;flex-wrap:wrap;gap:12px 28px}
.pair b{display:block;font-family:Hahmlet,serif;font-size:clamp(38px,11vw,56px);line-height:1.1;color:var(--leaf-strong);font-weight:700}
.pair span{font-weight:inherit}
.pair div>span{display:block;font-weight:600;font-size:15px;color:var(--sub);line-height:1.45}
.hb{display:grid;gap:4px;grid-template-columns:1fr auto;align-items:center}
.hb .hk{grid-column:1;font-weight:600;font-size:15px;line-height:1.4}
.hb .hbar{grid-column:1/-1;grid-row:2;height:12px;border-radius:8px;background:var(--leaf);overflow:hidden}
.hb .hbar i{display:block;height:100%;width:var(--w);border-radius:8px;background:var(--leaf-strong)}
.hb b{grid-column:2;grid-row:1;font-size:15px;color:var(--leaf-strong)}
.src{margin-top:auto;font-size:13.5px;line-height:1.5;color:var(--sub)}
.src a{display:inline-flex;align-items:center;min-height:32px;color:var(--leaf-strong);font-weight:700;text-underline-offset:3px}
@media(min-width:768px){.src{font-size:14.5px}.pair div>span,.hb .hk,.hb b{font-size:17px}}
/* 앱 비교 */
.agrid{display:grid;gap:10px;margin-top:16px;align-items:start}
@media(min-width:768px){.agrid{grid-template-columns:1fr 1fr;gap:14px}}
@media(min-width:1200px){.agrid{grid-template-columns:repeat(3,1fr)}}
.app{background:var(--paper2);color:var(--text);border-radius:18px;padding:18px}
.app summary{list-style:none;cursor:pointer;display:grid;gap:6px;position:relative;padding-right:26px}
.app summary::-webkit-details-marker{display:none}
.app summary::after{content:"+";position:absolute;right:0;top:-2px;font-size:24px;line-height:1.2;font-weight:700;color:var(--leaf-strong)}
.app[open] summary::after{content:"−"}
.an{font-family:Hahmlet,serif;font-weight:700;font-size:clamp(19px,5vw,22px);line-height:1.3}
.ag{font-size:14px;font-weight:700;color:var(--leaf-strong);line-height:1.4}
.ac{font-size:15px;color:var(--sub);line-height:1.5}
.app dl{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:4px;font-size:15px;line-height:1.5}
.app dt{font-weight:700;margin-top:6px}.app dd{margin:0;color:var(--sub)}

.appme{margin-top:18px;background:var(--gold);color:var(--text);border-radius:22px;padding:clamp(20px,2.6vw,32px)}
.appme p{margin-top:8px;font-weight:600;line-height:1.6}
@media(min-width:768px){.ac,.app dl,.ag{font-size:17px}}
/* 누구를 위한 */
.tgrid{display:grid;gap:12px;align-items:start}
@media(min-width:768px){.tgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1200px){.tgrid{grid-template-columns:repeat(3,1fr)}}
.tg{background:var(--paper2);color:var(--text);border-radius:20px;padding:20px}
.tg summary{list-style:none;cursor:pointer;font-family:Hahmlet,serif;font-weight:700;font-size:clamp(16px,4.4vw,20px);line-height:1.45;position:relative;padding-right:26px}
.tg summary::-webkit-details-marker{display:none}
.tg summary::after{content:"+";position:absolute;right:0;top:-3px;font-size:24px;color:var(--leaf-strong)}
.tg[open] summary::after{content:"−"}
.tg p{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);color:var(--leaf-strong);font-weight:600;line-height:1.5;font-size:15px}
@media(min-width:768px){.tg p{font-size:17px}}
/* 마음카드 */
.mindc{width:min(100%,430px);justify-self:center;background:linear-gradient(135deg,var(--ink),var(--ink2) 55%,var(--ink));border:1px solid rgba(255,255,255,.3);border-radius:26px;padding:24px;color:#fff;box-shadow:0 34px 60px -24px rgba(0,0,0,.75)}
.mindc .mh{color:var(--gold);font-weight:700;font-size:15px}
.mindc h3{margin-top:6px;color:#fff}
.mindc ol{list-style:none;padding:0;margin-top:16px;display:grid;gap:10px}
.mindc li{padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.2);line-height:1.45}
.mindc li span{display:block;font-size:14px;color:var(--on)}
.mindc li b{display:block;margin-top:2px;font-size:17px;color:#fff}
.mindc .mf{margin-top:14px;font-size:15px;font-weight:600;color:var(--gold)}
@media(min-width:768px){.mktabs button,.mindc .mh,.mindc li span,.mindc li b,.mindc .mf{font-size:17px}.mindc li b{font-size:18px}}
.ag{font-size:15px}
@media(min-width:768px){.ag{font-size:17px}}
.mindc li span{font-size:15px}
@media(min-width:768px){.mindc li span{font-size:17px}}

/* 맨 위로 버튼: 위로 스크롤할 때만 나온다. 휴대폰은 아래 받기 줄 위에 */
.totop{position:fixed;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:55;width:52px;height:52px;border-radius:50%;background:var(--gold);color:var(--text);font-size:26px;font-weight:700;line-height:1;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
.totop.on{opacity:1;visibility:visible;transform:none}
@media(min-width:900px){.totop{right:28px;bottom:28px;width:56px;height:56px}}
@media(prefers-reduced-motion:reduce){.totop{transition:none}}

/* 시장 구역 휴대폰: 묶음을 모두 위아래로 보여 주고 탭은 위에 붙어 따라온다 */
.mkt{display:none}
@media(max-width:767px){
  .mktabs{position:sticky;top:60px;z-index:5;max-width:none;margin-inline:calc(-1*var(--pad));padding:8px var(--pad);background:var(--plate)}
  .mkp{margin-top:10px}
  .mkp+.mkp{margin-top:34px}
  .mkt{display:block;color:var(--gold);font-size:clamp(19px,5.4vw,22px);margin-bottom:12px}
}

.gp.as.wait{opacity:.55}