/* =========================================================
   v2 — Bento Studio
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,p,ul,ol,li,dl,dd,dt,figure,button{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

:root{
  --bg:#f7f5f2;
  --surface:#fff;
  --surface-2:#efece7;
  --line:rgba(24,22,20,.09);
  --fg:#1a1815;
  --fg-2:rgba(26,24,21,.58);
  --fg-3:rgba(26,24,21,.34);
  --brand:#ff5b2e;
  --brand-soft:rgba(255,91,46,.11);
  --shadow:0 1px 2px rgba(24,22,20,.05),0 12px 30px -14px rgba(24,22,20,.16);
  --shadow-lg:0 30px 70px -22px rgba(24,22,20,.34);
  --r:22px;
  /* 라틴 글리프는 Outfit, 한글 글리프는 Pretendard 로 자동 폴백된다 */
  --sans:"Pretendard Variable",Pretendard,"Noto Sans KR",-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --display:"Outfit","Pretendard Variable",Pretendard,"Noto Sans KR",system-ui,sans-serif;
  --pad:clamp(16px,3.4vw,44px);
  --ease:cubic-bezier(.22,1,.36,1);
}
[data-theme="dark"]{
  --bg:#100f0e;
  --surface:#1a1917;
  --surface-2:#232120;
  --line:rgba(255,253,250,.1);
  --fg:#f4f1ec;
  --fg-2:rgba(244,241,236,.6);
  --fg-3:rgba(244,241,236,.36);
  --brand:#ff7a52;
  --brand-soft:rgba(255,122,82,.15);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -14px rgba(0,0,0,.6);
  --shadow-lg:0 30px 70px -22px rgba(0,0,0,.8);
  color-scheme:dark;
}

body{
  background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:15.5px;line-height:1.72;font-weight:400;
  letter-spacing:-.017em;overflow-x:hidden;
  transition:background .4s,color .4s;
  /* 한글을 부드럽게 — 안티에일리어싱 + 어절 단위 줄바꿈 */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  word-break:keep-all;
  overflow-wrap:break-word;
}
/* 다크 배경에서 얇은 획이 뭉개지지 않도록 스무딩을 되돌린다 */
[data-theme="dark"] body{-webkit-font-smoothing:subpixel-antialiased}
body.locked{overflow:hidden}

.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] .grain{opacity:.06}

/* ---------- 상단 바 ---------- */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:18px;
  margin:0 auto;padding:14px var(--pad);max-width:1500px;
}
.topbar::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.02em}
.brand-dot{width:9px;height:9px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.tabs{margin-left:auto}
.tabs ul{display:flex;gap:2px;padding:4px;background:var(--surface-2);border-radius:999px}
.tabs a{
  display:block;padding:7px 16px;border-radius:999px;
  font-size:13px;font-weight:400;color:var(--fg-2);
  transition:background .3s var(--ease),color .3s,box-shadow .3s;
}
.tabs a:hover{color:var(--fg)}
.tabs li.on a{background:var(--surface);color:var(--fg);font-weight:500;box-shadow:var(--shadow)}
.topbar-tools{display:flex;gap:8px;align-items:center}
.theme-btn,.menu-btn{
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:13px;background:var(--surface);
  transition:transform .25s var(--ease),background .3s;
}
.theme-btn:hover,.menu-btn:hover{transform:translateY(-2px)}
.theme-ico{
  width:15px;height:15px;border-radius:50%;
  background:var(--fg);
  box-shadow:inset -5px -3px 0 0 var(--surface);
  transition:box-shadow .4s var(--ease),transform .4s var(--ease);
}
[data-theme="dark"] .theme-ico{box-shadow:inset 0 0 0 0 var(--surface);transform:scale(.72)}
.menu-btn{display:none;flex-direction:column;gap:4px}
.menu-btn span{width:15px;height:1.5px;background:var(--fg);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}

/* ---------- 히어로 ---------- */
main{position:relative;z-index:2;max-width:1500px;margin:0 auto;padding:0 var(--pad)}
.hero{padding:clamp(44px,7vw,86px) 0 clamp(24px,3vw,34px)}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px 6px 10px;border-radius:999px;
  background:var(--brand-soft);color:var(--brand);
  font-size:11.5px;font-weight:500;letter-spacing:.02em;
}
.pulse{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 1.9s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.hero-title{
  font-family:var(--display);font-weight:600;
  font-size:clamp(33px,6.2vw,74px);line-height:1.04;letter-spacing:-.035em;
  margin-top:20px;max-width:19ch;word-break:keep-all;
}
.hero-title.has-kr{font-weight:700;line-height:1.18;letter-spacing:-.042em}
.hero-title .dim{color:var(--fg-3)}
.hero-sub{margin-top:18px;color:var(--fg-2);max-width:46ch;font-size:15px;letter-spacing:-.016em}
.hero-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.hero-stats li{
  padding:12px 20px;border-radius:16px;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.hero-stats b{display:block;font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.hero-stats span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3)}

/* ---------- 태그 필터 칩 ---------- */
.chipbar{display:flex;flex-wrap:wrap;gap:7px;padding-bottom:22px}
.chip{
  font-weight:450;letter-spacing:-.012em;
  padding:7px 15px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);font-size:12.5px;color:var(--fg-2);
  transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s;
}
.chip:hover{transform:translateY(-2px);color:var(--fg)}
.chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip i{font-style:normal;opacity:.5;margin-left:5px;font-size:11px}

/* ---------- 벤토 그리드 ---------- */
.bento{
  --row:260px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:var(--row);
  grid-auto-flow:dense;
  gap:clamp(10px,1.2vw,16px);
  padding-bottom:clamp(48px,8vw,110px);
}
.card{
  position:relative;overflow:hidden;
  border-radius:var(--r);background:var(--surface-2);
  border:1px solid var(--line);
  text-align:left;padding:0;
  width:100%;height:100%;
  box-shadow:var(--shadow);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  animation:pop .6s var(--ease) both;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.card.col-2{grid-column:span 2}
.card.row-2{grid-row:span 2}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}

.card-img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .8s var(--ease),filter .5s}
.card:hover .card-img{transform:scale(1.045)}
.card-veil{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,9,8,.82) 0%,rgba(10,9,8,.34) 34%,transparent 62%);
  opacity:0;transition:opacity .45s;
}
.card:hover .card-veil,.card:focus-visible .card-veil{opacity:1}
.card-cap{
  position:absolute;left:0;right:0;bottom:0;padding:18px 20px;
  color:#fff;transform:translateY(12px);opacity:0;
  transition:transform .5s var(--ease),opacity .4s;
}
.card:hover .card-cap,.card:focus-visible .card-cap{transform:none;opacity:1}
.card-cap h3{font-family:var(--display);font-size:16px;font-weight:500;letter-spacing:-.02em;line-height:1.3;word-break:keep-all}
.card-cap h3.has-kr{font-weight:600;letter-spacing:-.03em;line-height:1.44}
.card-cap p{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-top:5px}
.card-pin{
  position:absolute;top:12px;left:12px;
  padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.9);color:#1a1815;
  font-size:10px;font-weight:600;letter-spacing:.05em;
  backdrop-filter:blur(6px);
}
.card-ext{
  position:absolute;top:12px;right:12px;width:26px;height:26px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.9);color:#1a1815;font-size:12px;
  opacity:0;transform:scale(.7);transition:opacity .35s,transform .35s var(--ease);
}
.card:hover .card-ext{opacity:1;transform:none}

.empty{padding:70px 0;text-align:center;color:var(--fg-3)}

/* ---------- 프로필 ---------- */
.profile-bento{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.2vw,16px);padding-bottom:clamp(48px,8vw,110px);
}
.pcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.6vw,34px);box-shadow:var(--shadow);
  animation:pop .6s var(--ease) both;
}
.pcard-main{grid-column:span 2;display:grid;grid-template-columns:132px minmax(0,1fr);gap:26px;align-items:center}
.pcard-main img{width:100%;border-radius:18px;background:var(--surface-2)}
.pcard-main h2{font-family:var(--display);font-weight:600;font-size:clamp(23px,2.9vw,38px);line-height:1.16;letter-spacing:-.032em;word-break:keep-all}
.pcard-main h2.has-kr{font-weight:700;line-height:1.34;letter-spacing:-.042em}
.pcard-main h2 b{font-weight:700;color:var(--brand)}
.pcard-main h2 span{display:block}
.pcard-tel{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  padding:11px 20px;border-radius:999px;background:var(--fg);color:var(--bg);
  font-size:14px;font-weight:500;letter-spacing:.02em;
  transition:transform .25s var(--ease),background .3s;
}
.pcard-tel:hover{transform:translateY(-2px);background:var(--brand);color:#fff}
.pcard-role{
  display:grid;place-content:center;text-align:center;
  background:var(--brand);color:#fff;border-color:transparent;
}
.pcard-role b{display:block;font-family:var(--display);font-size:clamp(20px,2.2vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.2}
.pcard-role span{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.8;margin-top:8px;display:block}
.pcard-check strong{
  display:inline-block;font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand);
  padding:5px 12px;border-radius:999px;background:var(--brand-soft);margin-bottom:18px;
}
.pcard-check p span{display:block;font-size:15px;line-height:1.88;font-weight:400;letter-spacing:-.018em}

/* ---------- 푸터 ---------- */
.foot{
  position:relative;z-index:2;max-width:1500px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:24px var(--pad);border-top:1px solid var(--line);
  font-size:12px;color:var(--fg-3);
}
.foot-tel{font-weight:500;color:var(--fg-2)}
.foot-tel:hover{color:var(--brand)}

/* ---------- 드로어 ---------- */
.scrim{
  position:fixed;inset:0;z-index:50;
  background:rgba(12,11,10,.55);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .4s;
}
.scrim.on{opacity:1}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:51;
  width:min(50%,100%);
  display:flex;flex-direction:column;
  background:var(--bg);border-left:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  transform:translateX(101%);
  transition:transform .55s var(--ease);
}
.drawer.on{transform:none}
.drawer-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.drawer-count{font-family:var(--display);font-size:12px;letter-spacing:.1em;color:var(--fg-3);font-variant-numeric:tabular-nums}
.drawer-nav{display:flex;gap:6px}
.drawer-nav button{
  width:34px;height:34px;border-radius:11px;border:1px solid var(--line);
  background:var(--surface);font-size:13px;
  transition:background .25s,transform .25s var(--ease),opacity .25s;
}
.drawer-nav button:hover:not(:disabled){background:var(--fg);color:var(--bg);transform:translateY(-2px)}
.drawer-nav button:disabled{opacity:.28;cursor:default}
.drawer-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:18px}
.drawer-shot{border-radius:18px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line)}
.drawer-shot img{width:100%}
.drawer-info{padding:24px 4px 40px}
.drawer-title{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.5vw,28px);line-height:1.22;letter-spacing:-.03em;word-break:keep-all}
.drawer-title.has-kr{font-weight:700;line-height:1.38;letter-spacing:-.04em}
.drawer-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.drawer-tags li{
  padding:4px 11px;border-radius:999px;background:var(--brand-soft);
  color:var(--brand);font-size:11px;font-weight:500;
}
.drawer-tags:empty{display:none}
.drawer-meta{margin-top:22px}
.drawer-meta div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}
.drawer-meta dt{color:var(--fg-3);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.drawer-meta dd{color:var(--fg-2);text-align:right;word-break:break-all}
.btn-live{
  display:inline-flex;align-items:center;gap:8px;margin-top:24px;
  padding:13px 22px;border-radius:999px;background:var(--brand);color:#fff;
  font-size:13.5px;font-weight:500;
  transition:transform .25s var(--ease),filter .25s;
}
.btn-live:hover{transform:translateY(-2px);filter:brightness(1.07)}
.btn-live[hidden]{display:none}

/* ---------- 반응형 ---------- */
@media (max-width:1100px){
  .bento{grid-template-columns:repeat(3,minmax(0,1fr))}
  .profile-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pcard-main{grid-column:span 2}
}
@media (max-width:820px){
  .menu-btn{
      display:flex;
      justify-content: center;
  }
  .tabs{
    position:fixed;left:var(--pad);right:var(--pad);top:70px;
    margin:0;padding:0;
    transform:translateY(-125%);opacity:0;pointer-events:none;
    transition:transform .45s var(--ease),opacity .3s;
  }
  body.open-menu .tabs{transform:none;opacity:1;pointer-events:auto}
  body.open-menu .menu-btn span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  body.open-menu .menu-btn span:nth-child(2){opacity:0}
  body.open-menu .menu-btn span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
  .tabs ul{
    flex-direction:column;gap:2px;padding:8px;
    border-radius:20px;background:var(--surface);
    border:1px solid var(--line);box-shadow:var(--shadow-lg);
  }
  .tabs a{padding:12px 16px;border-radius:14px;font-size:15px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile-bento{grid-template-columns:1fr}
  .pcard-main{grid-column:span 1;grid-template-columns:104px minmax(0,1fr);gap:18px}
  .drawer{width:100%;border-left:0}
}
@media (max-width:520px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card.row-2{grid-row:span 1}
  .pcard-main{grid-template-columns:1fr}
  .pcard-main img{width:104px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}