/* =========================================================
   건물관리 달인명인 공통 스타일
   - 색상 / 간격은 :root 변수에서 한 번에 바꿉니다
   ========================================================= */
:root{
  --red:#E3000F; --red-dark:#B8000C; --red-deep:#7E0008; --red-soft:#FFF1F1;
  --yellow:#FFE600; --yellow-dark:#F2CF00;
  /* 고급형 메뉴판: 아이보리 + 명조 */
  --ivory:#EFE8DC; --ivory-dim:#A9A196; --serif:'Noto Serif KR','Nanum Myeongjo','AppleMyungjo',serif;
  --ink:#16181D; --ink-2:#4A4F5A; --ink-3:#8A909C;
  --line:#E7E9EE; --bg:#FFFFFF; --bg-2:#F6F7F9; --night:#111317;
  --radius:16px; --shadow:0 10px 30px rgba(22,24,29,.08);
  --ease:cubic-bezier(.65,.05,.25,1);
  --wrap:1180px; --hd:68px;
  /* 방화문 */
  --door-1:#D2000E; --door-2:#A1000B; --door-3:#6E0007; --steel:#C9CDD4;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + 56px)}
html{color-scheme:light}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:90;background:#fff}
body{font-family:'Noto Sans KR',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;word-break:keep-all;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.r{color:var(--red)}
.skip{position:absolute;left:-999px;top:8px;z-index:999;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:46px;padding:0 20px;border-radius:12px;font-weight:700;font-size:15px;transition:.15s;white-space:nowrap}
.btn.sm{height:38px;padding:0 14px;font-size:13.5px;border-radius:10px}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-dark)}
.btn-ghost{border:1.5px solid var(--line);color:var(--ink);background:#fff}.btn-ghost:hover{border-color:var(--ink)}
.btn-y{background:var(--ink);color:#fff}
.btn-w{background:#fff;color:var(--red)}
.hot{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;background:var(--red);color:#fff;font-style:normal;font-size:10.5px;font-weight:900;letter-spacing:.5px;vertical-align:2px}

/* ---------------------------------------------------------- header */
.hd{position:sticky;top:env(safe-area-inset-top,0px);z-index:80;height:var(--hd);background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:28px;height:100%}
/* ---- 로고: C형 배지 + 워드마크 (D형 헤더 배치) ---- */
.logo{display:flex;align-items:center;gap:10px;flex:none}
.badge-c{--bc:#1B1E24;position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:var(--bc);color:#fff;flex:none;line-height:1}
.badge-c .roof{width:62%;height:auto;margin-top:-2px}
.badge-c b{font-size:14px;font-weight:900;letter-spacing:-.5px;margin-top:3px}
.badge-c.big{width:168px;height:168px;border-radius:40px;padding:18px}
.badge-c.big .roof{width:70%;margin-top:0}
.badge-c.big b{font-size:46px;letter-spacing:-1.5px;margin-top:8px}
.bc-sub{margin-top:10px;font-size:13px;font-weight:700;color:#D5D8DE;white-space:nowrap}
.bc-sub i{font-style:normal;color:var(--red);margin:0 2px}
.logo-word{display:inline-grid;align-content:center;height:46px;padding-left:12px;border-left:1px solid var(--line);white-space:nowrap}
.logo-word>span{display:block;text-align:justify;text-align-last:justify;line-height:1.15}
.lw1{font-size:19px;font-weight:800;letter-spacing:.02em;color:var(--ink)}
.lw2{display:flex!important;justify-content:space-between;font-size:19px;font-weight:900;color:var(--red)}
.lw2 i{font-style:normal}
.ft .logo-word{border-color:#2F333B}.ft .lw1{color:#fff}.ft .lw2{color:#FF3B47}
.ft .badge-c{--bc:#2A2E36;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}

/* ---- A형 엠블럼 락업 ---- */
.emblem-a{width:64px;height:auto;color:var(--ink);flex:none}
.lockup-a{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.lockup-a>div{display:flex;flex-direction:column;line-height:1.1}
.la-k{font-size:15px;font-weight:700}
.lockup-a strong{font-size:34px;font-weight:900;letter-spacing:-1.5px;color:var(--red)}
.la-en{margin-top:6px;font-size:10.5px;letter-spacing:.32em;color:var(--ink-3);font-weight:500}

/* ---- B형 낙관(도장) ---- */
.seal-b{display:flex;align-items:center;gap:16px;flex:none}
.seal{display:grid;grid-template-columns:1fr 1fr;width:76px;height:76px;padding:6px;border-radius:12px;background:var(--red);box-shadow:inset 0 0 0 3px var(--red),inset 0 0 0 5px #fff;transform:rotate(-4deg)}
.seal i{display:grid;place-items:center;font-style:normal;color:#fff;font-size:24px;font-weight:900;line-height:1}
.seal-b strong{display:block;font-size:26px;font-weight:900;letter-spacing:-1px}
.sb-sub{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:14px;font-weight:700}
.sb-sub::before{content:"";width:22px;height:3px;background:var(--red)}
.band .seal{background:#fff;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px var(--red)}
.band .seal i{color:var(--red)}
.band .seal-b>div{display:none}
.story-brand{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:28px 48px;padding:26px 28px;border:1px dashed #E5C9CB;border-radius:18px;background:#fff}
.story-brand .lockup-a{margin:0}
.gnb{height:100%}
.nav{display:flex;list-style:none;height:100%}
.nav-i{height:100%}
.nav-top{display:flex;align-items:center;height:100%;padding:0 18px;font-weight:700;font-size:16px;position:relative}
.nav-top::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:3px;background:var(--red);transform:scaleX(0);transition:transform .3s var(--ease)}
.nav-i:hover .nav-top::after,.nav-i:focus-within .nav-top::after,.nav-top[aria-current]::after{transform:scaleX(1)}
.nav-i.is-story .nav-top{color:var(--ink-2);font-weight:900;letter-spacing:.5px}
.gnb-foot{display:none}
.hd-cta{margin-left:auto;display:flex;gap:10px;align-items:center}
.tel{font-weight:900;font-size:18px;color:var(--red);letter-spacing:-.5px}
.menu-btn{display:none;margin-left:auto;width:44px;height:44px}
.menu-btn span{display:block;width:22px;height:2px;background:var(--ink);margin:5px auto;border-radius:2px;transition:.25s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 메가 메뉴: 방화문 두 짝이 좌우로 열리며 하위 메뉴가 나타남 */
.mega{position:absolute;left:0;right:0;top:var(--hd);visibility:hidden;pointer-events:none;overflow:hidden;background:#fff;box-shadow:0 24px 40px -20px rgba(22,24,29,.25);border-top:1px solid var(--line);transition:visibility 0s .55s}
.m-leaf{position:absolute;top:0;bottom:0;width:50.2%;z-index:2;background:linear-gradient(180deg,var(--door-1),var(--door-2));transition:transform .55s var(--ease)}
.m-leaf.l{left:0;box-shadow:inset -3px 0 0 rgba(0,0,0,.18)}
.m-leaf.r{right:0;box-shadow:inset 3px 0 0 rgba(255,255,255,.12)}
.mega-in{max-width:var(--wrap);margin:0 auto;padding:30px 20px 34px;display:grid;grid-template-columns:280px 1fr;gap:36px;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.nav-i:hover .mega,.nav-i:focus-within .mega,.nav-i.open .mega{visibility:visible;pointer-events:auto;transition:visibility 0s}
.nav-i:hover .m-leaf.l,.nav-i:focus-within .m-leaf.l,.nav-i.open .m-leaf.l{transform:translateX(-101%)}
.nav-i:hover .m-leaf.r,.nav-i:focus-within .m-leaf.r,.nav-i.open .m-leaf.r{transform:translateX(101%)}
.nav-i:hover .mega-in,.nav-i:focus-within .mega-in,.nav-i.open .mega-in{opacity:1;transform:none;transition:opacity .4s .25s,transform .4s .25s}
.m-intro{display:flex;flex-direction:column;gap:6px;padding:24px;border-radius:18px;background:var(--night);color:#fff;position:relative;overflow:hidden}
.m-intro::after{content:"";position:absolute;inset:8px;border:1px solid rgba(239,232,220,.18);border-radius:12px;pointer-events:none}
.m-ic{width:30px;height:30px;color:var(--ivory-dim)}
.m-no{font-size:12px;letter-spacing:2px;color:#AEB3BE;margin-top:6px}
.m-intro strong{font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:.04em;color:#FBF7F0}
.m-q{font-family:var(--serif);font-size:14px;color:var(--ivory)}
.m-go{margin-top:10px;font-size:11.5px;font-weight:700;letter-spacing:.28em;color:var(--ivory)}
.m-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:6px 18px;align-content:start}
.m-list a{display:block;padding:12px 14px;border-radius:12px;transition:.15s}
.m-list a:hover{background:var(--red-soft)}
.m-list b{display:block;font-family:var(--serif);font-size:16.5px;font-weight:600;letter-spacing:.02em}
.m-list a:hover b{color:var(--red)}
.m-list small{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}

/* ---------------------------------------------------------- 방화문 공통 부품 */
.win{position:absolute;left:28%;right:28%;top:12%;height:20%;border-radius:4px;background:
  repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 1px,transparent 1px 9px),
  repeating-linear-gradient(-45deg,rgba(255,255,255,.18) 0 1px,transparent 1px 9px),
  linear-gradient(180deg,#3B4048,#22262C);box-shadow:inset 0 0 0 3px var(--steel)}
.bar{position:absolute;left:10%;right:10%;top:56%;height:12px;border-radius:6px;background:linear-gradient(180deg,#F1F3F6,#A9AEB7);box-shadow:0 3px 6px rgba(0,0,0,.35)}

/* ---------------------------------------------------------- 1. 인트로 (스크롤로 문 열기) */
/* 무대 높이: 화면 높이를 따르되 최대 820px (세로로 긴 화면에서 위아래 빈 공간 방지)
   전체 높이 = 무대 + 문 여는 스크롤 구간(65vh) */
.intro{--stage:min(calc(100vh - var(--hd)),760px);position:relative;height:calc(var(--stage) + 65vh);background:#fff}
.stage{position:sticky;top:var(--hd);height:var(--stage);overflow:hidden;perspective:1800px}
/* 세로로 긴 화면(모니터 세로·브라우저 축소): 문을 고정하지 않고 스크롤하며 열림 → 문 아래 빈 공간 없음 */
@media (min-height:940px){.intro{height:var(--stage)}.stage{position:relative;top:0}}
.hero-in{position:absolute;inset:0;display:flex;align-items:center;background:
  linear-gradient(180deg,rgba(255,255,255,0) 60%,#fff 100%),
  repeating-linear-gradient(0deg,transparent 0 47px,#F0F1F4 47px 48px),
  repeating-linear-gradient(90deg,transparent 0 47px,#F0F1F4 47px 48px),#fff;
  transform:scale(var(--hs,1));opacity:var(--ho,1);will-change:transform}
.hero-in .wrap{width:100%;text-align:center}
.badge{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:var(--red-soft);color:var(--red);font-size:13px;font-weight:700;border:1px solid #FFD6D6}
.formula{margin-top:20px;font-size:clamp(22px,3.2vw,36px);font-weight:700;letter-spacing:-1px;line-height:1.35}
.formula .plus{color:var(--ink-3);font-weight:400;margin:0 4px}
.formula b{color:var(--red);font-weight:900}
.headline{position:relative;z-index:0;margin-top:4px;font-size:clamp(50px,8.4vw,104px);font-weight:900;letter-spacing:-3px;line-height:1.08}
.headline .r{position:relative;white-space:nowrap}
.headline .r::after{content:"";position:absolute;left:2%;right:2%;bottom:6px;height:5px;background:var(--red);opacity:.22;z-index:-1;border-radius:3px}
.sub{margin:18px auto 0;font-size:17px;color:var(--ink-2);max-width:600px}
.choice{margin:30px auto 0;display:grid;grid-template-columns:1fr 1.15fr;gap:12px;max-width:640px;text-align:left}
.choice a{position:relative;display:block;border-radius:var(--radius);padding:20px 22px;transition:.15s}
.choice .c-cost{background:#fff;border:1.5px solid var(--line)}
.choice .c-cost:hover{border-color:var(--ink)}
.choice .c-fix{background:var(--ink);color:#fff;box-shadow:0 14px 28px -12px rgba(22,24,29,.55)}
.choice .c-fix .r{color:#FF3B47}
.choice .c-fix:hover{transform:translateY(-2px)}
.choice .t{display:block;font-size:22px;font-weight:900;letter-spacing:-.8px}
.choice .d{display:block;font-size:14px;color:var(--ink-2);margin-top:4px}
.choice .c-fix .d{color:#C5C9D1}
.choice .go{position:absolute;right:18px;top:20px;font-weight:900}
.reco{position:absolute;top:-11px;left:18px;background:var(--red);color:#fff;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px}
.to-doors{display:inline-block;margin-top:26px;font-size:14px;font-weight:700;color:var(--ink-2);border-bottom:1px solid var(--ink-3)}

.dl{position:absolute;top:0;bottom:0;width:50.2%;z-index:3;background:
  linear-gradient(90deg,rgba(0,0,0,.12),transparent 8%,transparent 92%,rgba(0,0,0,.15)),
  linear-gradient(180deg,var(--door-1),var(--door-2) 60%,var(--door-3));will-change:transform}
.dl{filter:brightness(calc(1 - var(--p,0) * .45))}
.dl.l{left:0;transform-origin:0 50%;transform:rotateY(calc(var(--p,0) * -108deg));box-shadow:inset -2px 0 0 rgba(0,0,0,.35)}
.dl.r{right:0;transform-origin:100% 50%;transform:rotateY(calc(var(--p,0) * 108deg));box-shadow:inset 2px 0 0 rgba(255,255,255,.12)}
.dl .win{top:10%;height:24%;left:22%;right:22%}
.dl .bar{top:58%;height:16px}
.dl::after{content:"";position:absolute;inset:4% 8%;border:2px solid rgba(255,255,255,.12);border-radius:6px}
/* 가운데 안내판: 검은 판 */
.door-copy{position:absolute;z-index:4;left:50%;top:56%;transform:translate(-50%,-50%);text-align:center;color:#fff;opacity:calc(1 - var(--p,0) * 3);pointer-events:none;width:min(92%,520px);background:rgba(17,19,23,.82);border-radius:22px;padding:30px 28px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 30px 60px rgba(0,0,0,.35)}
/* 창 표지판: 소화전(빨강) · 방재실(흰색) */
.sign{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font-style:normal;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-family:'Noto Sans KR',sans-serif;font-weight:900;letter-spacing:.42em;padding:.32em .5em .32em .92em;border-radius:3px;font-size:clamp(14px,2.3vw,34px);line-height:1.2;box-shadow:0 4px 10px rgba(0,0,0,.45)}
.s-red{background:linear-gradient(180deg,#E3101C,#B8000C);color:#fff;box-shadow:inset 0 0 0 3px #B8000C,inset 0 0 0 5px #fff,0 0 0 2px #fff,0 0 0 4px #8E0009,0 4px 10px rgba(0,0,0,.45)}
.s-white{background:linear-gradient(180deg,#fff,#EEF0F3);color:#D2000E;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px #D2000E,0 4px 10px rgba(0,0,0,.45)}
.dc-knock{display:inline-block;margin-top:2px;font-size:15px;font-weight:900;letter-spacing:.08em;color:#fff;background:var(--red);padding:3px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(227,0,15,.45);transform:rotate(-3deg)}
.door-copy .badge-c.big{margin:0 auto 16px;width:128px;height:128px;border-radius:32px;padding:14px;--bc:#1B1E24;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.door-copy .badge-c.big b{font-size:36px;letter-spacing:-1px}
.door-copy .bc-sub{font-size:10.5px;margin-top:7px}
.dc-k{font-size:12px;letter-spacing:.3em;color:#FFD6D9}
.dc-h{margin-top:10px;font-size:clamp(26px,3.6vw,40px);font-weight:900;letter-spacing:-1.2px;line-height:1.3;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.dc-h span{display:inline-block;margin-top:2px;font-family:var(--serif);font-weight:700;letter-spacing:0;color:#FFF4E6}
.dc-h span i{font-style:normal;color:#FF8A92}
.skip-door{position:absolute;z-index:5;right:20px;bottom:22px;font-size:13px;color:#fff;background:rgba(0,0,0,.35);padding:8px 14px;border-radius:999px;opacity:calc(1 - var(--p,0) * 2)}
.hint{position:absolute;z-index:5;left:0;right:0;bottom:22px;text-align:center;font-size:13px;letter-spacing:.3em;color:#FFD9DB;pointer-events:none;opacity:calc(1 - var(--p,0) * 3)}
.hint::after{content:"";display:block;width:1px;height:28px;margin:10px auto 0;background:linear-gradient(#FFD9DB,transparent);animation:hint 1.6s infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.beam{position:absolute;z-index:4;top:0;bottom:0;left:50%;width:calc(8px + var(--p,0) * 160px);transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(255,247,235,.85),transparent);filter:blur(6px);opacity:var(--beam,0);pointer-events:none}
.intro.done .beam,.intro.done .dl,.intro.done .door-copy,.intro.done .skip-door,.intro.done .hint{pointer-events:none;visibility:hidden}
/* JS 없거나 동작 줄이기 설정이면 문은 열린 상태 */
html:not(.js) .intro{height:auto}html:not(.js) .stage{position:relative;top:0;height:auto;min-height:640px}
html:not(.js) .dl,html:not(.js) .door-copy,html:not(.js) .hint,html:not(.js) .skip-door{display:none}
html:not(.js) .hero-in{position:relative;padding:60px 0}

/* ---------------------------------------------------------- 공통 섹션 */
section.sec{padding:96px 0}
.sec-alt{background:var(--bg-2)}
.eyebrow{color:var(--red);font-weight:700;font-size:14px;letter-spacing:.12em}
.tt{font-size:clamp(28px,3.6vw,42px);font-weight:900;letter-spacing:-1.4px;line-height:1.25;margin-top:6px}
.lead{color:var(--ink-2);margin-top:12px;font-size:17px}
.sub-h{margin-top:56px;font-size:22px;font-weight:900;letter-spacing:-.6px}

/* ---------------------------------------------------------- 2. 네 개의 문
   열림: 손잡이(푸시바) 눌림 → 살짝 걸쇠 풀림 → 감속하며 열림 → 끝에서 살짝 되돌아와 멈춤
   안쪽: 어둠이 걷히며 빛이 들어오고, 명조체 메뉴판이 차례로 나타남 */
.doors{background:#fff}
section.sec.doors{padding-top:24px}
.d-list{list-style:none;margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.d-list.small{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.door{display:flex;flex-direction:column}
.d-info{display:flex;flex-direction:column;flex:1}
.frame{position:relative;aspect-ratio:3/4.4;max-width:100%;border-radius:14px 14px 4px 4px;background:#0E0F12;margin:6px;box-shadow:0 0 0 6px var(--steel),0 0 0 7px #9FA5AF,0 34px 50px -26px rgba(22,24,29,.6);transition:transform .5s var(--ease),box-shadow .5s}
.fx{position:absolute;inset:0;border-radius:inherit;overflow:hidden;perspective:1400px;perspective-origin:50% 42%}
.room{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px 20px 18px;color:var(--ivory);
  background:radial-gradient(90% 55% at 50% 0%,rgba(255,244,228,.20),transparent 70%),radial-gradient(70% 40% at 50% 100%,rgba(227,0,15,.20),transparent 70%),linear-gradient(180deg,#24272D,#0F1013);transition:filter .5s}
.room::before{content:"";position:absolute;inset:10px;border:1px solid rgba(239,232,220,.2);border-radius:8px;pointer-events:none}
.r-no{font-family:var(--serif);font-size:12px;letter-spacing:.32em;color:var(--ivory-dim)}
.r-ttl{margin-top:10px;font-family:var(--serif);font-weight:600;font-size:clamp(22px,2vw,27px);letter-spacing:.06em;color:#FBF7F0;line-height:1.2}
.r-en{margin-top:8px;font-size:9.5px;letter-spacing:.42em;color:var(--ivory-dim)}
.r-en::after{content:"";display:block;width:28px;height:1px;background:var(--red);margin:14px auto 0}
.room ul{list-style:none;margin-top:6px;width:100%}
.door .room{justify-content:flex-start;padding-top:40px;padding-bottom:16px}
.door .r-ttl{font-size:clamp(20px,1.8vw,24px);margin-top:4px}
.door .r-en{margin-top:4px}.door .r-en::after{margin-top:9px}
.room li{font-family:var(--serif);font-size:12.5px;font-weight:500;border-top:1px solid rgba(239,232,220,.1)}
.room li a{display:block;padding:3px 0;color:#E6DFD3;transition:color .2s,background .2s}
.room li a:hover,.room li a:focus-visible{color:#fff;background:rgba(239,232,220,.08)}
.room li:first-child{border-top:0}
.room li.is-hot a::after,.ph-chips a.is-hot::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--red);margin-left:7px;vertical-align:3px;box-shadow:0 0 8px var(--red)}
.room>*{opacity:0;transform:translateY(8px);transition:opacity .8s,transform .8s}
.door.open .room>*{opacity:1;transform:none}
.door.open .r-no{transition-delay:calc(var(--d) + .95s)}.door.open .r-ttl{transition-delay:calc(var(--d) + 1.05s)}
.door.open .r-en{transition-delay:calc(var(--d) + 1.15s)}.door.open .room ul{transition-delay:calc(var(--d) + 1.3s)}
.door.open .r-enter,.door.open .door-close{transition-delay:calc(var(--d) + 1.45s)}
.door:not(.open) .room>*{transition-duration:.25s;transition-delay:0s}
.door:not(.open) .room{visibility:hidden;transition:visibility 0s 1.1s}
.door.open .room{visibility:visible}
.spill{position:absolute;inset:0;z-index:1;background:#07080A;transition:opacity .6s ease .5s;pointer-events:none}
.door.open .spill{transition:opacity 1.5s ease calc(var(--d) + .35s)}
.door.open .spill{opacity:0}
.leaf{position:absolute;top:0;bottom:0;width:50.4%;z-index:2;background:linear-gradient(90deg,rgba(0,0,0,.1),transparent 12%,transparent 88%,rgba(0,0,0,.12)),linear-gradient(180deg,var(--door-1),var(--door-2) 60%,var(--door-3));backface-visibility:hidden;will-change:transform;transition:transform 1.1s cubic-bezier(.55,.05,.35,1),filter 1.1s}
.leaf.l{left:0;transform-origin:0 50%;border-radius:12px 0 0 2px;box-shadow:inset -2px 0 0 rgba(0,0,0,.35)}
.leaf.r{right:0;transform-origin:100% 50%;border-radius:0 12px 2px 0;box-shadow:inset 2px 0 0 rgba(255,255,255,.12)}
.leaf .win{left:22%;right:22%;top:12%;height:18%}
.leaf .bar{height:8px;top:55%;left:12%;right:12%}
/* 열기: 감속하며 열리고 끝에서 살짝 되돌아와 멈춤(1.05 오버슈트) / 닫기: 천천히 가속해 닫힘 */
.door.open .leaf{transition:transform 1.8s cubic-bezier(.3,.1,.2,1.06) calc(var(--d) + .25s),filter 1.8s calc(var(--d) + .25s)}
.door.open .leaf.l{transform:rotateY(-103deg);filter:brightness(.55)}
.door.open .leaf.r{transform:rotateY(103deg);filter:brightness(.55);transition-delay:calc(var(--d) + .34s)}
/* 닫힌 문에 마우스를 올리면 살짝 열릴 듯 (문틈) */
.door:not(.open) .frame:hover .leaf.l{transform:rotateY(-9deg);transition-duration:.5s}
.door:not(.open) .frame:hover .leaf.r{transform:rotateY(9deg);transition-duration:.5s}
.door.open .bar{animation:press .4s ease var(--d)}
@keyframes press{45%{transform:translateY(2px) scaleY(.7);filter:brightness(.85)}}
.door .frame:hover{transform:translateY(-4px);box-shadow:0 0 0 6px var(--steel),0 0 0 7px #9FA5AF,0 40px 56px -24px rgba(22,24,29,.65)}
/* 누르기 버튼(닫힌 문 전체) · 똑똑 안내 · 닫기 · 들어가기 */
.door-btn{position:absolute;inset:0;z-index:4;border-radius:inherit;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:16%}
.door-btn:focus-visible{outline:3px solid var(--red);outline-offset:6px}
.door.open .door-btn{pointer-events:none}
.knock{font-size:12px;font-weight:700;letter-spacing:.06em;color:#fff;background:rgba(17,19,23,.7);padding:6px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.35);transition:opacity .3s,transform .3s}
.door-btn:hover .knock{transform:translateY(-3px)}
.door.open .knock{opacity:0}
.door-close{position:absolute;top:14px;right:14px;z-index:2;font-size:11.5px;font-weight:700;color:var(--ivory);border:1px solid rgba(239,232,220,.35);border-radius:999px;padding:4px 10px;background:rgba(0,0,0,.25);transition:background .2s}
.door-close:hover{background:rgba(239,232,220,.18)}
.r-enter{margin-top:auto;font-size:12.5px;font-weight:700;letter-spacing:.08em;color:#fff;background:var(--red);padding:7px 16px;border-radius:999px;transition:background .2s}
.r-enter:hover{background:var(--red-dark)}
.plate{position:absolute;z-index:3;left:50%;top:-14px;transform:translateX(-50%);background:#F4EFE7;color:var(--ink);font-family:var(--serif);font-weight:600;font-size:12px;letter-spacing:.12em;padding:2px 12px;border-radius:4px;border:1px solid #D8D0C3;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.d-no{margin-top:26px;font-family:var(--serif);font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--red)}
.d-no span{margin-left:8px;font-family:'Noto Sans KR',sans-serif;font-size:10.5px;font-weight:500;letter-spacing:.3em;color:var(--ink-3)}
.door h3{margin-top:6px;font-family:var(--serif);font-weight:600;font-size:27px;letter-spacing:.03em;line-height:1.25;transition:color .3s}
.d-q{margin-top:8px;font-family:var(--serif);font-size:15.5px;font-weight:500;color:var(--ink)}
.d-t{margin-top:8px;font-size:14px;color:var(--ink-2)}
.d-go{margin-top:auto;padding-top:18px;font-size:11.5px;font-weight:700;letter-spacing:.32em;display:inline-flex;align-items:center;gap:10px}
.d-go::after{content:"";width:26px;height:1px;background:var(--red);transition:width .4s var(--ease)}
.d-info:hover .d-go::after{width:52px}
.d-info:hover h3{color:var(--red)}

/* ---------------------------------------------------------- 3. 견적 */
.quote-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.q-points{list-style:none;margin-top:24px;display:grid;gap:10px}
.q-points li{padding-left:28px;position:relative;font-weight:500}
.q-points li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--red);color:#fff;font-size:12px;display:grid;place-items:center;font-weight:900}
.qq{background:#fff;border-radius:22px;box-shadow:var(--shadow);border:1px solid var(--line);padding:28px}
.qq .lb{display:block;font-size:13px;font-weight:700;margin:18px 0 8px}
.qq .lb:first-child{margin-top:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;padding:8px 12px;border:1.5px solid var(--line);border-radius:10px;font-size:14px;font-weight:500;cursor:pointer;transition:.12s}
.chip input:checked+span{border-color:var(--red);background:var(--red-soft);color:var(--red);font-weight:700}
.chip input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.field{width:100%;height:46px;border:1.5px solid var(--line);border-radius:10px;padding:0 14px;font:inherit;font-size:15px}
.field:focus{outline:none;border-color:var(--red)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.upload{display:flex;align-items:center;gap:10px;margin-top:10px;padding:12px 14px;border:1.5px dashed #CBD0D9;border-radius:10px;font-size:14px;color:var(--ink-2);cursor:pointer}
.upload input{display:none}
.qq .btn-red{width:100%;height:54px;margin-top:16px;font-size:16px}
.q-done{margin-top:12px;padding:12px 14px;border-radius:10px;background:var(--red-soft);color:var(--red-dark);font-size:14px;font-weight:700}
.qq .note{font-size:12px;color:var(--ink-3);margin-top:10px;text-align:center}

/* ---------------------------------------------------------- 4. vs */
.vs{margin-top:44px;display:grid;grid-template-columns:1fr auto 1fr;gap:18px}
.vs .col{border-radius:20px;padding:30px}
.vs .cost{background:#fff;border:1px solid var(--line)}
.vs .fix{background:var(--ink);color:#fff}
.vs .mid{display:grid;place-items:center;font-weight:900;font-size:22px;color:var(--ink-3)}
.vs h3{font-size:24px;font-weight:900;letter-spacing:-.8px}
.vs .tag{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;margin-bottom:10px;background:var(--bg-2);color:var(--ink-2)}
.vs .fix .tag{background:var(--red);color:#fff}
.vs dl{margin-top:16px;display:grid;gap:12px}
.vs dt{font-size:13px;color:var(--ink-3);font-weight:700}
.vs .fix dt{color:#9AA0AB}
.vs dd{font-size:16px;font-weight:500}
.vs .eg{margin-top:20px;padding-top:16px;border-top:1px dashed rgba(0,0,0,.15);font-size:14px;color:var(--ink-2)}
.vs .fix .eg{color:#C5C9D1;border-color:rgba(255,255,255,.15)}

/* ---------------------------------------------------------- 5. 상황별 */
.sits{margin-top:40px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.sit{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 18px;transition:.15s}
.sit:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:var(--shadow)}
.sit .ic{font-size:28px}
.sit b{display:block;margin-top:10px;font-size:16px;letter-spacing:-.4px;line-height:1.4}
.sit small{display:block;margin-top:6px;color:var(--ink-3);font-size:13px}
.sit.urgent{background:var(--red);border-color:var(--red);color:#fff}
.sit.urgent small{color:#FFD2D4}

/* ---------------------------------------------------------- steps / experts */
.steps{list-style:none;margin-top:36px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;counter-reset:s}
.steps li{position:relative;padding-right:16px}
.steps li::before{counter-increment:s;content:"0" counter(s);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--red);color:var(--red);font-weight:900;font-size:15px;position:relative;z-index:1}
.steps li::after{content:"";position:absolute;top:23px;left:46px;right:0;height:2px;background:repeating-linear-gradient(90deg,var(--red) 0 6px,transparent 6px 12px)}
.steps li:last-child::after{display:none}
.steps b{display:block;margin-top:14px;font-size:16px;font-weight:900;letter-spacing:-.4px}
.steps p{margin-top:4px;font-size:14px;color:var(--ink-2)}
.steps.big li::before{width:54px;height:54px;font-size:17px}
.steps.big li::after{top:27px;left:54px}
.steps.big b{font-size:19px}
.ex-strip{list-style:none;margin-top:20px;display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.ex-strip li{flex:0 0 auto;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px 12px 12px}
.ex-strip .ex-av{grid-row:span 2}
.ex-strip b{font-size:15px}
.ex-strip small{font-size:12.5px;color:var(--ink-3)}
.ex-av{width:40px;height:40px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:900}

/* ---------------------------------------------------------- FAQ / 지사 */
.faq-wrap{display:grid;grid-template-columns:320px 1fr;gap:48px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-weight:700;font-size:17px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";color:var(--red);font-weight:900;margin-right:10px}
.faq summary::after{content:"+";position:absolute;right:6px;top:18px;font-size:24px;color:var(--ink-3);font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq .ans{padding:0 0 22px 26px;color:var(--ink-2);font-size:15.5px}
.br-list{list-style:none;margin-top:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.br-list li{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
.br-list b{display:block;font-size:18px;font-weight:900;color:var(--red)}
.br-list span{display:block;margin-top:6px;font-size:14px;color:var(--ink-2)}
.more-link{display:inline-block;margin-top:22px;font-weight:700;color:var(--red)}

/* ---------------------------------------------------------- band / footer */
.band{background:var(--red);color:#fff;padding:64px 0}
.band-in{display:flex;align-items:center;gap:24px 28px;flex-wrap:wrap}
.band-in h2{flex:1;min-width:0}
.band h2{font-size:clamp(26px,3.4vw,36px);font-weight:900;letter-spacing:-1.2px;line-height:1.3}
.band mark{background:#fff;color:var(--red);padding:0 8px;border-radius:4px}
.band .acts{display:flex;gap:10px;flex-wrap:wrap}
.band .btn{height:56px;padding:0 26px;font-size:17px}
.ft{background:var(--night);color:#9298A3;font-size:13.5px;padding:48px 0 110px}
.ft .logo-txt{color:#fff}
.ft-top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid #262A31}
.ft-menu{display:flex;gap:20px;flex-wrap:wrap;font-weight:700;color:#D5D8DE}
.ft-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:24px 0}
.ft-grid p+p{margin-top:6px}
.ft-tel a{font-size:24px;font-weight:900;color:#fff}
.ft-br{list-style:none;display:grid;gap:6px}
.ft-br b{color:#D5D8DE;margin-right:6px}
.ft-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;border-top:1px solid #262A31}
.ft-links{display:flex;gap:16px}
.ft a:hover{color:#fff}
.mcta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;border-top:1px solid var(--line);padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));gap:8px;grid-template-columns:1fr 1fr 1.4fr}
.mcta a{height:48px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:15px}
.mcta .m1{background:var(--bg-2)}.mcta .m2{background:#FEE500}.mcta .m3{background:var(--red);color:#fff}

/* ---------------------------------------------------------- 하위 페이지 히어로: 로드 시 문이 열림 */
.ph{position:relative;overflow:hidden;background:var(--night);perspective:1600px;min-height:420px}
.ph-room{position:relative;padding:72px 0 64px;color:#fff;background:radial-gradient(70% 90% at 70% 10%,rgba(255,244,228,.14),transparent 60%),radial-gradient(60% 80% at 10% 100%,rgba(227,0,15,.35),transparent 60%),var(--night)}
.crumb{font-size:13px;color:#AEB3BE}.crumb a:hover{color:#fff}
.ph-no{margin-top:22px;font-family:var(--serif);font-size:13px;letter-spacing:.3em;color:var(--ivory-dim);font-weight:600}
.ph h1{margin-top:8px;font-family:var(--serif);font-size:clamp(40px,5.6vw,68px);font-weight:600;letter-spacing:.02em;line-height:1.15;color:#FBF7F0}
.ph-q{margin-top:14px;font-family:var(--serif);font-size:clamp(18px,2vw,23px);font-weight:500;color:var(--ivory)}
.ph-d{margin-top:8px;color:#C5C9D1;max-width:640px}
.ph-chips{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px}
.ph-chips a{padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);font-size:14px;font-weight:500;transition:.15s}
.ph-chips a:hover{background:#fff;color:var(--ink)}
.ph-leaf{position:absolute;top:0;bottom:0;width:50.2%;z-index:3;background:linear-gradient(90deg,rgba(0,0,0,.12),transparent 8%,transparent 92%,rgba(0,0,0,.15)),linear-gradient(180deg,var(--door-1),var(--door-2) 60%,var(--door-3));transition:transform 1.5s var(--ease),visibility 0s 1.5s}
.ph-leaf.l{left:0;transform-origin:0 50%;box-shadow:inset -2px 0 0 rgba(0,0,0,.35)}
.ph-leaf.r{right:0;transform-origin:100% 50%;box-shadow:inset 2px 0 0 rgba(255,255,255,.12)}
.ph-leaf .win{top:14%;height:28%}
.ph-sign{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;padding:12px 20px;border-radius:14px;background:rgba(17,19,23,.85);color:#fff;font-size:20px;font-weight:900;transition:opacity .4s}
.ph-ic{width:26px;height:26px;color:var(--ivory)}
.ph.open .ph-leaf.l{transform:rotateY(-100deg);visibility:hidden}
.ph.open .ph-leaf.r{transform:rotateY(100deg);visibility:hidden}
.ph.open .ph-sign{opacity:0;pointer-events:none}
.ph .ph-room>.wrap>*{opacity:0;transform:translateY(12px);transition:.6s}
.ph.open .ph-room>.wrap>*{opacity:1;transform:none}
.ph.open .ph-room>.wrap>*:nth-child(2){transition-delay:.55s}.ph.open .ph-room>.wrap>*:nth-child(3){transition-delay:.65s}
.ph.open .ph-room>.wrap>*:nth-child(4){transition-delay:.75s}.ph.open .ph-room>.wrap>*:nth-child(5){transition-delay:.85s}
.ph.open .ph-room>.wrap>*:nth-child(6){transition-delay:.95s}
html:not(.js) .ph-leaf,html:not(.js) .ph-sign{display:none}
html:not(.js) .ph .ph-room>.wrap>*{opacity:1;transform:none}

.subtabs{position:sticky;top:var(--hd);z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.subtabs .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.subtabs .wrap::-webkit-scrollbar{display:none}
.subtabs a{flex:none;padding:15px 14px;font-weight:700;font-size:15px;color:var(--ink-3);border-bottom:3px solid transparent}
.subtabs a.on,.subtabs a:hover{color:var(--ink);border-color:var(--red)}

/* ---------------------------------------------------------- 하위 섹션 */
.sub-sec{padding:88px 0}
.sub-sec.alt{background:var(--bg-2)}
.s-no{font-size:13px;font-weight:900;letter-spacing:.1em;color:var(--red)}
.s-tt{margin-top:4px;font-size:clamp(28px,3.4vw,40px);font-weight:900;letter-spacing:-1.3px}
.s-tt .hot{font-size:13px;vertical-align:8px}
.s-badge{display:inline-block;margin-top:14px;background:var(--red-soft);color:var(--red-dark);padding:6px 14px;border-radius:10px;font-weight:700;font-size:14px}
.s-lead{margin-top:20px;padding:4px 0 4px 18px;border-left:4px solid var(--red);font-size:clamp(17px,1.6vw,20px);font-weight:500;color:var(--ink);max-width:820px}
.pts{margin-top:32px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pt{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}
.pt span{font-size:12px;font-weight:900;color:var(--red)}
.pt h3{margin-top:4px;font-size:18px;font-weight:900;letter-spacing:-.4px}
.pt p{margin-top:6px;font-size:15px;color:var(--ink-2)}
.tbl-wrap{margin-top:28px;overflow-x:auto;border-radius:16px;border:1px solid var(--line);background:#fff}
.tbl{width:100%;border-collapse:collapse;min-width:560px;font-size:14.5px}
.tbl th{background:var(--ink);color:#fff;text-align:left;padding:14px 18px;font-weight:700}
.tbl td{padding:14px 18px;border-top:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.tbl td:first-child{font-weight:700;color:var(--ink);white-space:nowrap}
.tbl td:last-child{color:var(--red-dark);font-weight:500}
.tbl tr:first-child td{border-top:0}
.sub-sec .steps{margin-top:32px}
.s-note{margin-top:22px;font-size:14px;color:var(--ink-2);background:#FFF8D6;border:1px solid #F5E08A;border-radius:12px;padding:12px 16px}
.expert{margin-top:28px;display:flex;align-items:center;gap:16px;background:var(--night);color:#fff;border-radius:18px;padding:20px 22px}
.expert .ex-av{width:52px;height:52px;font-size:20px;flex:none}
.expert>div{flex:1}
.ex-k{font-size:12px;color:var(--ivory-dim);font-weight:700;letter-spacing:.04em}
.expert b{font-size:18px}
.expert p:last-child{font-size:14px;color:#C5C9D1}
.s-cta{margin-top:28px;display:flex;gap:10px;flex-wrap:wrap}
.cases{margin-top:32px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.case{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.ba{display:grid;grid-template-columns:1fr 1fr;height:140px}
.ba div{display:grid;place-items:end start;padding:10px;font-size:12px;font-weight:700;color:#fff}
.ba .b{background:linear-gradient(135deg,#5B5F68,#2E3138)}.ba .a{background:linear-gradient(135deg,#E3000F,#8E0009)}
.ba span{background:rgba(0,0,0,.35);padding:2px 8px;border-radius:6px}
.case .bd{padding:18px 20px}
.case .cat{font-size:12px;font-weight:700;color:var(--red)}
.case h3{font-size:17px;font-weight:700;margin-top:4px;line-height:1.45}
.case .meta{margin-top:10px;display:flex;gap:6px}
.case .meta span{font-size:12px;background:var(--bg-2);padding:3px 8px;border-radius:6px;color:var(--ink-2)}
.more-doors{background:#fff;border-top:1px solid var(--line)}

/* STORY */
.story{margin-top:32px;display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:start}
.note-book{background:#E9DFC9;border-radius:6px 14px 14px 6px;padding:26px 22px;box-shadow:inset 10px 0 0 #CDBF9F,0 20px 30px -18px rgba(0,0,0,.4);transform:rotate(-3deg);display:grid;gap:10px;font-family:cursive,'Noto Sans KR';color:#5A4A2C}
.note-book span{border-bottom:1px solid rgba(90,74,44,.25);padding-bottom:6px}
.story-t p{font-size:17px;color:var(--ink-2)}
.story-t p+p{margin-top:14px}
.story-t p.q{font-size:clamp(22px,2.4vw,28px);font-weight:900;color:var(--red);letter-spacing:-.8px}
.vals{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.val{border-radius:18px;padding:26px;background:var(--night);color:#fff}
.val b{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ivory)}
.val p{margin-top:6px;color:#C5C9D1;font-size:15px}
.promises{list-style:none;margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.promises li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;font-weight:700}
.promises span{display:block;font-size:12px;color:var(--red);font-weight:900}
.timeline{list-style:none;margin-top:36px;position:relative;padding-left:28px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--red),var(--line))}
.timeline li{position:relative;display:grid;grid-template-columns:110px 1fr;gap:18px;padding-bottom:28px}
.timeline li::before{content:"";position:absolute;left:-27px;top:5px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--red)}
.timeline time{font-weight:900;color:var(--red)}
.timeline b{font-size:17px}
.timeline p{font-size:14.5px;color:var(--ink-2);margin-top:2px}
.brs{margin-top:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.br{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
.br-a{font-size:12px;font-weight:700;color:var(--red)}
.br h3{font-size:18px;font-weight:900;margin-top:2px}
.br p{font-size:14px;color:var(--ink-2);margin-top:6px}
.br a{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:700;color:var(--red)}
.company{margin-top:22px;font-size:14px;color:var(--ink-2)}

/* ---------------------------------------------------------- 반응형 */
@media (max-width:1100px){
  .d-list{grid-template-columns:repeat(3,1fr);row-gap:48px}
  .d-list.small{grid-template-columns:repeat(2,1fr)}
  .sits{grid-template-columns:repeat(3,1fr)}
  .brs,.br-list{grid-template-columns:repeat(2,1fr)}
  .nav-top{padding:0 12px}
}
@media (max-width:900px){
  :root{--hd:62px}
  .hd{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  .hd-cta{display:none}
  .menu-btn{display:block}
  .badge-c{width:42px;height:42px}.logo-word{height:42px;padding-left:10px}.lw1,.lw2{font-size:17.5px}
  .gnb{position:fixed;inset:var(--hd) 0 0 0;height:auto;background:#fff;overflow-y:auto;transform:translateX(100%);transition:transform .4s var(--ease);padding-bottom:90px}
  .gnb.open{transform:none}
  .nav{flex-direction:column;height:auto}
  .nav-i{height:auto;border-bottom:1px solid var(--line)}
  .nav-top{height:auto;padding:18px 20px;font-size:18px;justify-content:space-between}
  .nav-top::after{content:"+";position:static;transform:none;background:none;height:auto;color:var(--ink-3);font-weight:400;font-size:22px}
  .nav-i.open .nav-top::after{content:"−"}
  .mega{position:static;visibility:visible;pointer-events:auto;box-shadow:none;border:0;display:none}
  .nav-i.open .mega{display:block}
  .m-leaf{display:none}
  .mega-in{opacity:1;transform:none;grid-template-columns:1fr;padding:0 20px 18px;gap:10px}
  .m-intro{padding:16px 18px}.m-intro strong,.m-q{display:none}.m-ic{display:none}.m-no{margin:0}
  .m-list{grid-template-columns:1fr}
  .gnb-foot{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:20px}
  .gnb-foot a{height:50px;border-radius:12px;display:grid;place-items:center;font-weight:700;background:var(--bg-2)}
  .gnb-foot a:last-child{background:var(--red);color:#fff}
  .quote-in,.faq-wrap{grid-template-columns:1fr;gap:32px}
  .vs{grid-template-columns:1fr}
  .steps{grid-auto-flow:row;grid-template-columns:1fr 1fr;row-gap:28px}
  .steps li:nth-child(2n)::after{display:none}
  .pts,.cases{grid-template-columns:1fr}
  .story{grid-template-columns:1fr}
  .note-book{max-width:260px}
  .vals,.promises{grid-template-columns:1fr}
  .mcta{display:grid}
  section.sec,.sub-sec{padding:64px 0}
  .expert{flex-wrap:wrap}
}
@media (max-width:640px){
  .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .intro{height:calc(var(--stage) + 55vh)}
  .door-copy{top:63%;padding:20px 18px 22px;width:min(90%,360px)}
  .door-copy .badge-c.big{width:84px;height:84px;border-radius:22px;padding:9px;margin-bottom:10px}
  .door-copy .badge-c.big b{font-size:24px;margin-top:4px}
  .door-copy .bc-sub{font-size:8px;margin-top:4px}
  .dc-h{font-size:clamp(20px,6vw,26px)}
  .dc-k{font-size:10px}
  .sign{font-size:clamp(13px,4vw,18px);letter-spacing:.3em}
  .choice{grid-template-columns:1fr;gap:16px;margin-top:22px}
  .choice a{padding:16px 18px}.choice .t{font-size:19px}
  .to-doors{display:none}
  .badge{font-size:12px;padding:6px 12px}
  .headline{letter-spacing:-2px}
  .sub{font-size:15.5px}
  .formula{font-size:20px}
  .d-list,.d-list.small{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin-left:-16px;margin-right:-16px;padding:8px 22px 12px;scrollbar-width:none}
  .d-list::-webkit-scrollbar{display:none}
  .door{flex:0 0 76%;scroll-snap-align:center}
  .sits{grid-template-columns:1fr 1fr}
  .row2{grid-template-columns:1fr}
  .brs,.br-list{grid-template-columns:1fr}
  .timeline li{grid-template-columns:1fr;gap:2px}
  .ft-grid{grid-template-columns:1fr}
  .ph{min-height:380px}.ph-room{padding:48px 0 44px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .intro{height:auto}.stage{position:relative;top:0;height:auto;min-height:640px}
  .dl,.door-copy,.hint,.skip-door{display:none}
  .hero-in{position:relative;padding:60px 0}
  .leaf,.spill,.beam,.door-btn,.door-close{display:none}.room>*{opacity:1;transform:none}.door .room{visibility:visible}
}

/* =========================================================
   달인 (전문가) — 아바타 · 라운지 · 담당 달인 카드 · 프로필
   ========================================================= */
.xph{--fx:50%}
.xph,.av{display:block;overflow:hidden;background:#2A2E36}
.xph img,.av img{width:100%;height:100%;object-fit:cover;object-position:var(--fx) var(--fy,30%);display:block}
/* 전체 표시형: 사진을 자르지 않고(contain), 뒤에 같은 사진을 흐리게 확대해 빈 곳을 채움 */
.xph.fit{position:relative;background:#14161A}
.xph-bg{position:absolute;inset:-24px;background-size:cover;background-position:center;filter:blur(22px) brightness(.55) saturate(1.1);transform:scale(1.1)}
.xph.fit img{position:relative;object-fit:contain;object-position:center;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}
.av img{object-position:50% 50%}
.av{width:30px;height:30px;border-radius:50%;flex:none;box-shadow:0 0 0 2px #fff}
.av.lg{width:58px;height:58px;box-shadow:none}
.av-stack{display:flex}.av-stack .av+.av{margin-left:-9px}
.m-av,.d-av{display:flex;align-items:center;gap:10px;margin-top:12px}
.av-t{font-size:12.5px;font-weight:500}
.m-av .av{box-shadow:0 0 0 2px var(--night)}.m-av .av-t{color:var(--ivory-dim)}
.d-av .av-t{color:var(--ink-2)}
/* 사례 카드 담당 */
.xchip{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:5px 12px 5px 5px;border-radius:999px;background:var(--bg-2);font-size:12.5px;color:var(--ink-2);transition:.15s}
.xchip .av{width:26px;height:26px;box-shadow:none}
.xchip b{color:var(--ink)}.xchip:hover{background:var(--red-soft)}

/* ---- 메인: 달인 라운지 (문 뒤의 사람들) ---- */
.lounge{background:var(--night);color:#fff;position:relative;overflow:hidden}
.lounge::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 80% 0%,rgba(255,244,228,.10),transparent 70%),radial-gradient(50% 40% at 0% 100%,rgba(227,0,15,.18),transparent 70%);pointer-events:none}
.lounge .wrap{position:relative}
.lounge .tt{font-family:var(--serif);font-weight:600;letter-spacing:0;color:#FBF7F0}
.lounge .lead{color:var(--ivory-dim)}
.lounge .eyebrow{color:#FF4D57}
.lg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.lg-head>div:first-child{min-width:0;max-width:640px}
.lg-tabs{display:flex;gap:6px;flex-wrap:wrap}
.lg-tabs button{padding:9px 16px;border-radius:999px;border:1px solid rgba(239,232,220,.25);color:var(--ivory);font-size:14px;font-weight:500;transition:.2s}
.lg-tabs button:hover{border-color:var(--ivory)}
.lg-tabs button.on{background:var(--ivory);color:var(--ink);border-color:var(--ivory);font-weight:700}
.mgrid{margin-top:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mcard{min-width:0;transition:opacity .35s,transform .35s}
.mcard.hide{display:none}
.mcard a{display:flex;flex-direction:column;height:100%;border-radius:18px;overflow:hidden;background:#1A1D22;border:1px solid rgba(239,232,220,.1);transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.mcard a:hover{transform:translateY(-6px);border-color:rgba(239,232,220,.35);box-shadow:0 26px 40px -20px rgba(0,0,0,.8)}
.mc-ph{position:relative;aspect-ratio:16/12;max-width:100%}
.mc-ph .xph{position:absolute;inset:0}
.mc-ph .xph img{transition:transform .8s var(--ease)}
.mcard a:hover .mc-ph img{transform:scale(1.06)}
.mc-ph::after{content:"";position:absolute;inset:auto 0 0;height:14%;background:linear-gradient(180deg,transparent,#1A1D22);pointer-events:none}
.mc-ph .xph.fit img{padding:13% 0 11%}
.mc-honor{position:absolute;z-index:1;left:12px;top:12px;font-family:var(--serif);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--ink);background:var(--ivory);padding:3px 10px;border-radius:3px}
.mc-yrs{position:absolute;z-index:1;right:12px;bottom:12px;font-size:11.5px;font-weight:700;color:#fff;background:var(--red);padding:3px 9px;border-radius:999px}
.mc-bd{padding:6px 18px 20px;display:flex;flex-direction:column;flex:1}
.mc-f{font-size:11.5px;letter-spacing:.14em;color:var(--ivory-dim)}
.mcard h3{margin-top:4px;font-family:var(--serif);font-weight:600;font-size:22px;color:#FBF7F0;letter-spacing:.02em}
.mcard h3 small{font-size:13px;color:var(--ivory-dim);font-weight:500;margin-left:2px}
.mc-q{margin-top:10px;font-family:var(--serif);font-size:14px;line-height:1.6;color:#E6DFD3}
.mc-tags{list-style:none;margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;gap:5px}
.mc-tags li{font-size:11.5px;color:var(--ivory);border:1px solid rgba(239,232,220,.2);padding:2px 8px;border-radius:4px}
.lounge .more-link{color:var(--ivory);margin-top:30px}

/* ---- 하위 콘텐츠: 담당 달인 (대표) ---- */
.xp-lead{margin-top:34px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border-radius:22px;overflow:hidden;background:var(--night);color:#fff;box-shadow:0 30px 50px -30px rgba(22,24,29,.6)}
.xp-ph{position:relative;min-height:320px}
.xp-ph .xph{position:absolute;inset:0}
.xp-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 88%,var(--night));pointer-events:none}
.xp-honor{position:absolute;z-index:1;left:16px;top:16px;font-family:var(--serif);font-weight:600;font-size:13px;letter-spacing:.12em;color:var(--ink);background:var(--ivory);padding:4px 12px;border-radius:3px}
.xp-bd{padding:30px 32px 30px 20px;min-width:0}
.xp-k{font-size:12px;letter-spacing:.12em;color:var(--ivory-dim)}
.xp-lead h3,.pf-bd h2{margin-top:6px;font-family:var(--serif);font-weight:600;font-size:30px;color:#FBF7F0;letter-spacing:.02em;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.xp-lead h3 small,.pf-bd h2 small{font-size:15px;color:var(--ivory-dim);font-weight:500}
.xp-yrs{font-family:'Noto Sans KR',sans-serif;font-size:12px;font-weight:700;color:#fff;background:var(--red);padding:3px 10px;border-radius:999px;letter-spacing:0}
.xp-q{margin-top:12px;font-family:var(--serif);font-size:19px;line-height:1.55;color:#F3EDE3}
.xp-creds{list-style:none;margin-top:16px;display:flex;flex-wrap:wrap;gap:6px}
.xp-creds li{font-size:12.5px;color:var(--ivory);border:1px solid rgba(239,232,220,.22);padding:4px 10px;border-radius:4px}
.xp-str{list-style:none;margin-top:16px;display:grid;gap:7px}
.xp-str li{position:relative;padding-left:22px;font-size:14.5px;color:#D9D3C8}
.xp-str li::before{content:"";position:absolute;left:2px;top:9px;width:10px;height:5px;border-left:2px solid #FF4D57;border-bottom:2px solid #FF4D57;transform:rotate(-45deg)}
.xp-case{margin-top:18px;padding:14px 16px;border-radius:12px;background:rgba(239,232,220,.06);border-left:3px solid var(--red)}
.xp-case b{font-size:13.5px;color:var(--ivory)}
.xp-case p{margin-top:4px;font-size:13.5px;color:#BFB8AC}
.xp-acts{margin-top:20px;display:flex;gap:8px;flex-wrap:wrap}
.xp-lead .btn-ghost,.profile .btn-ghost{background:transparent;color:var(--ivory);border-color:rgba(239,232,220,.3)}
.xp-lead .btn-ghost:hover,.profile .btn-ghost:hover{border-color:var(--ivory)}
.xp-more{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.xp-more>p{font-size:13px;font-weight:700;color:var(--ink-3);margin-right:4px}
.xp-mini{display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:16px;background:#fff;border:1px solid var(--line);min-width:0;flex:1 1 300px;max-width:460px;transition:.2s}
.xp-mini:hover{border-color:var(--red);transform:translateY(-2px)}
.xp-mini>span:last-child{display:flex;flex-direction:column;min-width:0}
.xp-mini small{font-size:11.5px;color:var(--ink-3)}
.xp-mini b{font-family:var(--serif);font-size:16px;font-weight:600}
.xp-mini i{font-style:normal;font-family:var(--serif);font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- 프로필 페이지 ---- */
.profile{padding:72px 0;background:#fff;scroll-margin-top:calc(var(--hd) + 50px)}
.profile.alt{background:var(--bg-2)}
.pf-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:44px;align-items:start}
.profile.alt .pf-ph{order:2}
.profile.alt .pf-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}  /* 사진은 좌·우 어느 쪽이든 같은 폭 */
/* 프로필 사진: 원본 비율 그대로 꽉 차게 (잘림·빈 곳 없음) */
.pf-ph{position:sticky;top:calc(var(--hd) + 70px);border-radius:22px;overflow:hidden;box-shadow:0 30px 50px -30px rgba(22,24,29,.6);line-height:0}
.pf-ph .xph{position:relative}
.pf-ph .xph-bg{display:none}
.pf-ph .xp-honor{line-height:1.5;z-index:2}
.pf-ph .xph.fit img{width:100%;height:auto;object-fit:fill;filter:none}
.pf-bd{min-width:0}
.pf-bd .xp-k{color:var(--red);font-weight:700}
.pf-bd h2{color:var(--ink);font-size:36px}
.pf-bd h2 small{color:var(--ink-3)}
.pf-tag{margin-top:6px;color:var(--ink-2)}
.pf-bd .xp-q{color:var(--ink);font-size:21px;padding-left:16px;border-left:3px solid var(--red)}
.pf-cols{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pf-cols h3,.pf-svc h3{font-size:13px;letter-spacing:.12em;color:var(--ink-3);font-weight:700}
.pf-bd .xp-creds{flex-direction:column;align-items:flex-start;margin-top:10px}
.pf-bd .xp-creds li{color:var(--ink);border-color:var(--line);background:#fff}
.pf-bd .xp-str{margin-top:10px}.pf-bd .xp-str li{color:var(--ink-2)}
.pf-bd .xp-case{background:#fff;border:1px solid var(--line);border-left:3px solid var(--red)}
.pf-bd .xp-case b{color:var(--ink)}.pf-bd .xp-case p{color:var(--ink-2)}
.pf-promise{margin-top:18px;font-family:var(--serif);font-size:16px;color:var(--ink);font-weight:500}
.pf-promise::before{content:"달인의 약속 — ";color:var(--red);font-weight:600}
.pf-svc{margin-top:20px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pf-svc h3{width:100%;margin-bottom:4px}
.pf-svc a{font-size:13px;padding:6px 12px;border-radius:999px;background:var(--red-soft);color:var(--red-dark);font-weight:500}
.pf-svc a:hover{background:var(--red);color:#fff}
.profile .btn-ghost{color:var(--ink);border-color:var(--line)}

@media (max-width:1100px){.mgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
  .mgrid{grid-template-columns:repeat(2,1fr)}
  .xp-lead,.pf-in,.profile.alt .pf-in{grid-template-columns:1fr}
  .xp-ph{min-height:0;aspect-ratio:16/11.5}
  .xp-honor{top:8px;left:10px;font-size:11px;padding:2px 9px}.xp-ph::after{background:linear-gradient(180deg,transparent 55%,var(--night))}
  .xp-bd{padding:6px 22px 26px}
  .pf-ph{position:relative;top:0}.profile.alt .pf-ph{order:0}
  .pf-cols{grid-template-columns:1fr}
  .profile{padding:52px 0}
}
@media (max-width:640px){
  .mgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-left:-16px;margin-right:-16px;padding:4px 16px 10px;scrollbar-width:none}
  .mgrid::-webkit-scrollbar{display:none}
  .mcard{flex:0 0 72%;scroll-snap-align:start}
  .lg-tabs{overflow-x:auto;flex-wrap:nowrap;width:100%;scrollbar-width:none}
  .lg-tabs button{flex:none}
  .xp-lead h3,.pf-bd h2{font-size:26px}
  .xp-q{font-size:17px}
}