@charset "utf-8";

/* ==========================================================================
   화면 높이 기준값
   모바일 브라우저는 스크롤에 따라 주소창이 접히고 펴지면서 보이는 높이가
   계속 바뀐다. 100vh 로 두면 그때마다 섹션 높이가 따라 움직여서 화면이
   들썩이므로, 한 번 잰 값을 --vh 에 고정해 두고 그것만 쓴다.
   JS 가 꺼져 있거나 아직 안 돌았을 때를 대비해 svh > vh 순으로 받친다.
   ========================================================================== */
:root {--vh:1vh;}
@supports (height:1svh) {:root {--vh:1svh;}}

/* ==========================================================================
   BAR JUNGLE - layout.css
   ========================================================================== */

/* Utility S */
.font {font-family:"Anton", "Apple SD Gothic Neo", sans-serif; font-weight:400; letter-spacing:0.02em;}
.font2 {font-family:"Black Han Sans", "Apple SD Gothic Neo", sans-serif; font-weight:400;}
html[lang="ja"] .font2 {font-family:"Dela Gothic One", "Hiragino Sans", "Yu Gothic", sans-serif;}
.font3 {font-family:"Nanum Pen Script", cursive; font-weight:400;}

.cm {color:#1f4a35 !important;}
.cs {color:#e8b13a !important;}
.cr {color:#d9622b !important;}
.cp {color:#c94f5c !important;}
.cl {color:#6aa85a !important;}
.cw {color:#f7efdd !important;}
.cb {color:#241f18 !important;}
.cg {color:#241f18 !important; opacity:0.45;}
.ch {color:#241f18 !important; opacity:0.72;}

.thin {font-weight:100 !important;}
.light {font-weight:300 !important;}
.regular {font-weight:400 !important;}
.medium {font-weight:500 !important;}
.semibold {font-weight:600 !important;}
.bold {font-weight:700 !important;}
.black {font-weight:900 !important;}

.title {font-size:30px; line-height:40px; letter-spacing:-0.02em;}
.title.t1 {font-size:40px; line-height:52px;}
.title.t2 {font-size:clamp(34px, 3.6458vw, 70px); line-height:1.28;}
.title.t3 {font-size:clamp(60px, 5.7292vw, 110px); line-height:1.1;}

.txt {font-size:18px; line-height:32px; letter-spacing:-0.01em;}
.txt.huge {font-size:25px; line-height:42px;}
.txt.big {font-size:20px; line-height:34px;}
.txt.normal {font-size:16px; line-height:28px;}
.txt.small {font-size:14px; line-height:26px;}
.txt.mini {font-size:13px; line-height:24px;}

.fade {opacity:0; transition:opacity 0.9s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1);}
.fade.f_up {transform:translateY(46px);}
.fade.f_left {transform:translateX(46px);}
.fade.f_right {transform:translateX(-46px);}
.fade.f_delay03 {transition-delay:0.15s !important;}
.fade.f_delay06 {transition-delay:0.3s !important;}
.fade.f_delay09 {transition-delay:0.45s !important;}
.fade.f_delay12 {transition-delay:0.6s !important;}
.fade.f_delay15 {transition-delay:0.75s !important;}
.sec.on .fade {opacity:1; transform:none;}
/* Utility E */

/* Leaf Color S : 종이컷 잎사귀 톤 */
.lfc0 {fill:#0f3221;}
.lfc1 {fill:#17422a;}
.lfc2 {fill:#1f5535;}
.lfc3 {fill:#2f7346;}
.lfc4 {fill:#4b9553;}
.lfc5 {fill:#6aa85a;}
/* Leaf Color E */

/* Wrap S */
html {scroll-snap-type:y proximity;}
#wrap {position:relative; width:100%; overflow-x:clip;}
.jg_shade {position:fixed; left:0; top:0; width:100%; height:100%; z-index:880; pointer-events:none; opacity:0; background:radial-gradient(ellipse at 50% 42%, rgba(10,32,20,0) 26%, rgba(10,32,20,0.34) 62%, rgba(8,26,16,0.72) 100%);}
#wrap::after {content:""; position:fixed; left:0; top:0; width:100%; height:100%; z-index:900; pointer-events:none; opacity:0.42; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='320'%3E%3Cfilter%20id='pg'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='320'%20height='320'%20filter='url(%23pg)'/%3E%3C/svg%3E"); background-size:320px 320px;}
.sec {position:relative; display:flex; flex-direction:column; justify-content:safe center; width:100%; min-height:calc(var(--vh) * 100); padding:132px 0 108px; scroll-snap-align:start; z-index:2;}
.sec > div {position:relative; width:1400px; max-width:88%; margin:0 auto; z-index:3;}
.eyebrow, .a_eyebrow, .s_eyebrow, .m_eyebrow, .g_eyebrow, .v_eyebrow {display:flex; align-items:center; gap:10px; font-size:15px; letter-spacing:0.06em; color:#241f18; opacity:0.6; margin-bottom:22px;}
.a_eyebrow .font, .s_eyebrow .font, .m_eyebrow .font, .g_eyebrow .font, .v_eyebrow .font {font-size:19px; letter-spacing:0.12em;}
.a_eyebrow::before, .s_eyebrow::before, .m_eyebrow::before, .g_eyebrow::before, .v_eyebrow::before {content:""; display:block; width:30px; height:2px; background-color:currentColor;}
/* Wrap E */

/* Torn Paper Edge S : 찢어진 종이 경계 (윗 섹션 색을 물고 내려옴) */
.torn::before {content:""; position:absolute; left:0; top:-1px; width:100%; height:26px; z-index:6; background-color:#efe4cf; -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2026'%20width='120'%20height='26'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0%20L120,0%20L120,13%20C110,22%20100,4%2090,13%20C80,22%2070,4%2060,13%20C50,22%2040,4%2030,13%20C20,22%2010,4%200,13%20Z'%20fill='%23000'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2026'%20width='120'%20height='26'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0%20L120,0%20L120,13%20C110,22%20100,4%2090,13%20C80,22%2070,4%2060,13%20C50,22%2040,4%2030,13%20C20,22%2010,4%200,13%20Z'%20fill='%23000'/%3E%3C/svg%3E"); -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x; -webkit-mask-size:120px 26px; mask-size:120px 26px;}
#about.torn::before {background-color:#0d2317;}
#signature.torn::before {background-color:#f2e9d8;}
#menu.torn::before {background-color:#e5d5b6;}
#moment.torn::before {background-color:#1f4a35;}
#visit.torn::before {background-color:#17422a;}
#footer.torn::before {background-color:#0d2c1c;}
/* Torn Paper Edge E */

/* Header S */
#header {position:fixed; left:0; top:0; width:100%; height:96px; z-index:800; display:flex; align-items:center; justify-content:space-between; padding:0 60px; transition:0.4s;}
#header::before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-color:#efe4cf; border-bottom:2px solid #241f18; opacity:0; transform:translateY(-100%); transition:0.45s cubic-bezier(0.16,1,0.3,1); z-index:-1;}
#header.fix {height:76px;}
#header.fix::before {opacity:1; transform:translateY(0);}
/* 로고와 오른쪽 유틸에 같은 폭을 줘, 가운데 메뉴가 화면 정중앙에 오게 한다.
   둘의 실제 폭이 달라(로고 93px, 유틸 250px) 그냥 space-between 으로는
   메뉴가 왼쪽으로 밀린다. */
.h_logo {position:relative; z-index:2; flex:1 1 0;}
.h_logo a {display:block; line-height:0;}
.h_gnb {position:relative; z-index:2;}
.hg_list {display:flex; align-items:center; gap:38px;}
.hgl_item a {position:relative; display:block; font-size:16px; color:#f7efdd; opacity:0.85; transition:0.3s;}
.hgl_item a::after {content:""; position:absolute; left:0; bottom:-7px; width:0; height:2px; background-color:#e8b13a; transition:0.35s cubic-bezier(0.16,1,0.3,1);}
.hgl_item a:hover {opacity:1;}
.hgl_item a:hover::after {width:100%;}
#header.fix .hgl_item a {color:#241f18;}
.h_book {position:relative; z-index:2; display:flex; align-items:center; gap:8px; height:46px; padding:0 24px; border:2px solid #f7efdd; border-radius:999px; font-size:15px; color:#f7efdd; transition:0.35s;}
.h_book i {display:block; width:7px; height:7px; border-radius:50%; background-color:#e8b13a; transition:0.35s;}
.h_book:hover {background-color:#e8b13a; border-color:#e8b13a; color:#241f18;}
.h_book:hover i {background-color:#241f18;}
#header.fix .h_book {border-color:#1f4a35; color:#1f4a35;}
#header.fix .h_book:hover {background-color:#1f4a35; border-color:#1f4a35; color:#f7efdd;}
#header.fix .h_book:hover i {background-color:#e8b13a;}
.h_toggle {display:none; position:relative; z-index:2; width:44px; height:44px; padding:11px 8px; flex-direction:column; justify-content:space-between;}
.h_toggle i {display:block; width:100%; height:2px; background-color:#f7efdd; transition:0.35s;}
#header.fix .h_toggle i {background-color:#241f18;}
#header.open .h_toggle i:nth-child(1) {transform:translateY(9px) rotate(45deg);}
#header.open .h_toggle i:nth-child(2) {opacity:0;}
#header.open .h_toggle i:nth-child(3) {transform:translateY(-9px) rotate(-45deg);}
/* Header E */

/* Jungle Veil S : 섹션마다 풀숲을 헤치고 들어감
   잎을 큰 SVG 하나에 몰아넣지 않고 개별 배치 → 박스에 잘린 단면이 생기지 않음
   --lsc 잎 크기 배율 / --vshift 다 열렸을 때 밀려나는 거리 */
.sec > .sv_veil {position:absolute; left:0; top:0; width:100%; max-width:none; height:calc(var(--vh) * 100); margin:0; z-index:5; overflow:hidden; pointer-events:none; --lsc:1; --vshift:-135%;}
.svv_side {position:absolute; top:0; width:58%; height:100%;}
.sv_veil.moving .svv_side {will-change:transform;}
.svv_l {left:-4%; transform:translateX(calc(var(--p,1) * var(--vshift)));}
.svv_r {right:-4%; top:-9%; transform:scaleX(-1) translateX(calc(var(--p,1) * var(--vshift)));}
.svl {position:absolute; height:auto; overflow:visible; width:calc(var(--lw,20) * var(--lsc) * 1vw); fill:var(--v1,#1a4a30);}
.svl.b {fill:var(--v2,#2f7346);}
.svl.n1 {left:-24%; top:-18%; --lw:23.1; transform:rotate(112deg);}
.svl.n2 {left:10%; top:-16%; --lw:22.6; transform:rotate(74deg);}
.svl.n3 {left:44%; top:-10%; --lw:20.7; transform:rotate(96deg);}
.svl.n4 {left:-20%; top:12%; --lw:23.9; transform:rotate(132deg);}
.svl.n5 {left:14%; top:20%; --lw:21.9; transform:rotate(80deg);}
.svl.n6 {left:48%; top:26%; --lw:21.4; transform:rotate(108deg);}
.svl.n7 {left:-22%; top:42%; --lw:23.1; transform:rotate(118deg);}
.svl.n8 {left:12%; top:50%; --lw:22.6; transform:rotate(70deg);}
.svl.n9 {left:46%; top:56%; --lw:20.7; transform:rotate(100deg);}
.svl.n10 {left:-18%; top:70%; --lw:23.9; transform:rotate(140deg);}
.svl.n11 {left:14%; top:78%; --lw:21.9; transform:rotate(84deg);}
.svl.n12 {left:46%; top:84%; --lw:21.4; transform:rotate(104deg);}
.svl.n19 {left:28%; top:2%; --lw:21.3; transform:rotate(148deg);}
.svl.n20 {left:-4%; top:32%; --lw:23.2; transform:rotate(92deg);}
.svl.n21 {left:30%; top:64%; --lw:21.3; transform:rotate(144deg);}
.svl.n22 {left:22%; top:36%; --lw:20.7; transform:rotate(122deg);}
.svl.n13 {left:-6%; top:6%; --lw:24.0; transform:rotate(122deg);}
.svl.n14 {left:28%; top:16%; --lw:15.2; transform:rotate(88deg);}
.svl.n15 {left:0%; top:40%; --lw:24.0; transform:rotate(134deg);}
.svl.n16 {left:32%; top:54%; --lw:15.2; transform:rotate(78deg);}
.svl.n17 {left:-4%; top:68%; --lw:24.0; transform:rotate(118deg);}
.svl.n18 {left:30%; top:86%; --lw:15.2; transform:rotate(100deg);}
#about {--v1:#2f7346; --v2:#4b9553;}
#signature {--v1:#235b39; --v2:#3f8a4c;}
#menu {--v1:#1a4a30; --v2:#2f7346;}
#moment {--v1:#123b26; --v2:#235b39;}
#visit {--v1:#0a2416; --v2:#17422a;}
/* Jungle Veil E */

/* Depth Nav S : 지금 정글의 몇 번째 층인지 */
#depth {position:fixed; right:36px; top:50%; transform:translateY(-50%); z-index:820;}
.d_list {display:flex; flex-direction:column; gap:2px;}
.dl_item a {position:relative; display:flex; align-items:center; justify-content:flex-end; gap:10px; height:34px; padding-right:22px; color:#f7efdd; transition:0.3s;}
.dl_item em {font-size:12px; letter-spacing:0.1em; opacity:0; transform:translateX(8px); transition:0.35s cubic-bezier(0.16,1,0.3,1);}
.dl_item span {font-size:12px; letter-spacing:0.02em; opacity:0; transform:translateX(8px); transition:0.35s cubic-bezier(0.16,1,0.3,1);}
.dl_item i {position:absolute; right:0; top:50%; width:12px; height:2px; margin-top:-1px; background-color:currentColor; opacity:0.4; transition:0.35s cubic-bezier(0.16,1,0.3,1);}
.dl_item a:hover em, .dl_item a:hover span {opacity:0.75; transform:translateX(0);}
.dl_item.on em {opacity:1; transform:translateX(0); color:#e8b13a;}
.dl_item.on span {opacity:0; transform:translateX(8px);}
.dl_item.on i {width:26px; opacity:1; background-color:#e8b13a;}
#depth.light .dl_item a {color:#241f18;}
/* Depth Nav E */

/* Hero S */
#hero {position:relative; width:100%; height:calc(var(--vh) * 100); min-height:660px; overflow:hidden; background-color:#0d2317; scroll-snap-align:start; z-index:1;}
.he_sky {position:absolute; left:0; top:0; width:100%; height:100%; background:radial-gradient(ellipse at 50% 60%, #4a7a4e 0%, #275034 38%, #0d2317 100%);}
.he_sky::after {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:radial-gradient(ellipse at 50% 44%, rgba(232,177,58,0.22) 0%, rgba(232,177,58,0) 46%);}
.he_far {position:absolute; left:0; bottom:0; width:100%; height:82%; opacity:0; transition:opacity 1.5s ease 0.4s;}
#hero.on .he_far {opacity:1;}

.he_animals {position:absolute; left:0; bottom:0; width:100%; height:100%; z-index:7;}
.hea_item {position:absolute; opacity:0; transform:translateY(70px) scale(0.46); transition:opacity 0.6s ease, transform 0.95s cubic-bezier(0.22,1.35,0.36,1);}
.hea_item svg {display:block; width:100%; height:auto; filter:drop-shadow(0 22px 26px rgba(0,0,0,0.4)); animation:a_bob 5s ease-in-out infinite; transform-origin:50% 100%;}
.hea_item:hover svg {animation-duration:1.1s;}
#hero.on .hea_item {opacity:1; transform:translateY(0) scale(1);}
#hero.on .hea_item.pop {transform:translateY(0) scale(1.12) rotate(-4deg); transition:transform 0.34s cubic-bezier(0.22,1.5,0.36,1) 0s;}
/* 동물과 잔을 번갈아 세워 서로 겹치지 않게 배치한다.
   폭은 --w 하나로 두고 margin-left 를 거기서 계산해, 화면이 넓어져도 중심이 틀어지지 않는다. */
.hea_item.snake  {--w:min(12vw,192px);  left:9%;    bottom:33%; z-index:3; transition-delay:1.82s;}
.hea_item.lion   {--w:min(15vw,240px);  left:27.5%; bottom:20%; z-index:4; transition-delay:1.55s;}
.hea_item.tiger  {--w:min(20vw,320px);  left:50%;   bottom:10%; z-index:5; transition-delay:1.35s;}
.hea_item.monkey {--w:min(13vw,208px);  left:71.5%; bottom:21%; z-index:4; transition-delay:1.68s;}
.hea_item.toucan {--w:min(11vw,176px);  left:88.5%; bottom:36%; z-index:3; transition-delay:1.94s;}
.hea_item {width:var(--w); margin-left:calc(var(--w) / -2);}
.hea_item.snake svg  {animation-duration:6.4s; animation-delay:0.2s;}
.hea_item.lion svg   {animation-duration:5.8s; animation-delay:0.4s;}
.hea_item.monkey svg {animation-duration:4.4s; animation-delay:0.8s;}
.hea_item.toucan svg {animation-duration:5.2s; animation-delay:1.1s;}
@keyframes a_bob {0%, 100% {transform:translateY(0) rotate(0deg);} 50% {transform:translateY(-12px) rotate(1.6deg);}}

.he_title {position:absolute; left:50%; top:12%; width:100%; transform:translateX(-50%); text-align:center; z-index:9; pointer-events:none;}
.het_eyebrow {display:flex; align-items:center; justify-content:center; gap:16px; font-size:14px; letter-spacing:0.34em; color:#e8b13a; opacity:0; transform:translateY(24px); transition:0.9s cubic-bezier(0.16,1,0.3,1) 1.5s;}
.het_eyebrow i {display:block; width:44px; height:1px; background-color:rgba(232,177,58,0.6);}
.het_logo {margin-top:13px; opacity:0; transform:translateY(34px) scale(0.94); transition:1s cubic-bezier(0.16,1,0.3,1) 1.62s;}
/* 가로뿐 아니라 세로에도 상한을 둔다. 노트북처럼 납작한 화면에서 로고가 세로를 다 먹고 동물과 부딪히던 문제 */
.het_logo img {display:block; width:min(34vw, 460px, calc(var(--vh) * 50)); height:auto; margin:0 auto; filter:drop-shadow(0 16px 36px rgba(0,0,0,0.45));}
.het_sub {margin-top:18px; font-size:clamp(15px, 1.0417vw, 20px); line-height:1.8; color:#f7efdd; opacity:0; transform:translateY(24px); transition:0.9s cubic-bezier(0.16,1,0.3,1) 1.82s;}
#hero.on .het_eyebrow, #hero.on .het_sub {opacity:0.9; transform:translateY(0);}
#hero.on .het_logo {opacity:1; transform:translateY(0) scale(1);}

.he_bush {position:absolute; left:0; top:0; width:100%; height:100%; z-index:6;}
/* overflow:visible 가 핵심이다.
   수풀 패널은 양옆으로 밀려나며 갈라지는데, 기본값(hidden)이면 SVG 가 제 박스
   경계에서 내용을 잘라 낸다. 패널이 기울어 있어서 그 경계가 화면 한가운데
   비스듬한 직선으로 드러나고, 잎이 칼로 벤 것처럼 보였다.
   밖으로 나가는 잎은 #hero 의 overflow:hidden 이 잡아 준다. */
.heb_leaf {position:absolute; bottom:-2%; height:114%; overflow:visible; transition:transform 2.1s cubic-bezier(0.62,0.02,0.2,1) 0.3s;}
.heb_l1 {left:-7%; width:66%; transform-origin:0% 100%;}
.heb_r1 {right:-7%; width:66%; transform-origin:100% 100%;}
.heb_l2 {left:-5%; width:56%; transform-origin:0% 100%; transition-delay:0.18s;}
.heb_r2 {right:-5%; width:56%; transform-origin:100% 100%; transition-delay:0.18s;}
#hero.on .heb_l1 {transform:translateX(-58%) rotate(-9deg);}
#hero.on .heb_r1 {transform:translateX(58%) rotate(9deg);}
#hero.on .heb_l2 {transform:translateX(-31%) rotate(-4.5deg);}
#hero.on .heb_r2 {transform:translateX(31%) rotate(4.5deg);}

.heb_eyes {position:absolute; left:0; top:0; width:100%; height:100%; z-index:2; transition:opacity 0.55s ease;}
#hero.on .heb_eyes {opacity:0;}
.hebe_pair {position:absolute; display:block; width:58px; height:12px;}
.hebe_pair::before, .hebe_pair::after {content:""; position:absolute; top:0; width:12px; height:12px; border-radius:50%; background-color:#e8b13a; box-shadow:0 0 18px 6px rgba(232,177,58,0.55); animation:e_blink 4.2s ease-in-out infinite;}
.hebe_pair::before {left:0;}
.hebe_pair::after {right:0;}
.hebe_pair.p1 {left:37%; top:44%;}
.hebe_pair.p2 {left:57%; top:36%; transform:scale(0.8);}
.hebe_pair.p2::before, .hebe_pair.p2::after {animation-delay:0.9s; background-color:#f0e3b4; box-shadow:0 0 18px 6px rgba(240,227,180,0.45);}
.hebe_pair.p3 {left:45%; top:63%; transform:scale(1.15);}
.hebe_pair.p3::before, .hebe_pair.p3::after {animation-delay:1.8s;}
.hebe_pair.p4 {left:62%; top:56%; transform:scale(0.7);}
.hebe_pair.p4::before, .hebe_pair.p4::after {animation-delay:2.6s; background-color:#a9c95d; box-shadow:0 0 18px 6px rgba(169,201,93,0.45);}
@keyframes e_blink {0%, 90%, 100% {transform:scaleY(1);} 94% {transform:scaleY(0.08);}}

.he_front {position:absolute; left:-2%; bottom:-4%; width:104%; height:27%; z-index:8; transform-origin:50% 100%; animation:l_sway 9s ease-in-out infinite; filter:drop-shadow(0 -8px 20px rgba(0,0,0,0.25));}
@keyframes l_sway {0%, 100% {transform:rotate(-0.7deg);} 50% {transform:rotate(0.7deg);}}

.he_scroll {position:absolute; left:50%; bottom:38px; z-index:10; display:flex; flex-direction:column; align-items:center; gap:12px; margin-left:-40px; width:80px; font-size:12px; letter-spacing:0.28em; text-indent:0.28em; color:#f7efdd; opacity:0; transition:opacity 0.8s ease 2.4s;}
.he_scroll i {display:block; width:1px; height:52px; background:linear-gradient(to bottom, rgba(247,239,221,0.9), rgba(247,239,221,0)); animation:s_drop 2.2s ease-in-out infinite;}
#hero.on .he_scroll {opacity:0.85;}
@keyframes s_drop {0% {transform:scaleY(0); transform-origin:50% 0;} 55% {transform:scaleY(1); transform-origin:50% 0;} 56% {transform:scaleY(1); transform-origin:50% 100%;} 100% {transform:scaleY(0); transform-origin:50% 100%;}}
/* Hero E */

/* About S */
#about {background-color:#f2e9d8;}
.a_wrap {text-align:center;}
.a_deco {position:absolute; right:-60px; top:-120px; width:300px; opacity:0.14; z-index:-1;}
.a_deco svg {width:100%; height:auto; overflow:visible;}	/* 어떤 경우에도 잎이 박스에 잘리지 않게 */
.a_eyebrow {justify-content:center;}
.a_eyebrow::before {display:none;}
.a_title {margin-bottom:44px;}
.a_txt {max-width:880px; margin:0 auto;}
.a_txt p + p {margin-top:26px;}
.a_point {display:flex; justify-content:center; gap:24px; margin-top:76px;}
.ap_item {flex:1; max-width:340px; padding:40px 28px; background-color:#f7efdd; border:2px solid #241f18; box-shadow:9px 9px 0 rgba(36,31,24,0.9); transition:0.35s cubic-bezier(0.16,1,0.3,1);}
.sec.on .ap_item:hover {transform:translate(-5px,-5px); box-shadow:14px 14px 0 rgba(36,31,24,0.9);}
.ap_item em {display:block; font-size:32px; margin-bottom:14px;}
.ap_item strong {display:block; font-size:21px; font-weight:700; color:#1f4a35; margin-bottom:10px;}
/* About E */

/* Signature S */
#signature {background-color:#e5d5b6;}
.s_wrap {text-align:center;}
.s_eyebrow {justify-content:center;}
.s_eyebrow::before {display:none;}
.s_title {margin-bottom:48px;}
/* 시그니처 : 한 줄 가로 슬라이드. 라이브러리 없이 네이티브 스크롤 스냅을 씀 */
.s_slider {position:relative; width:100vw; margin-left:calc(50% - 50vw);}
.s_list {display:flex; gap:22px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; scrollbar-width:none; padding:10px max(6vw, calc(50vw - 700px)) 30px; scroll-padding-left:max(6vw, calc(50vw - 700px));}
.s_list::-webkit-scrollbar {display:none;}
/* 마우스로 끌 수 있다는 걸 커서로 알린다. 터치 기기에는 커서가 없으므로 제외. */
@media (hover:hover) and (pointer:fine) {
	.s_list {cursor:grab;}
	.s_list.is_drag {cursor:grabbing;}
}
/* 끄는 동안에는 스냅과 부드러운 스크롤을 꺼 둔다.
   켜 둔 채로 scrollLeft 를 직접 쓰면 매 프레임 제자리로 되돌아간다. */
.s_list.is_drag {scroll-snap-type:none; scroll-behavior:auto; user-select:none; -webkit-user-select:none;}
.s_list.is_drag .sl_item {pointer-events:none;}
.s_list:focus-visible {outline:2px solid #1f4a35; outline-offset:4px;}
.sl_item {flex:0 0 auto; width:clamp(226px, 21vw, 282px); scroll-snap-align:start;}
.ss_nav {position:absolute; top:34%; z-index:4; width:52px; height:52px; border:2px solid #241f18; border-radius:50%; background-color:#f7efdd; box-shadow:4px 4px 0 rgba(36,31,24,0.85); transition:0.25s; cursor:pointer;}
.ss_nav i {display:block; width:11px; height:11px; margin:0 auto; border-top:2.5px solid #241f18; border-right:2.5px solid #241f18;}
.ss_prev {left:max(2vw, calc(50vw - 740px));}
.ss_next {right:max(2vw, calc(50vw - 740px));}
.ss_prev i {transform:translateX(2px) rotate(-135deg);}
.ss_next i {transform:translateX(-2px) rotate(45deg);}
.ss_nav:hover {background-color:#e8b13a;}
.ss_nav[disabled] {opacity:0; pointer-events:none;}
.sl_item {background-color:#f7efdd; border:2px solid #241f18; box-shadow:10px 10px 0 rgba(36,31,24,0.9); text-align:left; overflow:hidden; transition:opacity 0.9s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s ease;}
.sec.on .sl_item:hover {transform:translate(-6px,-6px); box-shadow:17px 17px 0 rgba(36,31,24,0.9);}
/* 4:3 자리.
   aspect-ratio 는 구형 기기에서 무시되어 높이가 0 이 된다. 지도와 같은 이유로
   어디서나 되는 padding 비율을 쓰고, 안쪽은 절대 위치로 앉힌다. */
.sli_pic {position:relative; width:100%; border-bottom:2px solid #241f18; overflow:hidden;}
.sli_pic::before {content:""; display:block; width:100%; padding-top:75%;}
.sli_pic svg {position:absolute; left:19%; top:50%; width:62%; height:auto; transform:translateY(-50%); filter:drop-shadow(0 10px 14px rgba(0,0,0,0.18));}
.sli_pic img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; display:block;}
.sli_pic.has_pic {background-color:#17422a;}
.sl_item.c1 .sli_pic {background-color:#2f7346;}
.sl_item.c2 .sli_pic {background-color:#17422a;}
.sl_item.c3 .sli_pic {background-color:#d9622b;}
.sl_item.c4 .sli_pic {background-color:#c94f5c;}
.sl_item.c5 .sli_pic {background-color:#1c7a87;}
.sl_item.c6 .sli_pic {background-color:#e8b13a;}
.sli_txt {padding:20px 18px 22px;}
.sli_txt > em {display:block; font-size:13px; letter-spacing:0.16em; color:#d9622b; margin-bottom:9px;}
.sli_name {display:block; font-family:"Anton", sans-serif; font-size:17px; line-height:1.24; color:#1f4a35; margin-bottom:8px; word-break:break-word;}
.sli_name span {display:block; margin-top:5px; font-family:"Gowun Batang", serif; font-size:13px; font-weight:700; color:#241f18; opacity:0.7;}
.sli_meta {display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px;}
.sli_meta .mgli_alc {margin:0;}
.sli_meta .mgli_alc b {background-color:#d9622b;}
.sli_meta .mgli_alc b.off {background-color:rgba(36,31,24,0.18);}
.sli_meta b.font {font-size:15px; letter-spacing:0.03em; color:#1f4a35;}
.sli_note {margin-top:12px; padding-top:12px; border-top:1px dashed rgba(36,31,24,0.3); font-family:"Nanum Pen Script", cursive; font-size:17px; line-height:1.45; color:#241f18; opacity:0.85;}
/* Signature E */

/* Menu S */
#menu {background-color:#26603c;}
.m_wrap {display:flex; flex-direction:column; align-items:stretch; gap:52px;}
.m_head {width:100%; text-align:center;}
.m_eyebrow {justify-content:center; color:#f7efdd; opacity:0.6;}
.m_eyebrow::before {display:none;}
.m_title {margin-bottom:20px;}
.m_hand {font-family:"Nanum Pen Script", cursive; font-size:22px; color:#e8b13a;}
.m_body {display:block;}
.mg_title {position:relative; padding-bottom:16px; margin-bottom:22px; border-bottom:2px solid rgba(247,239,221,0.35); font-size:23px; letter-spacing:0.16em; color:#e8b13a;}
.mgl_item {padding:11px 0; color:#f7efdd;}
/* 이름·지표·점선·가격을 한 줄에 다 넣으려다, 폭이 모자라면 이름 칸이 먼저
   눌렸다. 와인처럼 지표가 붙는 줄은 2단 배치의 한 칸(태블릿에서 380px 남짓)
   안에서 이름이 126px 까지 줄어 3.6줄로 갈라졌다.
   이름에 최소 폭을 주고 줄바꿈을 허용해, 들어가면 한 줄로 두고 모자라면
   이름이 제 줄을 차지하게 한다. 접힌 줄은 order 로 지표 → 점선 → 가격
   순서로 세우고, 점선이 남는 자리를 늘려 가격이 오른쪽 끝에 붙는다. */
.mgli_row {display:flex; align-items:flex-end; flex-wrap:wrap; gap:2px 13px;}
.mgli_name {font-size:17px; font-weight:700; line-height:1.45; min-width:min(100%, 11em); order:0;}
.mgli_name span {display:inline-block; margin-left:9px; font-size:13px; font-weight:400; opacity:0.58;}
.mgli_name .mgli_vol {margin-left:7px; font-size:12px; opacity:0.4;}
.mgli_row i {flex:1; min-width:16px; height:1px; margin:0 0 6px; border-bottom:1px dotted rgba(247,239,221,0.32); order:2;}
.mgli_row em {font-size:16px; letter-spacing:0.04em; opacity:0.92; white-space:nowrap; order:3; margin-left:auto;}
.mgli_alc {display:inline-flex; align-items:center; gap:3px; margin:0 0 5px; order:1;}
.mgli_alc b {width:5px; height:5px; border-radius:50%; background-color:#e8b13a;}
.mgli_alc b.off {background-color:rgba(247,239,221,0.24);}
.mgli_meter {display:inline-flex; align-items:center; margin:0 0 4px; font-size:11px; letter-spacing:0.02em; opacity:0.5; order:1;}
.mgli_meter b {width:4px; height:4px; border-radius:50%; margin-left:3px; background-color:#e8b13a;}
.mgli_meter b:first-of-type {margin-left:6px;}
.mgli_meter b.off {background-color:rgba(247,239,221,0.24);}
.mgli_note {font-size:12px; opacity:0.5; white-space:nowrap; order:4;}
.mgli_desc {margin-top:5px; padding-right:64px; font-size:13px; line-height:1.68; opacity:0.5;}
.mp_sub {margin:38px 0 10px; padding-bottom:10px; border-bottom:1px solid rgba(247,239,221,0.2); font-size:15px; letter-spacing:0.14em; color:#e8b13a;}
.mp_panel > .mp_sub:first-child {margin-top:0;}
/* Menu E */

/* Moment S */
#moment {background-color:#17422a;}
.g_wrap {text-align:center;}
.g_eyebrow {justify-content:center; color:#f7efdd; opacity:0.6;}
.g_eyebrow::before {display:none;}
.g_title {margin-bottom:48px;}
.g_list {display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
.gl_item {padding:16px 16px 20px; background-color:#f7efdd; border:2px solid #241f18; box-shadow:9px 9px 0 rgba(36,31,24,0.85); transition:opacity 0.9s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1);}
.sec.on .gl_item:hover {transform:rotate(-1.6deg) translateY(-6px);}
.gli_thumb {position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background-color:#123b26;}
.gli_thumb img {display:block; width:100%; height:100%; object-fit:cover; transition:transform 0.6s cubic-bezier(0.16,1,0.3,1);}
.sec.on .gl_item:hover .gli_thumb img {transform:scale(1.05);}
.gli_cap {margin-top:14px; font-family:"Nanum Pen Script", cursive; font-size:20px; color:#241f18; opacity:0.85;}
.g_more {display:inline-flex; align-items:center; gap:12px; margin-top:44px; padding:19px 34px; border:2px solid #241f18; border-radius:999px; font-size:16px; color:#241f18; background-color:#f7efdd; transition:0.35s;}
.g_more .font {font-size:18px; letter-spacing:0.08em; color:#1f4a35; transition:0.35s;}
.g_more i {display:block; width:9px; height:9px; border-top:2px solid #241f18; border-right:2px solid #241f18; transform:rotate(45deg); transition:0.35s;}
.g_more {border-color:rgba(247,239,221,0.45); background-color:transparent; color:#f7efdd;}
.g_more .font {color:#e8b13a;}
.g_more i {border-top-color:#f7efdd; border-right-color:#f7efdd;}
.g_more:hover {background-color:#e8b13a; border-color:#e8b13a; color:#241f18;}
.g_more:hover .font {color:#241f18;}
.g_more:hover i {border-top-color:#241f18; border-right-color:#241f18; transform:rotate(45deg) translate(3px,-3px);}
/* Moment E */

/* Visit S */
#visit {background-color:#0d2c1c;}
.v_wrap {display:flex; align-items:flex-start; gap:110px;}
.v_left {width:42%; flex-shrink:0;}
.v_eyebrow {color:#f7efdd; opacity:0.6;}
.v_title {margin-bottom:22px;}
.v_hand {font-family:"Nanum Pen Script", cursive; font-size:23px; color:#a9c95d; margin-bottom:38px;}
.v_btn {display:inline-flex; align-items:center; gap:12px; padding:21px 40px; background-color:#e8b13a; border:2px solid #e8b13a; border-radius:999px; font-size:17px; font-weight:700; color:#241f18; transition:0.35s;}
.v_btn i {display:block; width:9px; height:9px; border-top:2px solid #241f18; border-right:2px solid #241f18; transform:rotate(45deg); transition:0.35s;}
.v_btn:hover {background-color:transparent; color:#e8b13a;}
.v_btn:hover i {border-color:#e8b13a; transform:rotate(45deg) translate(4px,-4px);}
.v_right {flex:1;}
.vi_row {display:flex; gap:34px; padding:34px 0; border-top:1px solid rgba(247,239,221,0.24);}
.vi_row:last-child {border-bottom:1px solid rgba(247,239,221,0.24);}
.vir_tit {width:120px; flex-shrink:0; padding-top:5px; font-size:15px; letter-spacing:0.14em; color:#e8b13a;}
.vir_txt p:last-child, .vir_txt address + p {margin-top:8px; color:#f7efdd; opacity:0.6;}
/* Visit E */

/* ==========================================================================
   굿즈 페이지 (/goods.php)
   메인과 따로 도는 페이지라 여기 규칙은 메인에 닿지 않는다.
   ========================================================================== */
/* 섹션 색은 메뉴(#26603c)와 모먼트(#17422a) 사이에 놓아, 아래로 갈수록
   깊어지는 흐름을 끊지 않는다. 찢긴 종이 경계는 윗 섹션 색을 물고 내려온다. */
#goods {background-color:#1f4a35; --v1:#174430; --v2:#2a6a41;}
#goods.torn::before {background-color:#26603c;}
/* 단독 페이지(/goods.php)는 한 화면 높이로 잡을 이유가 없다 */
#wrap.sub {background-color:#1f4a35;}
#wrap.sub .gd_sec {min-height:0; padding:150px 0 110px;}
.sub_header {position:fixed;}
.sub_header .hg_list {gap:28px;}
.gd_wrap {position:relative; width:1400px; max-width:88%; margin:0 auto; z-index:3;}
.gd_eyebrow {display:flex; align-items:center; gap:10px; font-size:15px; letter-spacing:0.06em; color:#f7efdd; opacity:0.6; margin-bottom:22px;}
.gd_eyebrow .font {font-size:19px; letter-spacing:0.12em; color:#e8b13a; opacity:1;}
.gd_title {margin-bottom:18px;}
.gd_hand {font-family:"Nanum Pen Script", cursive; font-size:23px; color:#a9c95d; margin-bottom:54px;}
.gd_empty {font-size:17px; color:#f7efdd; opacity:0.6;}

/* 격자(단독 페이지)와 가로 슬라이드(메인)를 같은 카드로 쓴다. */
.gd_grid {display:grid; grid-template-columns:repeat(4, 1fr); gap:34px;}
/* 슬라이드일 때는 .s_list 가 가로 배치를 맡고, 여기서는 카드 폭만 정한다. */
.gd_slider .gd_item {flex:0 0 auto; width:clamp(230px, 22vw, 300px); scroll-snap-align:start;}
.gd_item {background-color:#f7efdd; border:2px solid #241f18; box-shadow:10px 10px 0 rgba(36,31,24,0.9); overflow:hidden; transition:transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s ease;}
.gd_item:hover {transform:translate(-6px,-6px); box-shadow:17px 17px 0 rgba(36,31,24,0.9);}

/* 홍보 포스터는 세로로 길다. 정사각으로 자르면 위쪽 글자가 어정쩡하게 잘린다.
   3:4 로 잡아 포스터가 거의 그대로 들어가게 한다.
   aspect-ratio 는 구형 기기에서 무시되므로 padding 비율을 쓴다. */
.gdi_pic {position:relative; width:100%; border-bottom:2px solid #241f18; overflow:hidden; background-color:#17422a;}
.gdi_pic::before {content:""; display:block; width:100%; padding-top:133.33%;}
.gdi_pic img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; display:block;}
.gdi_badge {position:absolute; left:0; top:14px; padding:6px 14px; border:2px solid #241f18; border-left:0; font-family:"Anton", sans-serif; font-size:13px; letter-spacing:0.1em; color:#241f18; background-color:#e8b13a;}
.gdi_badge.b_sale {background-color:#d9622b; color:#f7efdd;}
.gdi_badge.b_soldout {background-color:#241f18; color:#f7efdd;}
.gd_item.is_sold .gdi_pic img {filter:grayscale(0.85); opacity:0.5;}

.gdi_txt {padding:20px 20px 24px;}
.gdi_name {display:block; font-size:18px; font-weight:700; line-height:1.4; color:#241f18;}
.gdi_price {margin-top:10px; display:flex; align-items:baseline; gap:8px;}
.gdi_price s {font-size:14px; color:#241f18; opacity:0.42;}
.gdi_price b {font-size:21px; letter-spacing:0.03em; color:#1f4a35;}
.gdi_note {margin-top:7px; font-size:13px; color:#d9622b;}
.gdi_desc {margin-top:9px; font-size:13px; line-height:1.6; color:#241f18; opacity:0.6;}

/* 어떻게 사는지 */
.gd_how {margin-top:68px; padding:38px 40px; background-color:rgba(247,239,221,0.08); border:2px dashed rgba(247,239,221,0.4); text-align:center;}
.gdh_tit {display:block; font-size:19px; font-weight:700; color:#e8b13a; margin-bottom:12px;}
.gdh_txt {font-size:16px; line-height:1.75; color:#f7efdd; opacity:0.8;}
.gdh_btn {display:inline-flex; align-items:center; gap:12px; margin-top:26px; padding:18px 34px; background-color:#e8b13a; border:2px solid #e8b13a; border-radius:999px; font-size:16px; font-weight:700; color:#241f18; transition:0.35s;}
.gdh_btn i {display:block; width:9px; height:9px; border-top:2px solid #241f18; border-right:2px solid #241f18; transform:rotate(45deg); transition:0.35s;}
.gdh_btn:hover {background-color:transparent; color:#e8b13a;}
.gdh_btn:hover i {border-color:#e8b13a; transform:rotate(45deg) translate(4px,-4px);}

/* ==========================================================================
   팝업 : 메인에 잠깐 띄우는 알림
   ========================================================================== */
.jp_layer {position:fixed; left:0; top:0; width:100%; height:100%; z-index:1300; display:flex; align-items:center; justify-content:center; padding:4vh 4vw; overflow:auto; background-color:rgba(10,28,18,0.88);}
.jp_layer[hidden] {display:none;}
.jp_wrap {width:min(90vw, 540px); background-color:#f7efdd; border:2px solid #241f18; box-shadow:14px 14px 0 rgba(36,31,24,0.55);}

/* 슬라이더 기본값(화면 끝까지 늘리고 좌우 여백을 크게 주는 것)을 되돌린다.
   팝업 안에서는 한 장이 상자를 꽉 채워야 한다. */
/* 클래스를 둘 겹쳐 쓴다. .s_list 쪽은 화면 폭별로 gap 을 다시 주는 규칙이
   뒤에 더 있어서, 클래스 하나짜리로는 덮이지 않는다. */
.jp_wrap .jp_slider {position:relative; width:100%; margin-left:0;}
.jp_slider .jp_list {gap:0; padding:0; scroll-padding-left:0;}
.jp_slider .jp_item {flex:0 0 100%; width:100%; scroll-snap-align:start;}
.jp_pic {display:block; line-height:0;}
.jp_pic img {display:block; width:100%; height:auto;}
a.jp_pic {cursor:pointer;}

/* 화살표는 그림 위에 겹친다. 한 장뿐이면 슬라이더가 알아서 꺼 준다. */
.jp_slider .ss_nav {top:50%; transform:translateY(-50%); width:42px; height:42px; box-shadow:3px 3px 0 rgba(36,31,24,0.8);}
.jp_slider .ss_prev {left:12px;}
.jp_slider .ss_next {right:12px;}

.jp_foot {display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-top:2px solid #241f18;}
.jp_today {display:inline-flex; align-items:center; gap:7px; font-size:14px; color:#241f18; opacity:0.78; cursor:pointer;}
.jp_today input {width:16px; height:16px; accent-color:#1f4a35; cursor:pointer;}
.jp_close {padding:10px 20px; background-color:#241f18; border:2px solid #241f18; font-family:"Anton", sans-serif; font-size:14px; letter-spacing:0.06em; color:#f7efdd; cursor:pointer; transition:0.25s;}
.jp_close:hover {background-color:#e8b13a; color:#241f18;}

/* ==========================================================================
   이벤트 : 가챠 뽑기와 룰렛 (/event.php)
   메인과 따로 도는 페이지라 여기 규칙은 메인에 닿지 않는다.
   ========================================================================== */
#event {background-color:#1f4a35; background-image:radial-gradient(ellipse at 50% 28%, rgba(90,170,110,0.22), rgba(31,74,53,0) 62%);}
#wrap.sub .ev_sec {min-height:0; padding:140px 0 100px;}
.ev_wrap {position:relative; width:1400px; max-width:88%; margin:0 auto; text-align:center; z-index:3;}
.ev_eyebrow {display:inline-flex; align-items:center; gap:10px; font-size:15px; letter-spacing:0.06em; color:#f7efdd; opacity:0.6; margin-bottom:16px;}
.ev_eyebrow .font {font-size:19px; letter-spacing:0.12em; color:#e8b13a; opacity:1;}
.ev_title {margin-bottom:40px;}
.ev_empty {font-size:17px; color:#f7efdd; opacity:0.6;}

.ev_stage {display:flex; flex-direction:column; align-items:center; gap:30px;}

/* ── 룰렛 ── */
.ev_wheelbox {position:relative; width:min(80vw, 380px);}
.ev_wheelbox::before {content:""; display:block; width:100%; padding-top:100%;}
.ev_wheel {position:absolute; left:0; top:0; width:100%; height:100%; filter:drop-shadow(0 16px 30px rgba(0,0,0,0.45)); transition:transform 4.6s cubic-bezier(0.12,0.72,0.12,1);}
.ev_wheel svg {display:block; width:100%; height:100%; overflow:visible;}
/* 칸 색이 제각각이라 글씨에 어두운 테두리를 둘러 어디서나 읽히게 한다 */
.ev_wt {fill:#f7efdd; font-family:"Apple SD Gothic Neo", "Noto Sans KR", sans-serif; font-weight:700; text-anchor:middle; dominant-baseline:central; paint-order:stroke; stroke:#241f18; stroke-width:3.2px; stroke-linejoin:round;}
.ev_hub {position:absolute; left:50%; top:50%; width:74px; height:74px; margin:-37px 0 0 -37px; border-radius:50%; background-color:#f7efdd; border:5px solid #241f18; box-shadow:0 4px 12px rgba(0,0,0,0.3); display:flex; align-items:center; justify-content:center; z-index:3;}
.ev_hub span {font-family:"Black Han Sans", sans-serif; font-size:30px; line-height:1; color:#1f4a35;}
/* 바늘은 12시에서 아래를 가리킨다. 멈춘 칸을 읽는 기준이다. */
/* 바늘. 꼭대기 꼭지를 축으로 꺾이게 해서 못을 지날 때마다 튄다. */
.ev_pin {position:absolute; left:50%; top:-26px; width:44px; height:62px; margin-left:-22px; z-index:4; overflow:visible; transform-origin:50% 15%; transition:transform 0.07s ease-out;}
.evp_shadow {fill:rgba(36,31,24,0.45);}
.evp_leaf {fill:#e8b13a; stroke:#241f18; stroke-width:3.4; stroke-linejoin:round;}
.evp_rib {fill:none; stroke:#241f18; stroke-width:1.8; stroke-linecap:round; opacity:0.38;}
.evp_cap {fill:#f7efdd; stroke:#241f18; stroke-width:3.4;}

/* ── 돌리기 버튼 : 나뭇잎 한 장 ── */
.ev_box {position:relative; display:inline-block; padding:0; background:none; border:0; cursor:pointer; line-height:0;}
.evb_leaf {display:block; width:clamp(200px, 46vw, 280px); height:auto; overflow:visible; filter:drop-shadow(6px 7px 0 rgba(36,31,24,0.85)); transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), filter 0.35s ease;}
/* 잎은 초록. 바탕이 짙은 초록이라 한 단계 밝은 잎 색을 써야 떠 보인다.
   사이트 잎사귀에 쓰는 색 그대로다. */
.evl_body {fill:#6aa85a; stroke:#241f18; stroke-width:7; stroke-linejoin:round; transition:fill 0.3s ease;}
.evl_vein {fill:none; stroke:#241f18; stroke-width:2.6; stroke-linecap:round; opacity:0.32;}
.evb_txt {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); font-size:clamp(16px, 3.6vw, 21px); letter-spacing:0.06em; color:#241f18; line-height:1; white-space:nowrap; pointer-events:none;}
.ev_box:hover .evb_leaf {transform:translateY(-5px) rotate(-2deg); filter:drop-shadow(9px 11px 0 rgba(36,31,24,0.85));}
.ev_box:hover .evl_body {fill:#a9c95d;}
/* 돌아가는 동안에는 잎이 가만히 가라앉는다. 흔들면 정신이 없다. */
.ev_box[disabled] {cursor:default;}
.ev_box[disabled] .evb_leaf {transform:none; opacity:0.5; filter:drop-shadow(3px 4px 0 rgba(36,31,24,0.6));}
.ev_box[disabled] .evb_txt {opacity:0.55;}

.ev_hand {margin-top:26px; font-family:"Nanum Pen Script", cursive; font-size:21px; color:#a9c95d;}

/* ── 오늘의 경품 ── */
.ev_prizes {margin-top:52px; padding-top:34px; border-top:1px dashed rgba(247,239,221,0.3);}
.evp_tit {font-size:15px; letter-spacing:0.16em; color:#e8b13a; margin-bottom:20px;}
.evp_list {display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:20px;}
.evp_item {width:116px;}
.evp_pic {display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:1/1; margin-bottom:9px; background-color:#17422a; border:2px solid #241f18; overflow:hidden;}
.evp_pic img {display:block; width:100%; height:100%; object-fit:cover;}
.evp_pic[data-mark]::before {content:attr(data-mark); font-family:"Black Han Sans", sans-serif; font-size:30px; color:#f7efdd; opacity:0.5;}
.evp_nm {display:block; font-size:13px; line-height:1.4; color:#f7efdd; opacity:0.78; word-break:keep-all;}

/* ── 결과 ── */
.ev_result {position:fixed; left:0; top:0; width:100%; height:100%; z-index:1300; display:flex; align-items:center; justify-content:center; padding:5vh 5vw; background-color:rgba(10,28,18,0.92);}
.ev_result[hidden] {display:none;}
.evr_box {position:relative; width:min(88vw, 390px); padding:42px 26px 26px; background-color:#f7efdd; border:3px solid #241f18; box-shadow:13px 13px 0 rgba(36,31,24,0.55); text-align:center; animation:evr_pop 0.45s cubic-bezier(0.22,1.4,0.36,1);}
@keyframes evr_pop {from {transform:scale(0.86); opacity:0;} to {transform:scale(1); opacity:1;}}
.evr_ribbon {position:absolute; left:50%; top:-17px; transform:translateX(-50%); padding:8px 22px; background-color:#d9622b; border:3px solid #241f18; font-size:14px; letter-spacing:0.14em; color:#f7efdd; white-space:nowrap;}
.evr_pic {width:176px; height:176px; margin:0 auto 20px; border:3px solid #241f18; background-color:#17422a; overflow:hidden;}
.evr_pic img {display:block; width:100%; height:100%; object-fit:cover;}
.evr_pic.no_img {display:flex; align-items:center; justify-content:center; font-family:"Black Han Sans", sans-serif; font-size:48px; color:#f7efdd; opacity:0.6;}
.evr_name {display:block; font-size:23px; font-weight:700; line-height:1.35; color:#241f18; word-break:keep-all;}
.evr_msg {margin-top:11px; font-size:15px; line-height:1.65; color:#241f18; opacity:0.72; word-break:keep-all;}
.evr_again {margin-top:24px; padding:14px 30px; background-color:#241f18; border:3px solid #241f18; font-family:"Anton", sans-serif; font-size:14px; letter-spacing:0.08em; color:#f7efdd; cursor:pointer; transition:0.25s;}
.evr_again:hover {background-color:#e8b13a; color:#241f18;}

/* Footer S */
#footer {position:relative; padding:96px 0 130px; background-color:#241f18; overflow:hidden; scroll-snap-align:start;}
.f_wrap {position:relative; z-index:3; width:1400px; max-width:88%; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:30px;}
.f_logo img {display:block; width:auto; height:46px;}
.f_sns a {font-size:14px; letter-spacing:0.16em; color:#e8b13a; border-bottom:1px solid rgba(232,177,58,0.5); padding-bottom:4px; transition:0.3s;}
.f_sns a:hover {color:#f7efdd; border-color:#f7efdd;}
.f_copy {color:#f7efdd; opacity:0.45; letter-spacing:0.04em;}
.f_copy .font {font-size:15px; letter-spacing:0.1em;}
.f_leaf {position:absolute; left:0; bottom:0; width:100%; height:110px; z-index:1; opacity:0.5;}
/* Footer E */

/* Motion 최소화 대응 S */
@media (prefers-reduced-motion:reduce) {
	*, *::before, *::after {animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
	.fade {opacity:1 !important; transform:none !important;}
	html {scroll-snap-type:none !important;}
	.svv_l {transform:translateX(-215%) !important;}
	.svv_r {transform:scaleX(-1) translateX(-215%) !important;}
	.jg_shade {opacity:0 !important;}
	.s_list {scroll-behavior:auto !important;}
}
/* Motion 최소화 대응 E */

/* Header Util : 언어 전환 S */
.h_logo img {display:block; width:auto; height:42px; transition:0.4s;}
#header.fix .h_logo img {height:36px;}
.h_util {position:relative; z-index:2; display:flex; align-items:center; justify-content:flex-end; gap:16px; flex:1 1 0;}
.h_lang {display:flex; align-items:center; gap:2px; padding:4px; border:2px solid rgba(247,239,221,0.34); border-radius:999px; transition:0.35s;}
.hl_btn {padding:7px 13px; border-radius:999px; font-family:"Anton", sans-serif; font-size:12px; letter-spacing:0.1em; color:#f7efdd; opacity:0.6; transition:0.25s;}
.hl_btn:hover {opacity:1;}
.hl_btn.on {background-color:#f7efdd; color:#1f4a35; opacity:1;}
#header.fix .h_lang {border-color:rgba(36,31,24,0.28);}
#header.fix .hl_btn {color:#241f18;}
#header.fix .hl_btn.on {background-color:#1f4a35; color:#f7efdd;}
/* Header Util : 언어 전환 E */

/* Hero Pride / Instagram S */
.het_row {display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 14px; margin-top:18px;}
.het_pride {display:flex; width:fit-content; align-items:center; gap:11px; margin:0; padding:9px 22px 9px 16px; border:1.5px solid rgba(247,239,221,0.42); border-radius:999px; opacity:0; transform:translateY(24px); transition:0.9s cubic-bezier(0.16,1,0.3,1) 1.96s;}
.hp_bow {width:34px; height:19px; flex-shrink:0;}
.het_pride span {font-size:13px; letter-spacing:0.18em; color:#f7efdd;}
/* 인스타 링크는 PRIDE 뱃지 아래 줄에 둔다. 한 줄에 나란히 두면
   두 가지가 같은 무게로 읽혀 뱃지 문구가 묻힌다. */
.het_igrow {margin-top:11px; text-align:center;}
.het_ig {display:inline-block; margin:0; padding:2px 4px; font-size:13px; letter-spacing:0.16em; color:#e8b13a; opacity:0; transform:translateY(20px); transition:0.9s cubic-bezier(0.16,1,0.3,1) 2.1s; pointer-events:auto;}
.het_ig:hover {color:#f7efdd;}
#hero.on .het_pride {opacity:1; transform:translateY(0);}
#hero.on .het_ig {opacity:0.9; transform:translateY(0);}
/* Hero Pride / Instagram E */

/* Hero Cocktail S : 동물과 함께 바 이미지 강조 */
.hea_drink {position:absolute; opacity:0; transform:translateY(54px) scale(0.5); transition:opacity 0.6s ease, transform 0.9s cubic-bezier(0.22,1.35,0.36,1);}
.hea_drink svg {display:block; width:100%; height:auto; filter:drop-shadow(0 16px 20px rgba(0,0,0,0.35)); animation:a_bob 5.6s ease-in-out infinite; transform-origin:50% 100%;}
#hero.on .hea_drink {opacity:1; transform:translateY(0) scale(1);}
.hea_drink {width:var(--w); margin-left:calc(var(--w) / -2);}
.hea_drink.d_snake  {--w:min(4vw,64px); left:17.5%; bottom:36%; z-index:6; transition-delay:2.10s;}
.hea_drink.d_lion   {--w:min(4vw,64px); left:37.5%; bottom:28%; z-index:6; transition-delay:2.22s;}
.hea_drink.d_tiger  {--w:min(4vw,64px); left:62.5%; bottom:29%; z-index:6; transition-delay:2.34s;}
.hea_drink.d_monkey {--w:min(4vw,64px); left:80.5%; bottom:28%; z-index:6; transition-delay:2.46s;}
.hea_drink.d_toucan {--w:min(4vw,64px); left:96.5%; bottom:39%; z-index:6; transition-delay:2.58s;}
.hea_drink.d_lion svg   {animation-duration:4.8s; animation-delay:0.5s;}
.hea_drink.d_tiger svg  {animation-duration:6.2s; animation-delay:0.9s;}
.hea_drink.d_monkey svg {animation-duration:5.2s; animation-delay:1.3s;}
.hea_drink.d_toucan svg {animation-duration:5.6s; animation-delay:1.7s;}
/* Hero Cocktail E */

/* About Notice S : 함께하는 공간 안내 */
.a_notice {max-width:880px; margin:56px auto 0; padding:34px 38px; background-color:#f7efdd; border:2px solid #241f18; box-shadow:9px 9px 0 rgba(36,31,24,0.9);}
.an_bow {width:38px; height:21px; margin-bottom:14px;}
.an_tit {display:block; font-size:19px; font-weight:700; color:#1f4a35; margin-bottom:12px;}
/* 제목이 한 문장이라 좁은 화면에서 줄이 바뀐다. keep-all 이 없으면
   '공간입/니다' 처럼 낱말 가운데가 갈린다.
   한국어에만 건다. 일본어는 원래 아무 데서나 끊는 것이 정상이라,
   같이 걸면 긴 가타카나가 통째로 밀려 상자 밖으로 삐져나간다. */
html[lang="ko"] .an_tit, html[lang="ko"] .an_txt {word-break:keep-all;}
.an_txt {margin:0;}
/* About Notice E */

/* Signature Soon S */
/* Signature Soon E */

/* Menu Tabs S : 항목이 많아 분류별로 전환 */
.m_tabs {display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-bottom:38px;}
.mt_btn {padding:13px 28px; border:2px solid rgba(247,239,221,0.3); border-radius:999px; font-family:"Anton", sans-serif; font-size:16px; letter-spacing:0.12em; color:#f7efdd; opacity:0.75; transition:0.28s;}
.mt_btn:hover {opacity:1; border-color:rgba(247,239,221,0.6);}
/* 시즌 탭에만 붙는 별.
   이번 시즌 메뉴라는 것을 한눈에 알리려고 모서리에 스티커처럼 얹는다.
   버튼 밖으로 걸치므로 버튼이 기준점이 되어야 한다. */
.mt_season {position:relative; overflow:visible;}
/* 색연필로 그은 듯한 오각별.
   선만 남겨 안쪽 오각형이 비쳐 보이게 한다. 꽉 채우면 작은 크기에서
   그냥 덩어리로 보인다.
   꼭짓점을 조금씩 흔들고 선을 살짝 휘게 해 손맛을 주고, feTurbulence 로
   가장자리를 거칠게 만들어 종이에 그은 결을 흉내 낸다. 연한 선을 한 번
   덧그어 필압 차이도 냈다. 그림자는 뺐다 - 속이 비어 있어 지저분해진다. */
.mt_star {position:absolute; right:-9px; top:-11px; width:26px; height:26px; stroke:#d9622b; transform-origin:50% 50%; animation:mt_twinkle 3.4s ease-in-out infinite;}
.mt_season:hover .mt_star {stroke:#e8b13a;}
@keyframes mt_twinkle {
	0%, 100% {transform:rotate(-8deg) scale(1);}
	50%      {transform:rotate(6deg) scale(1.12);}
}

.mt_btn.on {background-color:#e8b13a; border-color:#e8b13a; color:#241f18; opacity:1;}
/* 탭 머리말 : 탭을 열자마자 보이도록 목록 위에 한 줄로 둔다. */
.mp_notice {display:block; margin-bottom:24px; text-align:center; font-size:14px; letter-spacing:0.02em; color:#e8b13a;}
/* 시즌 메뉴 : 설명도 가격도 없이 포스터만 건다.
   보통 한 장만 올라오므로 가운데에 액자처럼 세운다. 격자 대신 flex 를 쓰면
   한 장일 때 저절로 가운데로 가고, 두세 장이 되어도 그대로 나뉜다. */
.ms_list {display:flex; flex-wrap:wrap; justify-content:center; gap:30px;}
.ms_item {margin:0; flex:0 1 calc((100% - 60px) / 3); max-width:460px;}
.ms_item:only-child {flex:0 1 520px; max-width:520px;}

/* 종이 테두리를 둘러 붙여 둔 포스터처럼 보이게 한다.
   살짝 기울여 뒀다가 손을 올리면 반듯해지며 떠오른다. */
.ms_btn {display:block; width:100%; padding:14px 14px 16px; border:2px solid #241f18; background-color:#f7efdd; box-shadow:10px 10px 0 rgba(36,31,24,0.9); cursor:zoom-in; transform:rotate(-1.4deg); transition:transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s ease;}
.ms_item:nth-child(even) .ms_btn {transform:rotate(1.2deg);}
.ms_btn img {display:block; width:100%; height:auto; border:1px solid rgba(36,31,24,0.35);}
.ms_btn:hover {transform:rotate(0deg) translate(-4px,-6px); box-shadow:16px 16px 0 rgba(36,31,24,0.9);}
.ms_btn:focus-visible {outline:3px solid #e8b13a; outline-offset:5px;}

/* 눌러서 크게 볼 수 있다는 것을 알려 준다. 포스터의 재료 글씨가 작아
   이 안내가 없으면 그냥 그림인 줄 알고 지나친다. */
.ms_hint {margin-top:26px; text-align:center; font-family:"Nanum Pen Script", cursive; font-size:21px; color:#f7efdd; opacity:0.55;}

.ms_view {position:fixed; left:0; top:0; width:100%; height:100%; z-index:1200; display:flex; align-items:center; justify-content:center; padding:5vh 5vw; background-color:rgba(10,28,18,0.94);}
.ms_view[hidden] {display:none;}
.ms_view img {display:block; max-width:100%; max-height:90vh; width:auto; height:auto; border:2px solid #241f18; box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.ms_close {position:absolute; right:22px; top:22px; width:46px; height:46px; border:2px solid rgba(247,239,221,0.6); border-radius:50%; background:none; cursor:pointer; transition:0.25s;}
.ms_close::before, .ms_close::after {content:""; position:absolute; left:12px; top:20px; width:18px; height:2px; background-color:#f7efdd;}
.ms_close::before {transform:rotate(45deg);}
.ms_close::after {transform:rotate(-45deg);}
.ms_close:hover {border-color:#e8b13a;}
.ms_close:hover::before, .ms_close:hover::after {background-color:#e8b13a;}

.mp_panel {display:none;}
.mp_panel.on {display:block; animation:mp_in 0.5s cubic-bezier(0.16,1,0.3,1);}
.mp_panel .mg_list {columns:2; column-gap:64px;}
.mp_panel .mgl_item {break-inside:avoid;}
@keyframes mp_in {from {opacity:0; transform:translateY(16px);} to {opacity:1; transform:none;}}
/* Menu Tabs E */

/* Visit Map / Hours S */
/* 비율 상자
   aspect-ratio 는 iOS 15 / 크롬 88 부터라 그 아래 기기에서는 무시되고
   높이가 0 이 되어 지도가 통째로 사라진다. 어디서나 되는 padding 비율로 잡는다.
   --ratio 는 세로/가로 백분율. */
.v_map {position:relative; width:100%; margin-top:40px; border:2px solid rgba(247,239,221,0.5); overflow:hidden; background-color:#0a2416; --ratio:62.5%;}
.v_map::before {content:""; display:block; width:100%; padding-top:var(--ratio);}
.vm_link {position:absolute; left:0; top:0; display:block; width:100%; height:100%;}
/* 그림은 16:10 한 장인데 화면에 따라 칸의 비율이 달라진다.
   cover 로 가운데를 잘라, 어느 비율에서도 핀이 가운데 남는다. */
.vm_link img {display:block; width:100%; height:100%; object-fit:cover; transition:transform 0.6s cubic-bezier(0.16,1,0.3,1);}
.vm_link:hover img {transform:scale(1.03);}
.vm_link:focus-visible {outline:3px solid #e8b13a; outline-offset:-3px;}
.vm_att {position:absolute; left:10px; bottom:10px; z-index:2; padding:3px 7px; background-color:rgba(247,239,221,0.78); font-size:10px; letter-spacing:0.01em; color:#3c362c; pointer-events:none;}
.vm_open {position:absolute; right:12px; bottom:12px; z-index:3; display:inline-flex; align-items:center; gap:8px; padding:10px 18px; background-color:#f7efdd; border:2px solid #241f18; font-size:13px; color:#241f18; transition:0.3s;}
.vm_open i {display:block; width:7px; height:7px; border-top:2px solid #241f18; border-right:2px solid #241f18; transform:rotate(45deg); transition:0.3s;}
.vm_link:hover .vm_open {background-color:#e8b13a;}
.vm_link:hover .vm_open i {transform:rotate(45deg) translate(2px,-2px);}
.vir_hours {display:flex; flex-direction:column; gap:7px; margin-bottom:12px;}
.vir_hours li {display:flex; align-items:baseline; gap:16px;}
.vir_hours b {min-width:76px; font-size:17px; font-weight:700; color:#f7efdd;}
.vir_hours em {font-size:18px; letter-spacing:0.04em; color:#f7efdd; opacity:0.92;}
/* 365 OPEN! 은 요일 줄 위에 얹는 알림이라, 시간 칸을 비우고 색을 달리한다. */
.vir_hours .vh_open b {min-width:0; font-family:"Anton", sans-serif; font-size:16px; letter-spacing:0.1em; color:#e8b13a;}
/* RESERVE 의 인스타 주소도 메인처럼 눌러서 넘어가게 */
.vir_ig {color:#f7efdd; border-bottom:1px solid rgba(247,239,221,0.45); padding-bottom:2px; transition:0.3s;}
.vir_ig:hover {color:#e8b13a; border-color:#e8b13a;}
/* Visit Map / Hours E */

/* Responsive S */
@media all and (max-width:1800px) {
	#header {padding:0 46px;}
	.sec {padding:140px 0;}
	.a_point {gap:20px;}
	.m_wrap {gap:76px;}
	.v_wrap {gap:80px;}
	.s_list {gap:18px;}
	.ss_nav {width:46px; height:46px;}
	.g_list {gap:28px;}
}

@media all and (max-width:1600px) {
	.h_logo img {height:38px;}
	.a_notice {margin-top:46px; padding:30px 32px;}
	#header {height:88px; padding:0 38px;}
	.hg_list {gap:30px;}
	.sec {padding:126px 0;}
	#about {padding-top:140px;}
	#menu {padding:150px 0;}
	#visit {padding:146px 0;}
	.a_point {margin-top:62px;}
	.ap_item {padding:34px 24px;}
	.sli_txt {padding:24px 22px 28px;}
	.sli_name {font-size:22px;}
	.m_wrap {gap:44px;}
	.v_wrap {gap:64px;}
	.v_left {width:44%;}
}

@media all and (max-width:1440px) {
	.h_logo img {height:34px;}
	.hl_btn {padding:6px 11px; font-size:11px;}
	.h_util {gap:12px;}
	.mt_btn {padding:11px 22px; font-size:15px;}
	.mp_panel .mg_list {column-gap:44px;}
	.gd_grid {grid-template-columns:repeat(3, 1fr); gap:28px;}
	.ms_item {flex:0 1 calc((100% - 24px) / 2); max-width:420px;}
	.ms_list {gap:24px;}
	#header {height:82px; padding:0 30px;}
	.h_logo em {font-size:25px;}
	.hg_list {gap:26px;}
	.hgl_item a {font-size:15px;}
	.h_book {height:42px; padding:0 20px; font-size:14px;}
	.sec {padding:112px 0;}
	#about {padding-top:126px;}
	#menu {padding:132px 0;}
	#visit {padding:130px 0;}
	.sec > div, .f_wrap {max-width:90%;}
	.txt {font-size:17px; line-height:30px;}
	.txt.big {font-size:18px; line-height:31px;}
	.a_deco {width:240px; right:-30px;}
	.ap_item em {font-size:28px;}
	.ap_item strong {font-size:19px;}
	.s_title, .g_title {margin-bottom:54px;}
	.sli_name {font-size:20px;}
	.sli_note {font-size:19px;}
	.mp_panel .mg_list {column-gap:44px;}
	#depth {right:26px;}
	.vir_tit {width:100px;}
	.gli_cap {font-size:20px;}
}

@media all and (max-width:1280px) {
	.het_logo img {width:min(38vw, calc(var(--vh) * 50));}
	.v_map {margin-top:32px;}
	.sec {padding:100px 0;}
	#about {padding-top:112px;}
	#menu {padding:118px 0;}
	#visit {padding:116px 0;}
	.a_point {flex-wrap:wrap; gap:18px;}
	.ap_item {flex:0 0 calc(50% - 9px); max-width:none;}


	#depth {right:18px;}
	.v_wrap {gap:48px;}
	.v_left {width:46%;}
	.g_list {grid-template-columns:repeat(3, 1fr); gap:22px;}
}

@media all and (max-width:1024px) {
	.h_logo img {height:32px;}
	#header.fix .h_logo img {height:30px;}
	.h_util {gap:10px;}
	.h_lang {padding:3px;}
	.hl_btn {padding:6px 9px; font-size:10px; letter-spacing:0.06em;}
	.het_logo img {width:min(52vw, calc(var(--vh) * 44));}
	.a_notice {margin-top:40px;}
	.v_map {--ratio:75%;}
	#header {height:72px; padding:0 22px;}
	/* 메뉴가 덮개로 빠지면 가운데를 비워 둘 이유가 없다 */
	.h_logo, .h_util {flex:0 0 auto;}
	.h_gnb {position:fixed; left:0; top:0; width:100%; height:calc(var(--vh) * 100); background-color:#0f3221; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:0.45s cubic-bezier(0.16,1,0.3,1); z-index:1;}
	#header.open .h_gnb {opacity:1; visibility:visible;}
	.hg_list {flex-direction:column; gap:26px;}
	.hgl_item a {font-size:24px; color:#f7efdd !important;}
	.h_book {display:none;}
	.h_toggle {display:flex;}
	#header.open .h_toggle i {background-color:#f7efdd !important;}
	#hero {min-height:600px;}	/* 1024 이하 태블릿까지만 */
	.gd_grid {grid-template-columns:repeat(2, 1fr); gap:24px;}
	#wrap.sub .gd_sec {padding:120px 0 90px;}
	.he_title {top:16%;}
	.sec {padding:88px 0;}
	#about {padding-top:100px;}
	#menu {padding:100px 0;}
	#visit {padding:100px 0;}
	.a_deco {display:none;}
	html {scroll-snap-type:y proximity;}
	.sec > .sv_veil {--lsc:1.6; --vshift:-165%;}
	.sec {padding:108px 0 88px;}
	.m_wrap {gap:40px;}
	#depth {right:12px;}
	.dl_item span {display:none;}
	.v_wrap {flex-direction:column; align-items:stretch; gap:48px;}
	.v_left {width:100%;}
	.g_list {grid-template-columns:repeat(2, 1fr);}
	.f_wrap {flex-wrap:wrap; justify-content:center; text-align:center; gap:20px;}
	.f_copy {width:100%;}
}

@media all and (max-width:768px) {
	/* 폰에서는 최소높이를 풀어 히어로가 고정된 화면 높이와 정확히 일치하게 한다.
	   min-height 가 더 크면 그만큼 히어로가 화면 밖으로 넘쳐 스냅 지점이 어긋난다. */
	#hero {min-height:0;}
	/* 좁은 화면에서는 한 줄에 열 개를 세울 수 없다.
	   동물을 위로 올리고 잔은 그 아래 수풀 앞에 한 줄로 놓아 서로 닿지 않게 한다. */
	.hea_item.snake  {--w:15vw; left:10%; bottom:41%;}
	.hea_item.lion   {--w:20vw; left:27%; bottom:36%;}
	.hea_item.tiger  {--w:25vw; left:50%; bottom:35%;}
	.hea_item.monkey {--w:18vw; left:73%; bottom:36%;}
	.hea_item.toucan {--w:15vw; left:90%; bottom:42%;}
	/* 잔은 제 동물 바로 아래에 붙인다.
	   한 줄로 나란히 두면 높이가 제각각인 동물들과 사이가 벌어져 따로 노는데,
	   동물의 bottom 에서 일정한 vw 만큼만 내리면 간격이 고르게 유지된다.
	   빼는 값은 잔 높이 + 여백 - 동물 그림의 아래 여백 이고, 전부 vw 라
	   화면이 세로로 길어지거나 짧아져도 간격이 그대로다. */
	.hea_drink.d_snake  {--w:9vw; left:10%; bottom:calc(41% - 12.2vw);}
	.hea_drink.d_lion   {--w:9vw; left:27%; bottom:calc(36% - 11.9vw);}
	.hea_drink.d_tiger  {--w:9vw; left:50%; bottom:calc(35% - 11.0vw);}
	.hea_drink.d_monkey {--w:9vw; left:73%; bottom:calc(36% - 11.5vw);}
	.hea_drink.d_toucan {--w:9vw; left:90%; bottom:calc(42% - 12.3vw);}
	/* 모바일 성능 : 풀숲 앞쪽 장식 잎 6장은 생략. 덮는 역할은 뒤쪽 잎들이 한다. */
	.svl.n13, .svl.n14, .svl.n15, .svl.n16, .svl.n17, .svl.n18 {display:none;}
	.h_logo img {height:28px;}
	#header.fix .h_logo img {height:26px;}
	.het_logo img {width:min(66vw, calc(var(--vh) * 42));}
	/* margin-top 은 두 줄로 따로 놓였던 시절의 흔적이다. 지금은 인스타 링크와
	   het_row 한 줄에 나란히 서는데, 뱃지만 18px 내려가 높이가 어긋나 있었다. */
	.het_pride {padding:7px 16px 7px 13px; gap:8px;}
	.hp_bow {width:28px; height:16px;}
	.het_pride span {font-size:11px; letter-spacing:0.12em;}
	.het_ig {font-size:12px;}
	.a_notice {padding:24px 20px; box-shadow:7px 7px 0 rgba(36,31,24,0.9);}
	.an_tit {font-size:17px;}
	/* 가로로 밀어 보는 줄이었는데, 중간쯤 밀면 양 끝 버튼이 반씩 잘려 보였다.
	   탭이 11개라 어떻게 밀어도 끝은 잘린다. 줄을 바꿔 한눈에 다 보이게 한다.
	   글자와 여백을 줄여 줄 수가 늘어나는 만큼을 상쇄한다. */
	.m_tabs {flex-wrap:wrap; justify-content:center; overflow-x:visible; gap:7px; margin-bottom:26px;}
	.mt_btn {padding:9px 15px; font-size:12.5px; letter-spacing:0.08em;}
	.mt_star {right:-7px; top:-9px; width:22px; height:22px;}
	.mp_panel .mg_list {columns:1;}
	.gd_grid {grid-template-columns:1fr; gap:22px;}
	#wrap.sub .gd_sec {padding:104px 0 70px;}
	#wrap.sub .ev_sec {padding:104px 0 70px;}
	.ev_title {margin-bottom:30px;}
	.ev_stage {gap:24px;}
	.ev_hub {width:60px; height:60px; margin:-30px 0 0 -30px; border-width:4px;}
	.ev_hub span {font-size:25px;}
	.ev_prizes {margin-top:40px; padding-top:26px;}
	.evp_list {gap:14px;}
	.evp_item {width:calc((100% - 28px) / 3);}
	.evr_pic {width:148px; height:148px;}
	.jp_layer {padding:3vh 4vw;}
	.jp_wrap {width:92vw; box-shadow:9px 9px 0 rgba(36,31,24,0.55);}
	.jp_slider .ss_nav {width:36px; height:36px;}
	.jp_slider .ss_prev {left:8px;}
	.jp_slider .ss_next {right:8px;}
	.gd_hand {margin-bottom:34px; font-size:20px;}
	.gd_how {margin-top:46px; padding:28px 20px;}
	.gdh_btn {padding:15px 26px; font-size:15px;}
	.sub_header .hg_list {gap:18px;}
	.ms_list {gap:22px;}
	.ms_item, .ms_item:only-child {flex:0 1 100%; max-width:100%;}
	.ms_btn {padding:10px 10px 12px; box-shadow:7px 7px 0 rgba(36,31,24,0.9);}
	.ms_hint {margin-top:20px; font-size:18px;}
	.ms_close {right:12px; top:12px; width:40px; height:40px;}
	.ms_close::before, .ms_close::after {left:10px; top:17px; width:16px;}
	.v_map {--ratio:100%; margin-top:26px;}
	.vir_hours b {min-width:64px; font-size:16px;}
	.vir_hours em {font-size:17px;}
	.sec {padding:76px 0;}
	#about {padding-top:86px;}
	#menu, #visit {padding:86px 0;}
	.sec > div, .f_wrap {max-width:88%;}
	.title.t2 {font-size:29px;}
	.txt {font-size:16px; line-height:29px;}
	.txt.big {font-size:17px; line-height:30px;}
	.het_logo em {font-size:15vw;}
	.het_sub {font-size:15px;}
	.he_title {top:13%;}
	.he_front {height:26%;}
	.a_point {flex-direction:column; gap:14px;}
	.ap_item {flex:none; width:100%; padding:28px 22px; box-shadow:7px 7px 0 rgba(36,31,24,0.9);}
	.s_list {gap:14px; padding-bottom:24px;}
	.ss_nav {display:none;}
	.sl_item {box-shadow:7px 7px 0 rgba(36,31,24,0.9);}
	.sli_pic::before {padding-top:62.5%;}	/* 16:10 */
	.sli_pic svg {width:38%;}
	html {scroll-snap-type:none;}
	.sec > .sv_veil {--lsc:2.4; --vshift:-215%;}
	#depth {display:none;}

	/* 폰에서는 예외 없이 이름이 한 줄을 다 쓰게 한다. 아래 기본 규칙만으로도
	   대부분 접히지만, 좁은 화면에서는 모든 줄이 같은 모양이어야 목록이
	   한 결로 읽힌다. */
	.mgli_name {font-size:16px; flex:1 0 100%;}
	.mgli_name span {display:block; margin:3px 0 0 0;}
	.mgli_row {gap:2px 10px;}
	.mgli_alc, .mgli_meter {margin-bottom:1px;}
	.mgli_meter {font-size:10.5px;}
	.mgli_row i {min-width:14px; margin:0 0 5px;}
	.mgli_desc {padding-right:0; font-size:12.5px;}
	.g_list {grid-template-columns:1fr; gap:20px;}
	.gl_item {box-shadow:7px 7px 0 rgba(36,31,24,0.85);}
	.gli_thumb {aspect-ratio:4/3;}
	.vi_row {flex-direction:column; gap:10px; padding:26px 0;}
	.vir_tit {width:auto;}
	.g_more, .v_btn {padding:16px 26px; font-size:15px;}
}

@media all and (max-width:480px) {
	.h_logo img {height:25px;}
	.het_logo img {width:min(74vw, calc(var(--vh) * 46));}
	.hl_btn {padding:5px 7px;}
	#header {padding:0 18px;}
	.h_logo span {font-size:14px;}
	.h_logo em {font-size:22px;}
	.sec > div, .f_wrap {max-width:86%;}
	.title.t2 {font-size:26px;}
	.het_eyebrow {font-size:11px; letter-spacing:0.24em; gap:10px;}
	.het_eyebrow i {width:26px;}
	.het_logo em {font-size:17vw;}
	.het_hand {font-size:19px;}
	.sli_note, .gli_cap, .m_hand, .v_hand {font-size:17px;}

	.f_logo img {height:38px;}
}
/* 좁고 납작한 창 : 제목 + 동물 + 잔을 세로로 다 담을 높이가 부족하다.
   전체를 한 단계씩 줄이고 수풀도 낮춰 잔이 묻히지 않게 한다. */
@media all and (max-width:768px) and (max-height:820px) {
	.het_logo img {width:min(56vw, calc(var(--vh) * 34));}
	.he_front {height:22%;}
	.hea_item.snake  {--w:13vw; bottom:38%;}
	.hea_item.lion   {--w:17vw; bottom:34%;}
	.hea_item.tiger  {--w:21vw; bottom:33%;}
	.hea_item.monkey {--w:15vw; bottom:34%;}
	.hea_item.toucan {--w:13vw; bottom:39%;}
	.hea_drink.d_snake  {--w:8vw; bottom:calc(38% - 11.2vw);}
	.hea_drink.d_lion   {--w:8vw; bottom:calc(34% - 10.9vw);}
	.hea_drink.d_tiger  {--w:8vw; bottom:calc(33% - 10.1vw);}
	.hea_drink.d_monkey {--w:8vw; bottom:calc(34% - 10.6vw);}
	.hea_drink.d_toucan {--w:8vw; bottom:calc(39% - 11.0vw);}
}

/* Responsive E */