/* ============ B · 온 아이보리 (모던·Warm) ============ */
:root{
  --bg:#f4efe4; --bg2:#fbf8f1; --bg3:#ece5d5; --line:#e3dccb; --line2:#d9d1bd;
  --ink:#2b2724; --ink2:#5c554c; --mute:#8f877a;
  --accent:#8a5a2b; --accent2:#5f7a6a; --dark:#2b2724;
  --serif:'Nanum Myeongjo',serif; --sans:'Noto Sans KR',sans-serif; --lat:'Cormorant Garamond',serif;
  --head:80px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;overflow:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;line-height:1.25}
p{margin:0}
.eyebrow{font:500 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.tag{font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.lead{font-size:17px;line-height:1.9;color:var(--ink2);max-width:540px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 28px;border:1.5px solid var(--dark);border-radius:999px;color:var(--dark);font-size:14px;font-weight:500;letter-spacing:.04em;background:transparent;cursor:pointer;font-family:inherit;transition:.25s}
.btn:hover{background:var(--dark);color:var(--bg)}
.btn.solid{background:var(--dark);color:var(--bg)}
.btn.solid:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.link{background:none;border:0;border-bottom:1.5px solid var(--line2);color:var(--ink);font-family:inherit;font-size:14px;font-weight:500;padding:4px 0;cursor:pointer}
.link:hover{border-color:var(--accent);color:var(--accent)}

/* ---- 인트로 모션 ---- */
.intro{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .9s ease,visibility .9s}
.intro.is-done{opacity:0;visibility:hidden}
.intro-orb{position:absolute;width:820px;height:820px;border-radius:50%;background:radial-gradient(circle,#e7d9bd 0%,#f4efe4 64%);animation:orb 3s cubic-bezier(.2,.7,.2,1) both}
.intro-eyebrow{position:relative;font:500 13px var(--sans);letter-spacing:.3em;color:var(--accent);animation:fadeup 1s .3s both}
.intro-title{position:relative;display:flex;flex-direction:column;align-items:center;font-size:clamp(48px,7vw,92px);line-height:1.12;letter-spacing:-.02em}
.intro-title span{animation:fadeup 1.1s cubic-bezier(.2,.7,.2,1) both}
.intro-title span:nth-child(1){animation-delay:.7s}.intro-title span:nth-child(2){animation-delay:1.1s}
.intro-rule{position:relative;width:180px;height:2px;background:var(--accent);transform-origin:left;animation:wide 1.4s 1.8s cubic-bezier(.2,.7,.2,1) both}
.intro-sub{position:relative;font:400 14px var(--lat);letter-spacing:.34em;color:var(--mute);animation:fadeup 1s 2.6s both}
.intro-skip{position:absolute;right:40px;bottom:36px;background:none;border:1.5px solid var(--line2);border-radius:999px;color:var(--mute);padding:10px 20px;font-family:inherit;font-size:13px;letter-spacing:.08em;cursor:pointer;animation:fadeup 1s 1.5s both}
.intro-skip:hover{border-color:var(--dark);color:var(--dark)}
@keyframes orb{0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:scale(1)}}
@keyframes fadeup{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes wide{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- 헤더 / 탭 ---- */
.top{position:fixed;top:0;left:0;right:0;height:var(--head);z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 56px;background:rgba(244,239,228,.9);border-bottom:1px solid var(--line)}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-text b{font-family:var(--serif);font-size:24px;font-weight:800;letter-spacing:.2em}
.brand-text small{font:400 12px var(--lat);letter-spacing:.34em;color:var(--accent)}
.tabs{display:flex;gap:6px}
.tabs a{padding:10px 18px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink2);border:1px solid transparent;transition:.25s}
.tabs a:hover{border-color:var(--line2);color:var(--ink)}
.tabs a.is-on{background:var(--dark);color:var(--bg)}
.menu-btn{display:none;background:none;border:1.5px solid var(--line2);border-radius:999px;color:var(--ink);font-family:inherit;padding:8px 16px;font-size:13px}

/* ---- 무대 ---- */
.stage{position:absolute;top:var(--head);left:0;right:0;bottom:40px}
.panel{position:absolute;inset:0;padding:48px 56px;display:none;overflow:auto}
.panel.is-on{display:block;animation:panel .6s cubic-bezier(.2,.7,.2,1) both}
.panel.from-left.is-on{animation-name:panelL}
@keyframes panel{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes panelL{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.foot{position:fixed;left:0;right:0;bottom:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 56px;font:400 12px var(--lat);letter-spacing:.2em;color:var(--mute);border-top:1px solid var(--line);background:var(--bg)}

/* HOME */
.home-grid{height:100%;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);grid-template-rows:1fr auto;gap:32px 64px;align-items:center}
.home-copy{display:flex;flex-direction:column;gap:28px;max-width:620px}
.home-copy h1{font-size:clamp(44px,5.6vw,78px);line-height:1.12;letter-spacing:-.02em}
.home-copy h1::after{content:"";display:block;width:140px;height:2px;background:var(--accent);margin-top:26px;transform-origin:left;animation:wide 1.4s .6s cubic-bezier(.2,.7,.2,1) both}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.home-art{display:flex;flex-direction:column;gap:12px;height:100%;justify-content:center}
.home-photo{height:min(58vh,520px);background:linear-gradient(160deg,#d9c6a4,#b8955f 60%,#8a5a2b);border-radius:4px;display:flex;align-items:flex-end;padding:22px;color:#fbf8f1;font-size:12px;letter-spacing:.12em;animation:fadeup 1.2s .4s both}
.home-caption{display:flex;justify-content:space-between;font:400 13px var(--lat);letter-spacing:.2em;color:var(--accent)}
.home-stats{grid-column:1/-1;list-style:none;margin:0;padding:22px 0 0;border-top:1px solid var(--line2);display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.home-stats b{display:block;font-family:var(--serif);font-size:38px;line-height:1;font-weight:400}
.home-stats span{display:block;margin-top:8px;font-size:13px;color:var(--ink2)}

.step-head{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.step-head h2{font-size:clamp(28px,3vw,42px)}

/* STORY 스테퍼 */
.stepper{display:grid;grid-template-columns:56px 1fr 56px;gap:20px;align-items:center;height:calc(100% - 190px);min-height:380px}
.step-nav{height:56px;border:1.5px solid var(--line2);border-radius:999px;background:var(--bg2);color:var(--ink2);font-size:20px;cursor:pointer;font-family:inherit;transition:.2s}
.step-nav:hover{border-color:var(--dark);color:var(--dark)}
.step-track{position:relative;height:100%;background:var(--bg2);border:1px solid var(--line);border-radius:6px}
.step{position:absolute;inset:0;display:grid;grid-template-columns:180px 1fr 1fr;gap:40px;padding:48px;align-items:center;opacity:0;visibility:hidden;transform:translateX(40px);transition:.6s cubic-bezier(.2,.7,.2,1)}
.step.is-past{transform:translateX(-40px)}
.step.is-on{opacity:1;visibility:visible;transform:none}
.step-year{font-family:var(--serif);font-size:clamp(48px,5vw,76px);line-height:1}
.step-year.now{color:var(--accent)}
.step-body{display:flex;flex-direction:column;gap:18px;justify-content:center}
.step-body h3{font-size:clamp(22px,2.2vw,30px);font-weight:700}
.step-body p{font-size:16px;line-height:1.9;color:var(--ink2)}
.step-art{display:flex;align-items:flex-end;padding:18px;font-size:12px;letter-spacing:.12em;color:#fbf8f1;border-radius:4px}
.art-busan{background:linear-gradient(160deg,#c9a57a,#8a5a2b)}
.art-daegu{background:linear-gradient(160deg,#8fa397,#5f7a6a)}
.art-yunnan{background:linear-gradient(160deg,#d9c6a4,#b8955f)}
.art-seoul{background:linear-gradient(160deg,#b8a992,#7a6b57)}
.art-now{background:linear-gradient(160deg,#4a443c,#2b2724)}
.step-dots{list-style:none;margin:22px 0 0;padding:0;display:flex;justify-content:center;gap:8px}
.step-dots button{background:none;border:1.5px solid var(--line2);border-radius:999px;color:var(--mute);font:500 13px var(--sans);padding:8px 18px;cursor:pointer;transition:.2s}
.step-dots li.is-on button,.step-dots button:hover{background:var(--dark);border-color:var(--dark);color:var(--bg)}

/* MOUNTAIN 병렬 컬럼 */
.columns{display:flex;gap:14px;height:calc(100% - 110px);min-height:380px}
.col{flex:1;display:flex;flex-direction:column;gap:18px;padding:40px 34px;border:1px solid var(--line);border-radius:6px;background:var(--bg2);cursor:pointer;transition:flex .6s cubic-bezier(.2,.7,.2,1),background .3s;overflow:hidden}
.col.is-on{flex:2.2;background:var(--dark);color:var(--bg);border-color:var(--dark)}
.col-num{font:500 13px var(--sans);letter-spacing:.3em;color:var(--accent)}
.col.is-on .col-num{color:#d9b98a}
.col h3{font-size:clamp(26px,2.6vw,36px);display:flex;flex-direction:column;gap:8px}
.col h3 small{font-family:var(--sans);font-size:14px;font-weight:300;color:var(--mute);letter-spacing:.04em}
.col.is-on h3 small{color:#cfc6b4}
.col-more{opacity:0;transform:translateY(16px);transition:.5s .15s;display:flex;flex-direction:column;gap:14px;margin-top:auto}
.col.is-on .col-more{opacity:1;transform:none}
.col-more p{font-size:15px;line-height:1.85;color:#cfc6b4}
.col-more ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.col-more li{border:1px solid #4a443c;border-radius:999px;padding:7px 14px;font-size:13px;color:#e6dfd0}

/* COLLECTION */
.shop{display:grid;grid-template-columns:300px 1fr;gap:48px;height:100%}
.shop-side{display:flex;flex-direction:column;gap:18px}
.shop-side h2{font-size:36px}
.filters{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.filters button{text-align:left;background:var(--bg2);border:1px solid var(--line);border-radius:999px;color:var(--ink2);padding:12px 18px;font-family:inherit;font-size:14px;cursor:pointer;transition:.2s}
.filters button:hover{border-color:var(--dark);color:var(--ink)}
.filters button.is-on{background:var(--dark);border-color:var(--dark);color:var(--bg)}
.side-note{font-size:13px;line-height:1.8;color:var(--mute)}
.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-content:start;overflow:auto;padding-right:4px}
.item{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--line);border-radius:6px;background:var(--bg2);transition:.25s;animation:fadeup .5s both}
.item:hover{border-color:var(--accent);box-shadow:0 10px 30px rgba(43,39,36,.06)}
.item.is-hidden{display:none}
.item h3{font-size:19px;font-weight:700}
.meta{font-size:13px;color:var(--mute)}
.row{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.price{font-size:14px;font-weight:500}
.cake{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#a88c5c 0 9%,#e6dcc6 9.5% 10.5%,#c9b48b 11% 48%,#b39a6c 48.5% 50%,#c9b48b 50.5% 100%);margin:0 auto}
.cake.small{width:110px;height:110px}
.cake.big{width:220px;height:220px}

/* CLASS */
.class-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:56px;align-items:center;height:100%}
.class-copy{display:flex;flex-direction:column;gap:20px}
.class-copy h2{font-size:clamp(24px,2.4vw,34px);line-height:1.4}
.class-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.class-cards article{display:flex;flex-direction:column;gap:12px;padding:28px;border:1px solid var(--line);border-radius:6px;background:var(--bg2)}
.class-cards article:hover{border-color:var(--accent)}
.class-cards h3{font-size:20px;font-weight:700}
.class-cards p{font-size:14px;line-height:1.8;color:var(--ink2);flex:1}
.class-cards .btn{align-self:flex-start;min-height:40px;padding:0 18px}
.tea-party{background:var(--dark)!important;color:var(--bg);border-color:var(--dark)!important}
.tea-party p{color:#cfc6b4}
.tea-party .tag{color:#d9b98a}
.tea-party .btn.solid{background:var(--bg);color:var(--dark);border-color:var(--bg)}

/* ORIGIN */
.origin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;height:calc(100% - 110px);min-height:380px}
.place{display:grid;grid-template-rows:1fr auto auto auto auto;gap:12px;padding:28px;border:1px solid var(--line);border-radius:6px;background:var(--bg2)}
.place-art{display:flex;align-items:flex-end;padding:16px;font-size:12px;letter-spacing:.12em;color:#fbf8f1;border-radius:4px;min-height:160px}
.place h3{font-size:32px;font-weight:700}
.place p{font-size:15px;line-height:1.85;color:var(--ink2)}
.hours{color:var(--accent)!important;font-size:13px!important;font-weight:500}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;height:100%}
.contact-grid h2{font-size:clamp(26px,2.6vw,38px);margin:14px 0 18px}
.contact-list{display:grid;grid-template-columns:70px 1fr;gap:10px 16px;margin:28px 0 0;font-size:15px;color:var(--ink2)}
.contact-list dt{font:500 12px var(--sans);letter-spacing:.2em;color:var(--accent)}
.contact-list dd{margin:0}
.form{display:flex;flex-direction:column;gap:14px;padding:36px;border:1px solid var(--line);border-radius:8px;background:var(--bg2)}
.form label{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--mute);letter-spacing:.04em}
.form input,.form select,.form textarea{background:#fff;border:1px solid var(--line2);border-radius:4px;color:var(--ink);font-family:inherit;font-size:15px;padding:12px 14px;min-height:46px}
.form textarea{min-height:100px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--dark)}
.form .btn{align-self:flex-start;margin-top:6px}

/* 드로어 */
.drawer{position:fixed;top:0;right:0;bottom:0;width:420px;z-index:40;background:var(--bg2);border-left:1px solid var(--line);padding:48px 40px;display:flex;flex-direction:column;gap:18px;transform:translateX(100%);transition:.5s cubic-bezier(.2,.7,.2,1)}
.drawer.is-on{transform:none}
.drawer h3{font-size:28px;font-weight:700}
.drawer p{font-size:15px;line-height:1.85;color:var(--ink2)}
.drawer-close{align-self:flex-end;background:none;border:1.5px solid var(--line2);border-radius:999px;color:var(--mute);padding:8px 16px;font-family:inherit;font-size:13px;cursor:pointer}
.scrim{position:fixed;inset:0;z-index:30;background:rgba(43,39,36,.35);opacity:0;visibility:hidden;transition:.4s}
.scrim.is-on{opacity:1;visibility:visible}

/* ---- 반응형 ---- */
@media (max-width:1100px){
  .home-grid{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .home-photo{height:220px}
  .home-stats{grid-template-columns:repeat(2,1fr)}
  .step{grid-template-columns:120px 1fr}
  .step-art{display:none}
  .shop{grid-template-columns:1fr}
  .shop-grid{grid-template-columns:repeat(2,1fr)}
  .class-grid,.contact-grid,.origin-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{overflow:auto}
  .top{padding:0 20px}
  .tabs{display:none;position:absolute;top:var(--head);left:0;right:0;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--line);padding:10px 20px 20px}
  .menu-open .tabs{display:flex}
  .menu-btn{display:block}
  .top{position:sticky}
  .stage{position:static}
  .panel{position:static;padding:24px 20px;min-height:calc(100vh - 120px)}
  .columns{flex-direction:column;height:auto}
  .col.is-on{flex:1}
  .stepper{grid-template-columns:1fr;height:auto}
  .step-track{height:auto;min-height:420px}
  .step{position:relative;grid-template-columns:1fr;padding:24px;display:none}
  .step.is-on{display:grid}
  .step-nav{display:none}
  .step-dots{flex-wrap:wrap}
  .shop-grid{grid-template-columns:1fr}
  .class-cards{grid-template-columns:1fr}
  .drawer{width:100%}
  .foot{display:none}
  .home-stats{grid-template-columns:1fr 1fr}
}

/* ---- 사진 (임시) ---- */
.ph{filter:sepia(.18) saturate(.85) contrast(1.03)}
figure{margin:0}
.step-art,.place-art,.class-art,.home-photo{position:relative;overflow:hidden;padding:0;border-radius:4px;background:#ddd}
.step-art img,.place-art img,.class-art img,.home-photo img{display:block;width:100%;height:100%;object-fit:cover}
.step-art figcaption,.place-art figcaption,.class-art figcaption,.home-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;font-size:12px;letter-spacing:.1em;color:#fbf8f1;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.55))}
.step-art{min-height:300px}
.class-art{height:230px;margin-top:8px}
.col{position:relative}
.col>*{position:relative;z-index:1}
.col-bg{position:absolute!important;inset:0;z-index:0!important;background-size:cover;background-position:center;opacity:.18;filter:sepia(.3) saturate(.7);transition:.7s;transform:scale(1.04)}
.col.is-on .col-bg{opacity:.5;filter:sepia(.3) saturate(.7) brightness(.55);transform:none}
.col::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(to top,rgba(251,248,241,.96) 30%,rgba(251,248,241,.3) 70%,rgba(251,248,241,0))}
.col.is-on::after{background:linear-gradient(to top,rgba(43,39,36,.96) 30%,rgba(43,39,36,.35) 70%,rgba(43,39,36,.1))}
img.cake{display:block;width:150px;height:150px;border-radius:50%;object-fit:cover;margin:0 auto;background:none;box-shadow:0 6px 20px rgba(43,39,36,.12)}
img.cake.small{width:110px;height:110px}
img.cake.big{width:220px;height:220px}

/* ---- UX 재검토 반영 ---- */
body{font-weight:400}
.skip{position:absolute;left:-9999px;top:8px;z-index:60;background:var(--dark);color:var(--bg);padding:10px 16px;font-size:14px;border-radius:999px}
.skip:focus{left:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tabs a:focus-visible{outline-offset:2px}
button,.col,.item .link,.filters button,.step-dots button{cursor:pointer}
.step-nav:disabled{opacity:.3;cursor:default}
.step-nav:disabled:hover{border-color:var(--line2);color:var(--ink2);background:var(--bg2)}
.step-meta{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;margin-top:18px;font:500 12px var(--sans);letter-spacing:.14em;color:var(--mute)}
.step-bar{display:block;height:2px;background:var(--line2);position:relative;border-radius:2px}
.step-bar i{position:absolute;left:0;top:0;height:2px;background:var(--dark);transition:width .5s cubic-bezier(.2,.7,.2,1);width:20%;border-radius:2px}
.step-dots{margin-top:14px}
.hint{font-size:13px;color:var(--mute)}
.col{outline-offset:-3px}
.col::before{content:"+";position:absolute;right:26px;top:34px;z-index:1;font:300 28px var(--lat);color:var(--accent);transition:.3s}
.col.is-on::before{color:#d9b98a;transform:rotate(45deg);opacity:.7}
.req{color:#9c3b2e}
.form .is-bad{border-color:#9c3b2e!important}
.form-msg{font-size:13px;line-height:1.7;min-height:1.7em;color:var(--mute)}
.form-msg.is-error{color:#9c3b2e}
.form-msg.is-ok{color:var(--accent2)}
.drawer-open .stage{filter:blur(2px)}
.menu-btn[aria-expanded="true"]{background:var(--dark);color:var(--bg);border-color:var(--dark)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .intro{display:none}
}
@media (max-width:1100px) and (min-width:761px){
  .top{padding:0 28px;gap:12px}
  .tabs{gap:2px}
  .tabs a{font-size:13px;padding:8px 12px}
  .brand-text small{display:none}
}