/* OFFLOG 모바일 (KR) — html.m 일 때만 적용. 섹션 안쪽은 390 기준 좌표 + zoom(--u) */
html.m{--u:1}
html.m .ui,html.m #cursor,html.m .wrap,html.m .kw-fixed,html.m .pin-fixed{display:none!important}
html.m body{overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
html.m-main body{background:#221B17}
html.m-product body{background:#E6E1D4}

/* 섹션 */
.mpage{position:relative;width:100%}
.ms{position:relative;width:100%;height:calc(var(--u) * var(--h) * 1px);overflow:hidden}
.mz{position:absolute;left:0;top:0;width:390px;zoom:var(--u)}
.mbg{position:absolute;left:0;top:0;width:390px;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
html.m .t{position:absolute}
html.m .mhit{z-index:4}
html.m .foot-lang .in{font-size:inherit;color:rgba(230,225,212,.4)}
html.m .foot-lang button{font-size:inherit}

/* 헤더 */
.mh{position:fixed;left:0;top:0;width:100%;z-index:60;color:#E6E1D4;transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.mh.hide{opacity:0;transform:translateY(-10px);pointer-events:none}
.mh-in{position:relative;width:390px;height:58px;zoom:var(--u)}
.mbar{position:absolute;left:0;top:0;width:390px;height:26px;background:#594B42}
.mh .mbar .t{color:#E6E1D4}
.mlogo{position:absolute;left:20px;top:36px;width:67px;height:12px;display:block;color:inherit;transition:color .35s}
.mlogo svg{display:block;width:67px;height:12.2px}
.mnav{position:absolute;right:20px;top:34px;height:16px;display:flex;align-items:center;gap:12px}
.mnav-a{font-family:"Taviraj",serif;font-weight:300;font-size:8px;line-height:16px;color:inherit;text-decoration:none;transition:color .35s,opacity .3s}
.mlang{height:16px;padding:0;display:flex;align-items:center;gap:3px;font-family:"Taviraj",serif;font-weight:300;font-size:8px;line-height:1;color:inherit;transition:color .35s}
.mlang svg{width:4px;height:3.2px}
.mshop{width:44px;height:16px;display:grid;place-items:center;border:.5px solid currentColor;font-family:"Taviraj",serif;font-weight:300;font-size:8px;line-height:1;color:inherit;text-decoration:none;transition:color .35s}
.mnav a:active,.mlang:active{opacity:.6}
.mh.light{color:#221B17}
.mlang-panel{position:absolute;left:282px;top:54px;width:78px;background:#221B17;opacity:0;transform:translateY(-4px);pointer-events:none;transition:.25s cubic-bezier(.22,.61,.36,1)}
.mh.lang-open .mlang-panel{opacity:1;transform:none;pointer-events:auto}
.mlang-panel button{display:block;width:100%;height:22px;text-align:left;padding:0 8px;font-family:"Taviraj","Noto Sans KR",serif;font-weight:300;font-size:8px;color:rgba(230,225,212,.6)}
.mlang-panel button[aria-current="true"]{color:#E6E1D4}
/* 띠배너 닫기: 띠배너가 위로 빠지고 메뉴 바가 올라감 */
.mbar-x{position:absolute;left:360px;top:5px;width:16px;height:16px;padding:0;display:grid;place-items:center;color:#E6E1D4;z-index:2}
.mbar-x svg{width:7px;height:7px;display:block}
.mh-in{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
body.no-bar .mh-in{transform:translateY(-26px)}

/* 오른쪽 OFF→LOG 인디케이터 (웹의 1/2 크기) · TOP 버튼 */
.mside{position:fixed;right:0;top:50%;z-index:55;transform:translateY(-50%);pointer-events:none;transition:opacity .7s}
.mside-in{position:relative;width:16px;height:207px;zoom:var(--u)}
.mind{position:absolute;right:8px;top:0;width:5px;height:207px;color:#E6E1D4;pointer-events:auto;touch-action:none;transition:color .35s}
.mside.light .mind{color:#221B17}
.mind::before{content:"";position:absolute;left:-10px;right:-8px;top:15px;bottom:15px}
.mind .w{position:absolute;left:0;width:5px;font-family:"Taviraj",serif;font-weight:300;font-size:5px;line-height:5px;letter-spacing:.08em;writing-mode:vertical-rl;display:flex;align-items:center;justify-content:center}
.mind .off{top:0;height:12px;cursor:pointer}
.mind .log{bottom:0;height:13.5px}
.mind .track{position:absolute;left:2.25px;top:17.5px;width:.5px;height:170px;background:currentColor;opacity:.3}
.mind .fill{position:absolute;left:2.25px;top:17.5px;width:.5px;height:170px;background:currentColor;transform-origin:0 0;transform:scaleY(0)}
.mh.hide~.mside{opacity:0}
.mtotop{position:fixed;right:calc(var(--u) * 12px);bottom:calc(var(--u) * 20px + env(safe-area-inset-bottom,0px));z-index:55;width:calc(var(--u) * 28px);height:calc(var(--u) * 28px);border-radius:50%;background:rgba(89,75,66,.72);display:grid;place-items:center;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .5s,transform .5s,background .3s}
.mtotop.show{opacity:1;transform:none;pointer-events:auto}
.mtotop:active{background:#594B42}
.mtotop svg{width:calc(var(--u) * 9.3px);height:calc(var(--u) * 6.2px);display:block}

/* 랜딩 */
.mslides{position:absolute;left:0;top:0;width:390px;height:780px;overflow:hidden;background:#100904}
.ms#hero{background:#0B0605}
.mslides img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.07);transition:opacity 1.2s cubic-bezier(.4,0,.2,1),transform 6.5s cubic-bezier(.22,.61,.36,1)}
.mslides img.on{opacity:1;transform:scale(1)}
.mslides img.out{opacity:0;transform:scale(1)}
.mhero-mark{position:absolute;text-align:center;pointer-events:none;z-index:2}
.mhero-mark svg{display:block;width:168.3px;height:30.6px;margin:0 auto}
.mhero-mark p{margin:9px 0 0;font-family:"General Sans","Helvetica Neue",Arial,sans-serif;font-weight:300;font-size:6.4px;color:#E6E1D4;white-space:nowrap}

/* 웹과 동일: 섹션 배경·영상은 화면에 들어올 때 페이드인 */
.js .ms .mbg{opacity:0;transition:opacity .8s ease}
.js .ms.bg-on .mbg{opacity:1}
.js .ms .mvbox{opacity:0;transition:opacity .8s ease}
.js .ms.bg-on .mvbox{opacity:1}
@media (prefers-reduced-motion:reduce){.js .ms .mbg,.js .ms .mvbox{opacity:1}}
/* 그라인더 연결선 · 점 · 화살표 */
.gr-line,.gr-dot{position:absolute;display:block;background:#E6E1D4;opacity:0;transition:opacity .65s ease,transform .75s cubic-bezier(.22,.61,.36,1)}
.gr-dot{border-radius:50%;transform:scale(.3)}
.gr-line{transform:scaleX(0);transform-origin:100% 50%}
.gr-line[data-from="l"]{transform-origin:0 50%}
.gr-line.on,.gr-dot.on{opacity:1;transform:none}
html.m .arc{position:absolute;overflow:visible;pointer-events:none}
html.m .arc-line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.45,.05,.25,1)}
html.m .arc-head{opacity:0;transition:opacity .3s ease 1.65s}
html.m .arc.on .arc-line{stroke-dashoffset:0}
html.m .arc.on .arc-head{opacity:1}
/* 터치 피드백 (웹의 마우스오버 대신) */
html.m .mhit:active{background:rgba(128,118,108,.12)}
html.m .mth:active{opacity:.85}

/* 첫 화면 · 브랜드: 글자 먼저, 사진은 나중에 페이드인 */
.mslides{transition:opacity 2s cubic-bezier(.4,0,.2,1)}
.mslides.pre{opacity:0}
.mbrand{background:#0B0202}
.js .ms .mbg.late{opacity:0;transition:opacity 1.4s cubic-bezier(.4,0,.2,1)}
.js .ms.late-on .mbg.late{opacity:1}
@media (prefers-reduced-motion:reduce){.js .mbg.late{opacity:1}}

/* 고정 사진 전환 */
.mpin{height:calc(var(--n) * 100vh);height:calc(var(--n) * 100svh);overflow:visible;background:#100904}
.mpin-st{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#100904}
.mpin-st img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s cubic-bezier(.4,0,.2,1)}
.mpin-st img.on{opacity:1}

/* 키워드 */
.mkw{height:calc(var(--u) * var(--h) * 1px + 100vh);height:calc(var(--u) * var(--h) * 1px + 100svh);overflow:visible;background:#231B18}
.mkw-st{position:sticky;top:max(0px,calc(50vh - var(--u) * var(--h) * .5px));top:max(0px,calc(50svh - var(--u) * var(--h) * .5px));height:calc(var(--u) * var(--h) * 1px);overflow:hidden}
.mkw-st .kwi{transition:transform .9s cubic-bezier(.22,.61,.36,1) var(--d,0s),opacity .6s ease var(--d,0s)}
.mkw-st.kw-closed .kwi{transform:translateY(var(--dy));opacity:0;transition-delay:0s;transition-duration:.55s}
.mkw-st.kw-open .kwi{opacity:1;transform:none}
.mkw-jar{position:absolute;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.mkw-st.kw-in.kw-closed .mkw-jar{opacity:1;transform:none;transition:opacity .9s ease,transform 1.1s cubic-bezier(.22,.61,.36,1)}
.mkw-st.kw-open .mkw-jar{opacity:0;transform:scale(.9)}

/* 영상 */
.mvbox{z-index:0}

/* 갤러리 */
html.m .gal-main{z-index:1}
html.m .mth{outline:.5px solid transparent;outline-offset:-.5px;opacity:.6;transition:opacity .3s,outline-color .3s}
html.m .mth.on{outline-color:#221B17;opacity:1}

/* 공감 카드 흐름 */
.why-row{position:absolute;overflow:hidden}
.why-track{position:absolute;left:0;top:0;height:61px;width:1446px;transform:translateX(-41px);animation:whyFlow 26s linear infinite;will-change:transform}
.why-track img{position:absolute;top:0;width:472px;height:61px;display:block}
@keyframes whyFlow{from{transform:translateX(-41px)}to{transform:translateX(-523px)}}
@media (prefers-reduced-motion:reduce){.why-track{animation:none}}

/* 그라인더 라벨 */
html.m .chip{position:absolute;display:block;opacity:0;transform:translateY(6px);transition:opacity .65s ease,transform .75s cubic-bezier(.22,.61,.36,1)}
html.m .chip.on{opacity:1;transform:none}

/* L·O·G */
html.m .log-i{position:absolute;display:block}

/* 3 Formula 카드 */
.fc-stage{position:absolute;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.fc-card{position:absolute;padding:0;display:block;transition:left .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1),filter .65s ease,box-shadow .65s ease;transition:left .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1),opacity .65s ease;transform:scale(.96);opacity:.5}
.fc-card.on{transform:none;opacity:1}
.fc-card img{display:block;width:186px;height:282px;pointer-events:none;-webkit-user-drag:none}

/* 나이트 루틴 스텝 */
.rt-scroll{position:absolute;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
.rt-scroll::-webkit-scrollbar{display:none}
.rt-track{display:flex;gap:31.7px;padding:0 28.35px;width:max-content;height:344px}
.rt-track::after{content:"";flex:0 0 .5px}
.rt-card{flex:0 0 333.3px;height:344px;scroll-snap-align:center}
.rt-card img{display:block;width:333.3px;height:344px;-webkit-user-drag:none}
.rt-track.nudge{animation:rtNudge 1.3s cubic-bezier(.45,.05,.25,1)}
@keyframes rtNudge{0%{transform:none}40%{transform:translateX(-56px)}100%{transform:none}}

/* 제품 정보 아코디언 */
.macc{position:absolute;border-top:.5px solid rgba(89,75,66,.35)}
.macc-item{border-bottom:.5px solid rgba(89,75,66,.35)}
.macc-head{display:flex;align-items:center;justify-content:space-between;width:100%;height:52.8px;padding:0;text-align:left;font-family:"Noto Sans KR",sans-serif;font-weight:500;font-size:10px;color:#221B17}
.macc-head i{position:relative;width:8px;height:8px;flex:none;margin-right:2px}
.macc-head i::before,.macc-head i::after{content:"";position:absolute;left:0;top:3.75px;width:8px;height:.5px;background:#221B17;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.macc-head i::after{transform:rotate(90deg)}
.macc-item.open .macc-head i::after{transform:rotate(0)}
.macc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.22,.61,.36,1)}
.macc-item.open .macc-panel{grid-template-rows:1fr}
.macc-inner{overflow:hidden;min-height:0}
.macc-inner p{margin:0;white-space:pre-line;font-family:"Noto Sans KR",sans-serif;font-weight:300;font-size:8px;line-height:1.75;color:#594B42;word-break:keep-all}
.macc-inner>p{padding-bottom:18px}
.macc-row{display:grid;grid-template-columns:74px 1fr;gap:10px;padding-bottom:10px}
.macc-row:last-child{padding-bottom:18px}
.macc-row b{font-family:"Noto Sans KR",sans-serif;font-weight:500;font-size:8px;line-height:1.75;color:#221B17}
html.m #p-info{background:#E7E1D5}
html.m.js .ms.seen .t.boxed .in{opacity:1}

/* 성능: 화면 밖 일반 섹션은 그리기를 건너뜀 (고정 구간·키워드 제외) */
.ms:not(.mpin):not(.mkw){content-visibility:auto;contain-intrinsic-size:auto calc(var(--u) * var(--h) * 1px)}
.mslides img,.mpin-st img,.gal-main img{backface-visibility:hidden}