:root{
  --bg:#E9E2D3; --ink:#17150F;
  --g:clamp(16px,2.4vw,36px);
  --display:"Song Myung","AppleMyungjo","Nanum Myeongjo",serif;
  --body:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --tomato:#C4432A;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.75;word-break:keep-all;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.mono{font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.02em;font-weight:400}
.disp{font-family:var(--display);font-weight:400;letter-spacing:-.02em}
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span{display:block}

/* 움직임이 없을 때는 구간마다 제 색을 칠한다 */
[data-tone]{background:var(--sb);color:var(--si)}
.motion [data-tone]{background:transparent;color:inherit}
.motion .hero{background:#E9E2D3}

/* 시안 표시 */
.todo{text-decoration:none}
.draft .todo{text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:.28em}
.draft-only{display:none}
.draft .draft-only{display:block}
#draftmark{color:var(--ink);position:fixed;left:50%;top:var(--g);transform:translateX(-50%);z-index:30;white-space:nowrap}
html:not(.draft) #draftmark{display:none}

/* 고정 글자 */
.chrome{position:fixed;z-index:30;color:var(--ink)}
#brand{left:var(--g);top:var(--g);font-family:var(--display);font-size:17px;line-height:1.1}
#menu{right:var(--g);top:var(--g);display:flex;gap:clamp(14px,1.8vw,26px)}
#menu a{transition:opacity .2s}
#menu:hover a{opacity:.4}
#menu a:hover{opacity:1}
#clock{left:var(--g);bottom:var(--g);font-variant-numeric:tabular-nums}
#index{right:var(--g);bottom:var(--g);text-align:right}
/* 스크롤하는 본문과 겹쳐 지저분해지지 않게: 아래 글자는 바탕을 깔고, 위 글자는 내려갈 때 숨긴다 */
#clock,#index{color:#fff!important;mix-blend-mode:difference}
#brand,#menu,#draftmark{transition:opacity .3s}
html.hd-hide #brand,html.hd-hide #menu,html.hd-hide #draftmark{opacity:0!important;pointer-events:none}
#clock,#index{transition:opacity .3s}
@media (max-width:760px){html.hd-hide #clock,html.hd-hide #index{opacity:0!important}}
#menu{font-size:13px}
@media (max-width:760px){#menu{display:none}}
#grain{position:fixed;inset:-50%;z-index:40;pointer-events:none;opacity:.075;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}

/* 불이 켜지는 첫 순간 */
#lights{position:fixed;inset:0;z-index:50;background:#070705;pointer-events:none;display:none}
.motion #lights{display:block}

/* 첫 화면 */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;isolation:isolate;overflow:hidden;background:var(--sb)}
.hero-photo{position:absolute;right:calc(var(--g) + 8vw);top:9vh;width:35vw;height:58vh;z-index:1}
.hero-photo figcaption{position:absolute;left:0;bottom:calc(100% + 6px)}
.hero-photo .frame{width:100%;height:100%;overflow:hidden}
.hero-photo img{height:112%;object-position:14% 50%}
#mark{position:absolute;left:var(--g);right:var(--g);bottom:calc(var(--g) + 18px);z-index:2;font-family:var(--display);font-weight:400;font-size:calc((100vw - 2*var(--g))/4);line-height:1;white-space:nowrap;color:#D2CDC4;mix-blend-mode:difference;display:flex}
#mark .gl{display:block;overflow:hidden;width:25%;text-align:center}
#mark .gl>span{display:block}
#mark br{display:none}
.hero-note{position:absolute;left:var(--g);top:calc(var(--g) + 12vh);z-index:3;width:min(25vw,300px)}
.hero-note h2{font-size:clamp(22px,2.3vw,34px);line-height:1.2;margin-bottom:14px}
.hero-note p{font-size:14px;line-height:1.65}
.hero-v{position:absolute;right:var(--g);top:calc(var(--g) + 12vh);z-index:3;writing-mode:vertical-rl}
@media (max-width:760px){
  .hero-photo{right:0;left:auto;top:13svh;width:64vw;height:38svh}
  #mark{display:block;white-space:normal;font-size:calc((100vw - 2*var(--g))/2);line-height:1.02;bottom:calc(var(--g) + 26px)}
  #mark .gl{display:inline-block;width:50%}
  #mark br{display:inline}
  .hero-note{top:13svh;width:28vw}
  .hero-note h2{writing-mode:vertical-rl;font-size:25px;line-height:1.15;margin:0;height:9em}
  .hero-note p,.hero-v{display:none}
}

/* 이야기 */
.story{position:relative;padding:clamp(120px,20vh,220px) var(--g) clamp(120px,22vh,240px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
.story-cap{grid-column:1 / span 2;writing-mode:vertical-rl;font-size:clamp(17px,1.5vw,22px);line-height:1.5;height:max-content;position:sticky;top:18vh;font-family:var(--display)}
.story-body{grid-column:3 / span 10}
.story-body p{font-family:var(--display);font-size:clamp(29px,4.5vw,70px);line-height:1.34;letter-spacing:-.025em}
.story-body p+p{margin-top:.85em}
@media (max-width:760px){
  .story{display:block}
  .story-cap{position:static;writing-mode:horizontal-tb;margin-bottom:44px;font-size:18px}
  .story-cap br{display:none}
}

/* 원료 */
.ing-intro{padding:clamp(60px,10vh,120px) var(--g) clamp(90px,16vh,180px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:end}
.ing-intro h2{grid-column:1 / span 8;font-size:clamp(38px,6.6vw,104px);line-height:1.12}
.ing-intro p{grid-column:10 / span 3;font-size:15px}
@media (max-width:760px){.ing-intro{display:block}.ing-intro p{margin-top:28px}}
.plate{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;color:#F4EADA;background:#0b0a07;margin-bottom:55vh}
.plate:last-child{margin-bottom:0}
.plate .ph{position:absolute;inset:0}
.plate .ph::after{content:"";position:absolute;inset:0;background:rgba(10,8,5,.16)}
.plate .name{position:absolute;left:var(--g);bottom:calc(var(--g) + 26px);font-family:var(--display);line-height:1;letter-spacing:-.035em;font-size:clamp(68px,17vw,290px)}
.plate.long .name{font-size:clamp(58px,13.4vw,230px)}
.plate .num{position:absolute;left:var(--g);top:calc(var(--g) + 44px)}
.plate .desc{position:absolute;right:var(--g);top:calc(var(--g) + 44px);width:min(280px,46vw);font-size:14px;line-height:1.65}
.plate .tmp{position:absolute;right:var(--g);bottom:calc(var(--g) + 26px)}
#gin{background:#000}
@media (max-width:760px){
  .plate .ph img{object-position:74% 50%}
  .plate .desc{width:50vw}
}
#mins{background:#6F2A1B;color:#F4EADA}
#mins .big{position:absolute;left:var(--g);right:var(--g);top:50%;transform:translateY(-54%);display:flex;justify-content:space-between;align-items:baseline;font-family:var(--display);line-height:1;font-size:clamp(120px,31vw,560px);letter-spacing:-.05em}
#mins .big span+span{font-size:.72em}
#mins .label{position:absolute;left:var(--g);bottom:calc(var(--g) + 26px);width:min(420px,60vw);font-size:14px;line-height:1.65}
#mins .label b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(22px,2.4vw,34px);line-height:1.25;margin-bottom:8px;letter-spacing:-.02em}
@media (max-width:760px){
  #mins .big{display:block;top:44%;font-size:46vw;line-height:.96}
  #mins .big span{display:block}
  #mins .big span+span{font-size:1em;text-align:right}
}

/* 만드는 회사 */
.made{padding:clamp(120px,22vh,240px) var(--g) clamp(90px,14vh,160px);position:relative;background:var(--sb)}
.motion .made{background:var(--bg)}
.made h2{font-size:clamp(38px,6.6vw,104px);line-height:1.12;margin-bottom:clamp(56px,10vh,110px)}
.made-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
.made-grid>p{grid-column:1 / span 4;font-size:clamp(16px,1.25vw,18px)}
.rows{grid-column:6 / span 7;list-style:none}
.rows li{display:grid;grid-template-columns:7em minmax(0,1fr);gap:var(--g);padding:15px 0 16px;border-top:1px solid color-mix(in srgb,currentColor 32%,transparent);font-size:15px;line-height:1.6}
.rows li:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 32%,transparent)}
.rows .mono{padding-top:4px;opacity:.72}
@media (max-width:760px){.made-grid{display:block}.rows{margin-top:48px}.rows li{grid-template-columns:4.6em minmax(0,1fr);gap:12px}}

/* 드시는 법 */
.how{padding:clamp(70px,12vh,130px) 0 clamp(110px,18vh,190px)}
.how-head{display:flex;justify-content:space-between;gap:24px;padding:0 var(--g);margin-bottom:clamp(40px,7vh,72px)}
.how-head h2{font-family:var(--display);font-weight:400;font-size:clamp(20px,1.9vw,28px);line-height:1.3;letter-spacing:-.02em}
.how ol{list-style:none}
.how li{position:relative;padding:clamp(10px,1.4vw,22px) var(--g) clamp(14px,1.8vw,28px);border-top:1px solid color-mix(in srgb,currentColor 32%,transparent);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:end}
.how li:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 32%,transparent)}
.how h3{grid-column:1 / span 9;font-family:var(--display);font-weight:400;font-size:clamp(50px,11vw,190px);line-height:1.08;letter-spacing:-.035em}
.how li p{grid-column:10 / span 3;font-size:14px;line-height:1.6;padding-bottom:1.1em}
.how .n{position:absolute;right:var(--g);top:14px}
.how-note{padding:22px var(--g) 0;font-size:14px}
@media (max-width:760px){.how li{display:block}.how li p{margin-top:8px;padding-bottom:0}}

/* 팥알의 하루 */
.day{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;min-height:100svh}
.day>div{position:relative;overflow:hidden;padding:calc(var(--g) + 44px) var(--g) calc(var(--g) + 26px);display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;min-height:100svh}
.day .am{background:#EFE6D2;color:#17150F}
.day .pm{background:#080806;color:#F1E8D8}
.day .pm .bgi{position:absolute;inset:0;z-index:0}
.day .pm .bgi img{height:116%;opacity:.86;filter:brightness(.74)}
.day .pm>*:not(.bgi){position:relative;z-index:1}
.day h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4vw,62px);line-height:1.15;letter-spacing:-.03em}
.day .glyph{font-family:var(--display);font-size:clamp(150px,27vw,470px);line-height:.9;letter-spacing:-.04em}
.day .txt{max-width:25em;font-size:15px}
.day .txt b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(22px,2vw,30px);line-height:1.3;letter-spacing:-.02em;margin-bottom:8px}
.day .go{display:inline-block;margin-top:14px;border-bottom:1px solid currentColor;padding-bottom:1px}
@media (max-width:760px){.day{grid-template-columns:1fr}}

/* 스토리 목록 */
.stories{padding:clamp(90px,16vh,170px) 0 clamp(60px,10vh,110px)}
.st-list{list-style:none}
.st-list li{border-top:1px solid color-mix(in srgb,currentColor 32%,transparent)}
.st-list li:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 32%,transparent)}
.st-list a{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:baseline;padding:clamp(14px,1.5vw,24px) var(--g)}
.st-no{grid-column:1 / span 1}
.st-t{grid-column:2 / span 9;font-size:clamp(25px,3.7vw,60px);line-height:1.18;letter-spacing:-.03em;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.st-l{grid-column:11 / span 2;text-align:right}
.st-list img{position:absolute;right:calc(var(--g) + 12vw);top:50%;width:21vw;height:14vw;transform:translateY(-50%);opacity:0;clip-path:inset(50% 0);transition:opacity .25s,clip-path .55s cubic-bezier(.2,.8,.2,1);pointer-events:none;z-index:2}
@media (hover:hover) and (min-width:761px){
  .st-list a:hover .st-t{transform:translateX(1.2vw)}
  .st-list a:hover img{opacity:1;clip-path:inset(0 0)}
}
@media (hover:none),(max-width:760px){
  .st-list a{display:block;padding:14px var(--g) 18px}
  .st-no{display:inline-block;margin-right:10px}
  .st-l{display:inline-block}
  .st-t{display:block;margin:8px 0 14px;font-size:27px}
  .st-list img{position:static;transform:none;opacity:1;clip-path:none;width:100%;height:auto;aspect-ratio:3/2}
}

/* 제품 정보: 실제 포장 표시처럼 */
.info{padding:clamp(120px,20vh,220px) var(--g);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
.info h2{grid-column:1 / span 5;font-size:clamp(34px,4.6vw,74px);line-height:1.14}
.label-sheet{grid-column:7 / span 6;background:#EFE6D2;color:#17150F;padding:clamp(18px,2vw,30px);border:0}
.label-sheet .hd{display:flex;justify-content:space-between;padding-bottom:10px;border-bottom:2px solid currentColor}
.label-sheet table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.55}
.label-sheet th,.label-sheet td{text-align:left;vertical-align:top;padding:10px 0;border-bottom:1px solid rgba(23,21,15,.28);font-weight:400}
.label-sheet th{width:6.5em;padding-right:14px;font-weight:600}
.caution{padding-top:16px;font-size:13.5px;line-height:1.65}
.caution b{display:block;font-weight:600;margin-bottom:3px}
@media (max-width:760px){.info{display:block}.label-sheet{margin-top:48px}}

/* 문의와 스위치 */
.contact{padding:clamp(60px,10vh,120px) var(--g) clamp(90px,14vh,150px)}
.contact h2{font-size:clamp(34px,4.6vw,74px);line-height:1.14;margin-bottom:clamp(44px,8vh,84px)}
.contact-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:end}
.contact-lines{grid-column:1 / span 9}
.contact-lines a{display:block;font-family:var(--display);font-size:clamp(38px,8vw,136px);line-height:1.12;letter-spacing:-.03em;width:max-content;max-width:100%}
.contact-lines a.mail{font-size:clamp(22px,3vw,48px);margin-top:.3em;letter-spacing:-.015em;border-bottom:1px solid currentColor;line-height:1.3}
.contact-lines p{margin-top:28px;font-size:15px;max-width:33em}
.contact-lines .soon{font-size:14px;margin-top:10px}
#sw-wrap{grid-column:11 / span 2;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:10px;position:relative;z-index:61}
#sw{position:relative;width:64px;height:104px;border:1px solid #F1E8D8;padding:6px;display:block;color:#F1E8D8}
#sw .rocker{position:absolute;left:6px;right:6px;top:6px;height:44px;background:#F1E8D8;transition:top .22s cubic-bezier(.3,1.5,.5,1),background .5s}
#sw[aria-checked="true"] .rocker{top:52px;background:#55524B}
#sw[aria-checked="true"]{border-color:#55524B}
#sw-label{color:#F1E8D8;white-space:nowrap}
.off #sw-label{color:#6A665D}
@media (max-width:760px){
  .contact-grid{display:block}
  #sw-wrap{margin-top:64px;align-items:flex-start}
}
footer{padding:0 var(--g) calc(var(--g) + 34px);display:flex;flex-wrap:wrap;gap:4px 28px;justify-content:space-between;color:#F1E8D8;font-size:13px;line-height:1.6;background:var(--sb)}
.motion footer{background:#0E0F0C;color:#F1E8D8}

/* 불 끈 화면 */
#off{position:fixed;inset:0;z-index:60;background:#040403;opacity:0;pointer-events:none;transition:opacity 1.3s ease;display:flex;align-items:center;justify-content:center}
#off p{font-family:var(--display);color:#8F8A7E;font-size:clamp(20px,2.2vw,30px);letter-spacing:.02em;opacity:0;transition:opacity 1.6s ease 1s}
.off #off{opacity:1;pointer-events:auto}
.off #off p{opacity:1}
.off #grain{display:none}

/* 여러 쪽 구성 */
#menu a[aria-current]{text-decoration:underline;text-underline-offset:.3em}
#mnav{display:none;right:var(--g);top:var(--g)}
#mnav summary{list-style:none;cursor:pointer;position:relative;z-index:2}
#mnav summary::-webkit-details-marker{display:none}
#mnav[open] summary{color:#F1E8D8}
#mnav nav{position:fixed;inset:0;z-index:1;background:#14110C;color:#F1E8D8;padding:calc(var(--g) + 56px) var(--g) var(--g);display:flex;flex-direction:column;gap:6px;overflow:auto}
#mnav nav a{font-family:var(--display);font-size:32px;line-height:1.4;letter-spacing:-.02em}
html.hd-hide #mnav:not([open]){opacity:0;pointer-events:none}
@media (max-width:760px){#mnav{display:block}}
.page-head{padding:calc(var(--g) + 17vh) var(--g) clamp(60px,10vh,110px)}
.page-head h1{font-family:var(--display);font-weight:400;font-size:clamp(46px,9vw,150px);line-height:1.1;letter-spacing:-.035em}
.page-head p{max-width:34em;margin-top:clamp(20px,3vh,32px);font-size:clamp(15px,1.25vw,18px)}
.page-head + .story{padding-top:clamp(20px,5vh,70px)}
.page-head + .how{padding-top:0}
.made h1,.contact h1{font-weight:400}
.made h1{font-size:clamp(46px,8vw,130px);line-height:1.12;margin-bottom:clamp(56px,10vh,110px)}
.contact{padding-top:calc(var(--g) + 15vh)}
.contact h1{font-size:clamp(46px,8vw,130px);line-height:1.12;margin-bottom:clamp(44px,8vh,84px)}
.info h2{font-family:var(--display)}
.more{display:inline-block;margin-top:clamp(36px,6vh,60px);border-bottom:1px solid currentColor;padding-bottom:1px}
.home-intro .story-body p{font-size:clamp(29px,4.5vw,70px)}
.quick,.motion .quick{padding:clamp(70px,12vh,130px) 0;background:#C7693F;color:#150E08}
.quick .st-t{grid-column:2 / span 7}
.quick .st-l{grid-column:9 / span 4}
@media (hover:none),(max-width:760px){.quick .st-t{margin-bottom:6px}.quick .st-l{display:block;text-align:left}}
.next-page{display:block;padding:clamp(60px,11vh,130px) var(--g)}
.next-page .disp{display:block;margin-top:14px;font-size:clamp(38px,7vw,118px);line-height:1.14;letter-spacing:-.03em}
.en .day .glyph{font-size:clamp(90px,13vw,230px);letter-spacing:-.03em}
.en .plate .name{font-size:clamp(58px,13vw,220px);letter-spacing:-.03em}
.en .plate.long .name{font-size:clamp(46px,9.4vw,170px);line-height:1.02}
.en .story-body p{font-size:clamp(27px,4vw,62px)}
.en .hero-note h2{font-size:clamp(22px,2.1vw,30px)}
.en .hero-v{font-size:11px}
@media (max-width:760px){.en .hero-note h2{font-size:21px;height:13em}.en .plate.long .name{font-size:41px}}

/* 구매 페이지: 판매 전이라 버튼은 안내 창만 연다 */
.shop{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding:calc(var(--g) + 12vh) var(--g) clamp(70px,12vh,130px);align-items:start}
.shop-photo{grid-column:1 / span 6;position:relative;aspect-ratio:4/5;overflow:hidden}
.shop-photo img{object-position:50% 100%}
.shop-photo figcaption{position:absolute;left:12px;bottom:10px;color:#F1E8D8}
.shop-panel{grid-column:8 / span 5}
.shop-eyebrow{opacity:.72}
.shop-panel h1{margin-top:10px;font-size:clamp(46px,5.6vw,92px);line-height:1.1}
.shop-lead{margin-top:clamp(14px,2vh,22px);font-size:clamp(15px,1.25vw,18px)}
.shop-rows{margin-top:clamp(26px,4vh,44px);border-top:1px solid currentColor}
.shop-rows>div{display:grid;grid-template-columns:6em minmax(0,1fr);gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid rgba(241,232,216,.26);font-size:15px}
.shop-rows dt{opacity:.72}
.shop-price{font-family:var(--display);font-size:clamp(22px,2vw,28px);line-height:1.3}
.qty{display:inline-grid;grid-template-columns:40px 44px 40px;align-items:center;text-align:center;border:1px solid rgba(241,232,216,.5)}
.qty button{height:40px;font-size:18px;line-height:1}
.qty output{font-family:var(--mono);font-size:14px}
.shop-actions{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin-top:clamp(22px,3vh,32px)}
.shop-btn{min-height:56px;border:1px solid #F1E8D8;font-size:16px;font-weight:600;transition:opacity .2s}
.shop-btn.solid{background:#F1E8D8;color:#17150F}
@media (hover:hover){.shop-btn:hover{opacity:.78}}
#soon{margin:auto;width:min(440px,calc(100vw - 32px));padding:clamp(24px,4vw,36px);border:0;background:#EFE6D2;color:#17150F}
#soon::backdrop{background:rgba(5,4,3,.68)}
#soon h2{font-size:clamp(24px,3vw,32px);line-height:1.25}
#soon p{margin-top:14px;font-size:15px}
.soon-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:26px}
.soon-actions a{border-bottom:1px solid currentColor}
.soon-actions button{min-height:44px;padding:0 22px;background:#17150F;color:#F1E8D8}
@media (max-width:760px){
  .shop{display:block;padding-top:calc(var(--g) + 64px)}
  .shop-photo{aspect-ratio:1/1}
  .shop-panel{margin-top:28px}
}

/* 구매 페이지 아래 상세 정보. 실물 사진은 11/13 촬영 뒤 넣는다 */
.shop-tabs{display:flex;justify-content:center;gap:clamp(18px,4vw,56px);padding:18px var(--g);background:#171410;color:#F1E8D8;border-top:1px solid rgba(241,232,216,.26);border-bottom:1px solid rgba(241,232,216,.26)}
.shop-tabs a{padding:6px 0}
.shop{padding-bottom:clamp(50px,8vh,90px)}
.dt{padding:clamp(70px,12vh,130px) var(--g);background:#171410;color:#F1E8D8}
.dt-in{max-width:760px;margin:0 auto}
.dt h2{font-size:clamp(32px,4.4vw,60px);line-height:1.2;margin-bottom:clamp(26px,4vh,44px)}
.dt h3{font-size:clamp(23px,2.4vw,32px);line-height:1.3}
.dt-in>p+p{margin-top:16px}
.dt-in>p{font-size:clamp(16px,1.3vw,18px)}
.dt-hero h2{margin:14px 0 0;font-size:clamp(46px,8vw,112px);line-height:1.12;letter-spacing:-.03em}
.dt .dt-lead{margin-top:clamp(18px,3vh,30px)}
.dt-light{background:#E9E2D3;color:#17150F}
.dt-warm{background:#C7693F;color:#150E08}
.dt-ing{margin-top:clamp(36px,6vh,60px)}
.dt-ing figure{position:relative;aspect-ratio:16/10;overflow:hidden}
.dt-ing figcaption{position:absolute;left:12px;bottom:10px;color:#F1E8D8}
.dt-ing>.mono{margin-top:16px}
.dt-ing h3{margin-top:2px}
.dt-ing>p:last-child{margin-top:6px}
.dt-mins{margin-top:clamp(44px,7vh,70px);padding-top:clamp(24px,4vh,36px);border-top:1px solid currentColor}
.dt-mins .big{display:flex;gap:.45em;font-size:clamp(64px,11vw,130px);line-height:1;margin-bottom:18px}
.dt-mins p{margin-top:6px}
.dt-steps{list-style:none;border-top:1px solid currentColor}
.dt-steps li{display:grid;grid-template-columns:3em minmax(0,1fr);padding:22px 0;border-bottom:1px solid rgba(241,232,216,.26)}
.dt-steps .mono{padding-top:9px}
.dt-steps p{margin-top:4px}
.dt-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.dt-pair h3{margin:6px 0 10px}
.dt-sheet{grid-column:auto}
.dt-faq{border-top:1px solid currentColor}
.dt-faq dt{padding-top:20px;font-weight:600}
.dt-faq dd{padding:6px 0 20px;border-bottom:1px solid rgba(23,21,15,.28)}
.dt-cta{text-align:center}
.dt-cta h2{margin-bottom:8px}
.dt-cta .shop-btn{width:100%;display:flex;align-items:center;justify-content:center;max-width:420px;margin:clamp(22px,3vh,32px) auto 0}
@media (max-width:760px){.dt-pair{grid-template-columns:1fr}}

/* 상세 정보 깊은 구성 */
.dt[id]{scroll-margin-top:60px}
.dt-en{opacity:.72;margin-bottom:10px}
.dt .more{margin-top:20px}
.dt-in>p.dt-en,.dt-in>p.mono{font-size:12px}
.dt-ing>p:not(.dt-en){margin-top:10px}
.dt-ing>p.dt-en{margin:16px 0 2px}
.dt-tbl{display:block;border-top:1px solid currentColor;margin-top:6px}
.dt-tbl>span{display:grid;grid-template-columns:6em minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid rgba(21,14,8,.32);font-size:15px}
.dt-points{list-style:none;margin-top:clamp(24px,4vh,36px);border-top:1px solid currentColor}
.dt-points li{padding:20px 0;border-bottom:1px solid rgba(241,232,216,.26)}
.dt-points p{margin-top:4px}
.dt-light .dt-steps{margin-top:clamp(24px,4vh,36px)}
.dt-light .dt-steps li{border-bottom-color:rgba(23,21,15,.28)}
.dt-pair{margin-top:clamp(24px,4vh,36px)}
.dt-pair>div{padding-top:16px;border-top:1px solid currentColor}
.dt-pair .more{margin-top:14px}
.dt .dt-note{margin-top:clamp(24px,4vh,36px);opacity:.8;font-size:15px}
.dt-sheet{margin-top:clamp(24px,4vh,36px)}
.dt-sub{margin-top:clamp(40px,6vh,60px)}
.dt-read{list-style:none;counter-reset:r;margin-top:14px;border-top:1px solid currentColor}
.dt-read li{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid rgba(23,21,15,.28);font-size:15px}
.dt-faq dd{border-bottom-color:currentColor}
#faq .dt-faq dd{border-bottom-color:rgba(241,232,216,.26)}
@media (max-width:760px){.dt-read li{grid-template-columns:1fr;gap:2px}.shop-tabs{justify-content:space-between;gap:10px}}