:root{
  --bg:#faf8f4;
  --surface:#ffffff;
  --ink:#1a1917;
  --muted:#6b6862;
  --faint:#8d8a83;
  --line:rgba(0,0,0,.08);
  --line-2:rgba(0,0,0,.12);
  --line-3:rgba(0,0,0,.2);
  --accent:#3f834b;
  --accent-strong:#277539;
  --accent-light:#85cb8f;
  --danger:#a33a2f;
  --dark:#1a1917;
  --on-dark:#faf8f4;
  --ph:repeating-linear-gradient(135deg,#efece5 0 14px,#f6f4ef 14px 28px);
  --ph-sm:repeating-linear-gradient(135deg,#e9e6df 0 10px,#f2efe9 10px 20px);
  --wrap:1240px;
  --pad:40px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}

:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px}

.skip{
  position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--ink);color:var(--on-dark);
  padding:12px 18px;border-radius:2px;font-size:15px;font-weight:600;
  transition:top .18s;
}
.skip:focus{top:12px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* 관리자 화면에서는 공개 사이트의 헤더·푸터를 감춘다 */
body.in-admin .site-header,body.in-admin .site-footer,body.in-admin .skip{display:none}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,248,244,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
  height:78px;display:flex;align-items:center;justify-content:space-between;gap:40px;
}
.logo{display:flex;align-items:center}
/* 세로형(2줄) 로고라 가로형보다 높이가 필요하다.
   원본 SVG 는 흰색으로 채워져 있어 빌드할 때 색 지정을 걷어내고 여기서 입힌다. */
.logo svg{height:43px;width:auto;display:block;fill:var(--ink)}
.gnb{position:relative;display:flex;align-items:center;gap:38px}
.gnb a{
  position:relative;padding:6px 0;
  font-size:16px;font-weight:600;letter-spacing:-.01em;
  transform-origin:center center;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.gnb a:hover,.gnb a:focus-visible{transform:scale(1.08)}
.gnb-bar{
  position:absolute;bottom:-2px;left:0;height:2px;
  background:var(--muted);
  transition:transform .38s cubic-bezier(.22,.61,.36,1),width .38s cubic-bezier(.22,.61,.36,1),opacity .2s;
  pointer-events:none;opacity:0;
}

/* ---------- hero ---------- */
.hero{
  position:relative;display:flex;align-items:center;
  background:var(--ph);overflow:hidden;
}
/* 이미지·영상 레이어. ::after 는 자식 뒤에 그려지므로 그라디언트가 항상 위에 덮인다 */
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;display:block}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,19,17,.00) 0%,rgba(20,19,17,.80) 100%);
}
.hero-note{
  position:absolute;top:20px;left:24px;z-index:2;
  font:500 11px var(--mono);letter-spacing:.06em;color:rgba(255,255,255,.7);
}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero h1{
  font-size:46px;line-height:1.42;font-weight:700;letter-spacing:-.035em;
  color:#fff;text-wrap:pretty;
}
.hero--about{height:560px}

/* 히어로 문구 — 세 줄이 차례로 떠오른 뒤, 각자 다른 박자로 은은하게 숨쉰다.
   회사소개와 스튜디오대여가 같이 쓴다.
   .play 는 페이지에 들어올 때마다 JS 가 다시 붙여 애니메이션을 처음부터 재생시킨다. */
.hero-line{display:block;opacity:0}
.hero.play .hero-line{
  /* opacity 와 transform 만 움직인다. 둘 다 GPU 가 처리해서 레이아웃을 다시 계산하지 않는다.
     will-change 로 레이어를 미리 잡아두면 매 프레임 승격/해제가 반복되지 않는다. */
  will-change:opacity,transform;
  animation:heroIn 1.5s cubic-bezier(.22,.61,.36,1) var(--in) forwards,
            heroBreathe 6.5s ease-in-out var(--pulse) infinite;
}
/* --in : 0.5초 뜸을 들인 뒤 0.4초 간격으로 한 줄씩
   --pulse : 그 줄의 등장이 끝난 뒤여야 한다. 겹치면 투명도가 한 번 튄다 */
.hero-line:nth-child(1){--in:.5s;--pulse:2.2s}
.hero-line:nth-child(2){--in:.9s;--pulse:3.8s}
.hero-line:nth-child(3){--in:1.3s;--pulse:5.4s}

@keyframes heroIn{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}
}
@keyframes heroBreathe{
  0%,100%{opacity:1}
  50%{opacity:.72}
}
.hero--studio{height:480px;text-align:center}
.hero--studio h1{font-size:44px}

/* 히어로 없이 시작하는 페이지의 제목. 아래 툴바·그리드와 좌우 여백을 맞춘다 */
.page-head{padding:76px var(--pad) 0;text-align:center}
.page-head h1{font-size:38px;font-weight:700;letter-spacing:-.035em}

/* ---------- about ---------- */
/* 배경 사진 위에 밝은 막을 덮어 어두운 본문 글자가 계속 읽히게 한다.
   사진이 없으면 막도 없다(불필요한 반투명 레이어를 겹치지 않는다). */
.intro-sec{position:relative;overflow:hidden}
.intro-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.intro-scrim{position:absolute;inset:0;background:rgba(250,248,244,.7);opacity:0}
.intro-sec.has-bg .intro-scrim{opacity:1}
.intro-sec .intro{position:relative}

.intro{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start;
  padding-top:110px;padding-bottom:90px;
}
.intro h2{font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1.4}
.vcm{display:flex;flex-direction:column;gap:34px}
.vcm-list{display:flex;flex-direction:column;gap:12px}
/* 테두리 없이 반투명 흰 면만. 뒤에 깔린 배경 사진이 비친다 */
/* 완전한 알약 모양. 좌우 여백을 넓혀야 글자가 둥근 모서리 안쪽으로 들어오지 않는다 */
.vcm-item{
  display:grid;gap:8px;padding:20px 44px;
  background:rgba(255,255,255,.5);
  border-radius:999px;
  transition:transform .25s,box-shadow .25s;
}
.vcm-item:hover{transform:translateX(6px);box-shadow:0 6px 20px rgba(0,0,0,.06)}

/* Visual → Communication → Media 순서에 맞춰 브랜드 초록에서 보라로 건너간다.
   면이 아니라 단어에만 색을 주어 배경 사진을 가리지 않는다. */
.vcm-item:nth-child(1) b{color:#277539}   /* VISUAL — 브랜드 초록 */
.vcm-item:nth-child(2) b{color:#1c6091}   /* COMMUNICATION — 둘을 잇는 색 */
.vcm-item:nth-child(3) b{color:#4f00cc}   /* MEDIA — 브랜드 보라 */
.vcm-item b{
  font-size:26px;font-weight:800;line-height:1.25;letter-spacing:-.01em;
  transition:letter-spacing .25s;
}
.vcm-item:hover b{letter-spacing:.03em}
.vcm-item p{font-size:18px;line-height:1.75;color:#3a3833;transition:color .25s,font-weight .25s}
.vcm-item:hover p{color:var(--ink);font-weight:600}
.intro-note{font-size:17px;line-height:1.85;color:var(--ink);text-wrap:pretty}

.band{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band .wrap{padding-top:90px;padding-bottom:100px}
.sec-head{margin-bottom:44px}
.sec-head h2{font-size:30px;font-weight:700;letter-spacing:-.03em}
.sec-head p{margin-top:10px;font-size:16px;color:var(--muted)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}

.svc{
  display:flex;flex-direction:column;gap:18px;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.svc-thumb{position:relative;aspect-ratio:16/9;overflow:hidden}
/* 사진 두 장을 겹쳐 두고 위쪽 장을 서서히 나타나게 해 자연스럽게 바뀌게 한다.
   아래 장은 그대로 두어야 전환 중에 배경이 비치는 순간이 생기지 않는다.
   별도 레이어라서 확대해도 액자 밖으로 넘치지 않는다. */
.svc-a,.svc-b{
  position:absolute;inset:0;z-index:1;
  transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .45s ease;
}
.svc-a{background:var(--ph-sm)}
.svc-a img,.svc-b img{width:100%;height:100%;object-fit:cover}
.svc-b{opacity:0}
.svc-veil{
  position:absolute;inset:0;z-index:2;opacity:0;
  background:linear-gradient(to top,rgba(20,19,17,.7),rgba(20,19,17,0) 62%);
  transition:opacity .4s;
}
.svc-tag{
  position:absolute;left:14px;bottom:12px;z-index:3;
  font:500 10.5px var(--mono);letter-spacing:.08em;color:rgba(0,0,0,.35);
  transition:color .4s,transform .4s cubic-bezier(.22,.61,.36,1);
}
.svc h3{font-size:20px;font-weight:700;letter-spacing:-.02em;transition:color .35s}
.svc p{font-size:15.5px;line-height:1.8;color:var(--muted);text-wrap:pretty;transition:color .35s}

.svc:hover{transform:translateY(-8px)}
.svc:hover .svc-a,.svc:hover .svc-b{transform:scale(1.07)}
.svc.has-b:hover .svc-b{opacity:1}
.svc:hover .svc-veil{opacity:1}
.svc:hover .svc-tag{color:rgba(250,248,244,.92);transform:translateY(-3px)}
.svc:hover h3{color:var(--accent-strong)}
.svc:hover p{color:#3a3833}

/* ---------- portfolio ---------- */
.pf-bar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  margin:0 0 32px;padding:0 var(--pad);
}
.pf-count{font-size:15.5px;color:var(--muted)}
.chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.chip{
  padding:11px 24px;font-size:15px;font-weight:600;cursor:pointer;
  border:1px solid var(--line-3);background:transparent;border-radius:2px;
  transition:all .2s;
}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;width:100%}
.pf-item{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--ph-sm);cursor:pointer;border:0;padding:0;width:100%;
  display:block;text-align:left;
}
.pf-item .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf-item .still{
  position:absolute;left:14px;bottom:12px;
  font:500 10.5px var(--mono);color:rgba(0,0,0,.35);
}
/* 평소에는 어둡게 덮고 글자를 보여준다.
   마우스를 올리면 덮개가 걷히며 썸네일이 원래 밝기로 드러난다. */
.pf-item .ov{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:24px;text-align:center;
  background:rgba(20,19,17,.72);opacity:1;
  transition:opacity .32s,background .32s;
}
.pf-item:hover .ov,.pf-item:focus-visible .ov{opacity:0;background:rgba(20,19,17,0)}
.pf-item .cat{font:500 11.5px var(--mono);letter-spacing:.1em;color:var(--accent-light)}
.pf-item .ttl{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.45;color:var(--on-dark);text-wrap:pretty}
/* 분류를 누르면 썸네일이 새 자리로 미끄러진다.
   얼마나 옮겨야 하는지는 site.js 가 재서 transform 으로 넣고,
   여기서는 그 움직임의 속도와 곡선만 정한다.
   뒤에 있다가 앞으로 올라와 처음 보이는 것은 떠오르며 켜진다. */
.pf-item.pf-move{transition:transform .42s cubic-bezier(.22,.61,.36,1)}
.pf-item.pf-in{animation:pfIn .42s cubic-bezier(.22,.61,.36,1) both}
@keyframes pfIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.more-wrap{display:flex;justify-content:center;margin-top:60px}
/* display:flex 가 UA 의 [hidden] 을 이겨서 따로 눌러 준다 */
.more-wrap[hidden]{display:none}
.btn-more{
  border:1px solid var(--line-3);background:transparent;
  padding:16px 52px;font-size:15px;font-weight:600;letter-spacing:.02em;
  cursor:pointer;border-radius:2px;transition:all .2s;
}
.btn-more:hover{border-color:var(--ink);background:var(--ink);color:var(--on-dark)}
/* .is-over 는 아래 갤러리 항목 뒤에 있다. 여기 두면 .gal-item{display:block} 에 진다. */
.pf-empty{padding:80px 40px;text-align:center;color:var(--faint);font-size:16px}

/* 분류 칩 아래부터 화면 폭 전체가 검은 띠다.
   썸네일 사이 5px 간격이 검은 선이 되어 영상이 도드라진다.
   section 의 아래 여백을 이 안으로 가져와 검정이 푸터까지 이어지게 한다. */
.pf-dark{background:#000;padding-bottom:110px}
.pf-dark .pf-item{background:#000}
.pf-dark .pf-item .still{color:rgba(255,255,255,.35)}
.pf-dark .pf-empty{color:rgba(255,255,255,.5)}
/* 검은 바탕 위에서는 테두리·글씨를 희게 두고 면은 검게 둔다.
   마우스를 올리면 흑백을 뒤집는다. 원래 규칙(먹색으로 채우기)을 그대로 두면
   올렸을 때 버튼이 배경에 묻혀 사라진다. */
.pf-dark .btn-more{border-color:#fff;background:#000;color:#fff}
.pf-dark .btn-more:hover{border-color:#fff;background:#fff;color:#000}

/* ---------- studio ---------- */
.slider{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--dark)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
.slide[data-active]{opacity:1;pointer-events:auto}
.slide img{width:100%;height:100%;object-fit:cover}
.slide-ph{
  width:100%;height:100%;background:var(--ph-sm);
  display:flex;align-items:center;justify-content:center;
}
.slide-ph span{font:500 12px var(--mono);color:rgba(0,0,0,.35);letter-spacing:.08em}
.slider-scrim{
  position:absolute;inset:auto 0 0 0;height:190px;pointer-events:none;
  background:linear-gradient(to top,rgba(16,15,14,.72),rgba(16,15,14,0));
}
.slider-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:62px;height:62px;border-radius:50%;
  border:1px solid rgba(250,248,244,.5);
  background:rgba(20,19,17,.32);backdrop-filter:blur(6px);
  color:var(--on-dark);font-size:22px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .22s;
}
.slider-nav:hover{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}
.slider-nav.prev{left:28px}
.slider-nav.next{right:28px}
.slider-foot{
  position:absolute;left:0;right:0;bottom:0;padding:0 var(--pad) 30px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
}
.slide-no{font:500 11.5px var(--mono);letter-spacing:.12em;color:rgba(250,248,244,.72)}
.slide-title{font-size:28px;font-weight:700;letter-spacing:-.03em;color:var(--on-dark);margin-top:10px}
.dots{display:flex;align-items:center;gap:7px}
.dot{
  width:9px;height:9px;border-radius:99px;border:0;padding:0;cursor:pointer;
  background:rgba(250,248,244,.45);transition:all .3s;
}
.dot[aria-current="true"]{width:28px;background:var(--on-dark)}

.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:44px 26px}
.feat{transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.feat-thumb{position:relative;aspect-ratio:16/9;overflow:hidden}
.feat-img{
  position:absolute;inset:0;z-index:1;background:var(--ph);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.feat-img img{width:100%;height:100%;object-fit:cover}
.feat-veil{
  position:absolute;inset:0;z-index:2;opacity:0;
  background:linear-gradient(to top,rgba(20,19,17,.7),rgba(20,19,17,0) 62%);
  transition:opacity .4s;
}
.feat-tag{
  position:absolute;left:14px;bottom:12px;z-index:3;
  font:500 10.5px var(--mono);letter-spacing:.08em;color:rgba(0,0,0,.35);
  transition:color .4s,transform .4s cubic-bezier(.22,.61,.36,1);
}
.feat h3{font-size:21px;font-weight:700;letter-spacing:-.02em;margin-top:20px;transition:color .35s}
.feat p{font-size:16px;line-height:1.8;color:var(--muted);margin-top:12px;text-wrap:pretty;transition:color .35s}

.feat:hover{transform:translateY(-8px)}
.feat:hover .feat-img{transform:scale(1.07)}
.feat:hover .feat-veil{opacity:1}
.feat:hover .feat-tag{color:rgba(250,248,244,.92);transform:translateY(-3px)}
.feat:hover h3{color:var(--accent-strong)}
.feat:hover p{color:#3a3833}

.price{
  background:var(--dark);color:var(--on-dark);
  padding:56px;display:grid;grid-template-columns:1fr 1fr;gap:60px;
}
.price h2{font-size:30px;font-weight:700;letter-spacing:-.03em;margin-bottom:26px}
.price-lead{font-size:17px;line-height:1.85;color:rgba(250,248,244,.72);margin-bottom:30px;text-wrap:pretty}
.price-rows{display:flex;flex-direction:column;gap:14px;border-top:1px solid rgba(250,248,244,.18);padding-top:24px}
.price-row{display:flex;justify-content:space-between;font-size:16px}
.price-row span:first-child{color:rgba(250,248,244,.7)}
.price-row span:last-child{font-weight:600}

.calc{background:var(--bg);color:var(--ink);padding:34px 32px;display:flex;flex-direction:column;gap:22px}
.calc h3{font-size:20px;font-weight:700;letter-spacing:-.02em}
.calc-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600;color:var(--muted)}
.field input,.field textarea,.field select{
  border:1px solid var(--line-3);background:var(--surface);
  padding:12px 14px;font-size:17px;font-weight:600;color:var(--ink);
  border-radius:2px;width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--accent-strong);outline:none;box-shadow:0 0 0 3px rgba(39,117,57,.15);
}
.calc-equip{display:flex;flex-direction:column;gap:10px}
.calc-equip>span{font-size:14px;font-weight:600;color:var(--muted)}
.eq-check{
  display:flex;align-items:center;gap:10px;font-size:15px;cursor:pointer;
  padding:6px 0;border-bottom:1px solid rgba(0,0,0,.07);
}
.eq-check input{width:16px;height:16px;accent-color:var(--accent-strong);cursor:pointer}
.eq-check .nm{flex:1}
.eq-check .pr{font-weight:600;font-variant-numeric:tabular-nums}
.calc-out{
  display:flex;flex-direction:column;gap:9px;
  border-top:1px solid var(--line-2);padding-top:18px;font-size:15px;
}
.calc-out div{display:flex;justify-content:space-between}
.calc-out div span:first-child{color:var(--muted)}
.calc-out div span:last-child{font-variant-numeric:tabular-nums}
.calc-total{
  border-top:1px solid var(--line-2);padding-top:14px;margin-top:5px;align-items:baseline;
}
.calc-total span:first-child{font-size:16px;font-weight:700;color:var(--ink)!important}
.calc-total span:last-child{
  font-size:26px;font-weight:700;letter-spacing:-.02em;
  color:var(--accent-strong);font-variant-numeric:tabular-nums;
}

.eq-table{background:var(--surface);border:1px solid var(--line)}
.eq-row{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 30px;border-bottom:1px solid rgba(0,0,0,.07);
}
.eq-row:last-child{border-bottom:0}
.eq-row .meta{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.eq-row .code{font:500 11px var(--mono);color:rgba(0,0,0,.3)}
.eq-row .nm{font-size:17.5px;font-weight:600;letter-spacing:-.01em}
.eq-row .det{font-size:14.5px;color:var(--faint);letter-spacing:-.01em}
.eq-row .pr{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.gal-item{
  position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ph-sm);
  border:0;padding:0;width:100%;cursor:pointer;display:block;
}
.gal-item .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gal-item .still{position:absolute;left:12px;bottom:12px;font:500 10.5px var(--mono);color:rgba(0,0,0,.35)}
.gal-item .ov{position:absolute;inset:0;background:rgba(26,25,23,0);transition:background .25s}
.gal-item:hover .ov,.gal-item:focus-visible .ov{background:rgba(26,25,23,.24)}

/* 더보기로 감춰 두는 항목.
   .pf-item 과 .gal-item 이 저마다 display 를 지정하는데 특정도가 같아서 순서로 갈린다.
   그래서 항목 규칙보다 반드시 뒤에 있어야 한다. 페이지의 <noscript> 가 다시 뒤에서 푼다. */
.is-over{display:none}

/* ---------- contact ---------- */
.contact{position:relative;min-height:calc(100vh - 78px)}
/* 배경 사진을 막 없이 그대로 쓴다.
   글자가 흰색이라 사진이 없을 때는 어두운 자리표시가 대신 깔려야 읽힌다. */
.contact-bg{
  position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,#2a2825 0 14px,#333029 14px 28px);
}
.contact-bg.has-img{background-size:cover;background-position:center;background-repeat:no-repeat}
/* 폼 칼럼을 넓혀 입력창 폭을 키운다 (.9/1.1 → .76/1.24, 입력창 기준 +15%) */
.contact .wrap{
  position:relative;
  display:grid;grid-template-columns:.76fr 1.24fr;gap:80px;align-items:start;
  padding-top:110px;padding-bottom:120px;
}
/* 왼쪽 안내 영역은 전부 흰 글자 */
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.22em;color:#fff}
.contact h1{font-size:40px;font-weight:700;letter-spacing:-.035em;line-height:1.35;margin:20px 0 22px;color:#fff}
.contact-lead{font-size:17.5px;line-height:1.85;color:#fff;margin-bottom:44px;text-wrap:pretty}
.contact-info{
  display:flex;flex-direction:column;gap:18px;
  border-top:1px solid rgba(255,255,255,.32);padding-top:28px;font-size:16px;
}
.contact-info>div{display:grid;grid-template-columns:96px 1fr;gap:12px}
.contact-info dt{color:#fff}
.contact-info dd{margin:0;font-weight:600;line-height:1.6;color:#fff}
/* 판 자체는 없애고 입력칸만 배경 위에 떠 있게 한다.
   좌우 여백을 없애 입력칸이 칼럼 폭을 그대로 쓰도록 했다(이전보다 약 20% 넓어진다). */
.contact-form{
  --lbl:84px;          /* 라벨 칸 폭 — 17px 글자로 '문의 내용'이 한 줄에 들어가야 한다 */
  --lbl-gap:18px;      /* 라벨과 입력칸 사이 */
  background:none;
  padding:44px 0 40px;display:flex;flex-direction:column;gap:24px;
}
/* 라벨을 입력칸 왼쪽에 붙인다.
   textarea 는 높이가 커서 세로 가운데 정렬하면 라벨이 한참 내려가므로,
   위쪽 정렬 후 입력칸 안쪽 여백만큼 라벨을 내려 첫 줄과 눈높이를 맞춘다. */
.contact-form .field{
  flex-direction:row;align-items:flex-start;gap:var(--lbl-gap);
  font-size:17px;color:#fff;
}
.contact-form .field>span{flex:0 0 var(--lbl);padding-top:14px;white-space:nowrap}
.contact-form .field>input,.contact-form .field>textarea{flex:1 1 auto;min-width:0}
.contact-form .field input,.contact-form .field textarea{border:0}
.contact-form .field input,.contact-form .field textarea{
  font-size:16px;font-weight:400;
  background:rgba(255,255,255,.65);
  transition:background .2s;
}
/* 입력 중인 칸만 완전히 불투명해져서 글자가 또렷하게 읽힌다 */
.contact-form .field input:focus,.contact-form .field textarea:focus{background:#fff}
.contact-form textarea{line-height:1.7;resize:vertical}
/* 라벨 칸만큼 밀어서 입력칸과 좌우 폭을 정확히 맞춘다 */
.btn-submit{
  border:0;background:#4f00cc;color:#fff;
  margin-left:calc(var(--lbl) + var(--lbl-gap));
  padding:9px;font-size:16.5px;font-weight:700;letter-spacing:-.01em;
  cursor:pointer;border-radius:2px;transition:background .2s;
}
.btn-submit:hover{background:#3d009e}
.form-note{
  font-size:13.5px;color:#fff;text-align:center;
  margin-left:calc(var(--lbl) + var(--lbl-gap));
}

/* ---------- footer ---------- */
.site-footer{background:var(--dark);color:rgba(250,248,244,.7)}
.footer-inner{
  max-width:var(--wrap);margin:0 auto;padding:54px var(--pad);
  display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap;
}
.footer-co{display:flex;flex-direction:column;gap:11px;font-size:16px;line-height:1.4}
.footer-co b{font-size:20.4px;font-weight:700;color:var(--on-dark);letter-spacing:.02em}
.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:46px}
/* 브랜드 아이콘은 각자 고유한 색을 가지므로 그대로 쓴다.
   세 SVG 가 같은 클래스명(.cls-1 …)을 써서 인라인으로 넣으면 서로 색을 덮어쓴다.
   개별 이미지로 심어 문서를 분리했다. */
.sns{display:flex;gap:18px}
.sns a{
  display:block;width:44px;height:44px;
  opacity:.9;
  transition:opacity .2s,transform .25s cubic-bezier(.22,.61,.36,1);
}
.sns a:hover,.sns a:focus-visible{opacity:1;transform:translateY(-3px)}
/* display:block 이 [hidden] 보다 우선순위가 높아 따로 눌러줘야 한다 */
.sns a[hidden]{display:none}
.sns img{width:100%;height:100%;display:block}
/* 관리자 입구. 로고를 옅게 두었다가 마우스를 올리면 또렷해진다 */
.adm-link{display:block;opacity:.42;transition:opacity .22s}
.adm-link:hover,.adm-link:focus-visible{opacity:1}
/* 세로형(2줄)이라 가로형보다 높이가 필요하다 */
.adm-link svg{height:28px;width:auto;display:block;fill:var(--on-dark)}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:100;
  background:rgba(12,11,10,.9);
  display:flex;align-items:center;justify-content:center;padding:60px;
  animation:fade .2s ease;
}
.lb[hidden]{display:none}
.lb-close{
  position:absolute;top:26px;right:32px;
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:transparent;
  color:#fff;font-size:20px;cursor:pointer;
}
.lb-close:hover{background:#fff;color:var(--ink)}
.lb-body{width:min(1100px,100%);animation:pop .26s ease}
.lb-frame{
  aspect-ratio:16/9;position:relative;overflow:hidden;
  background:repeating-linear-gradient(135deg,#2a2825 0 12px,#333029 12px 24px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
}
.lb-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.lb-frame .m{font:500 12px var(--mono);color:rgba(255,255,255,.5);position:relative}
.lb-frame .d{font-size:16px;color:rgba(255,255,255,.75);position:relative;text-align:center;padding:0 24px}
.lb-cap{display:flex;align-items:baseline;gap:14px;margin-top:20px}
.lb-cap .cat{font:500 11px var(--mono);letter-spacing:.08em;color:var(--accent-light)}
.lb-cap h3{font-size:20px;font-weight:600;color:var(--on-dark);letter-spacing:-.02em}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}

.page[hidden]{display:none}

/* ================= 관리자 ================= */
.adm-login{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px;background:var(--dark);
}
.adm-login form{
  width:min(420px,100%);background:var(--bg);padding:44px 40px 36px;
  display:flex;flex-direction:column;gap:20px;
}
.adm-login .brand{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.adm-login .brand b{font-size:23px;font-weight:700;letter-spacing:-.03em}
.adm-login .brand span{font-size:14px;color:var(--muted)}
.adm-hint{
  font-size:13px;color:var(--muted);background:rgba(63,131,75,.08);
  border-left:2px solid var(--accent);padding:10px 12px;line-height:1.6;
}

.adm{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.adm-side{
  background:var(--dark);color:rgba(250,248,244,.7);
  display:flex;flex-direction:column;padding:28px 0;
}
.adm-side .brand{padding:0 24px 24px;display:flex;flex-direction:column;gap:6px}
.adm-side .brand b{font-size:17px;font-weight:700;color:var(--on-dark);letter-spacing:-.02em}
.adm-side .brand span{font:500 10.5px var(--mono);letter-spacing:.1em;color:rgba(250,248,244,.42)}
.adm-nav{display:flex;flex-direction:column;gap:2px;padding:0 12px}
.adm-nav button{
  text-align:left;border:0;background:transparent;color:rgba(250,248,244,.68);
  padding:12px 14px;font-size:15px;font-weight:600;border-radius:2px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  transition:background .18s,color .18s;
}
.adm-nav button:hover{background:rgba(250,248,244,.08);color:var(--on-dark)}
.adm-nav button[aria-current="true"]{background:var(--accent);color:#fff}
.adm-nav .badge{
  font:600 11px var(--mono);padding:2px 7px;border-radius:99px;
  background:rgba(250,248,244,.16);color:var(--on-dark);
}
.adm-nav button[aria-current="true"] .badge{background:rgba(0,0,0,.25)}
/* 메뉴 바로 아래에 붙인다. 화면 아래 끝까지 내려가 있으면 메뉴에서 너무 멀어 오가기 불편하다.
   좌우 여백을 .adm-nav 와 맞춰 구분선이 메뉴 칸과 같은 자리에서 시작하게 한다. */
.adm-side .foot{
  margin:16px 12px 0;padding:18px 14px 0;
  border-top:1px solid rgba(250,248,244,.14);
  display:flex;flex-direction:column;gap:12px;
}
.adm-side .foot a,.adm-side .foot button{
  font-size:13.5px;color:rgba(250,248,244,.55);background:none;border:0;padding:0;
  text-align:left;cursor:pointer;transition:color .2s;
}
.adm-side .foot a:hover,.adm-side .foot button:hover{color:var(--on-dark)}

.adm-main{background:var(--bg);min-width:0}
.adm-head{
  position:sticky;top:0;z-index:10;
  background:rgba(250,248,244,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:26px 36px;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.adm-head h1{font-size:23px;font-weight:700;letter-spacing:-.03em}
.adm-head p{font-size:14px;color:var(--muted);margin-top:5px}
.adm-body{padding:32px 36px 80px}

.btn{
  border:1px solid var(--line-3);background:transparent;color:var(--ink);
  padding:11px 20px;font-size:14.5px;font-weight:600;
  border-radius:2px;cursor:pointer;transition:all .18s;white-space:nowrap;
}
.btn:hover{border-color:var(--ink)}
.btn-primary{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.btn-primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.btn-sm{padding:7px 12px;font-size:13px}
.btn-danger{color:var(--danger);border-color:rgba(163,58,47,.35)}
.btn-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}

.card{background:var(--surface);border:1px solid var(--line)}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{
  text-align:left;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--faint);
  text-transform:uppercase;padding:14px 16px;border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.015);white-space:nowrap;
}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:rgba(0,0,0,.015)}
.tbl .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl-scroll{overflow-x:auto}

.thumb-cell{
  width:104px;height:59px;background:var(--ph-sm);position:relative;overflow:hidden;flex:0 0 auto;
}
.thumb-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb-cell span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:500 10px var(--mono);color:rgba(0,0,0,.3);
}
.row-title{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.row-sub{font:500 11.5px var(--mono);color:var(--faint);margin-top:4px}

.pill{
  display:inline-block;padding:4px 10px;border-radius:99px;
  font-size:12.5px;font-weight:600;white-space:nowrap;
  background:rgba(0,0,0,.06);color:var(--muted);
}
.pill-on{background:rgba(63,131,75,.14);color:var(--accent-strong)}
.pill-off{background:rgba(0,0,0,.07);color:var(--faint)}
.pill-warn{background:rgba(163,58,47,.12);color:var(--danger)}

.row-acts{display:flex;gap:6px;justify-content:flex-end}
.ord{display:flex;gap:4px}
.ord button{
  width:28px;height:28px;border:1px solid var(--line-3);background:transparent;
  cursor:pointer;border-radius:2px;font-size:12px;line-height:1;
}
.ord button:hover:not(:disabled){border-color:var(--ink)}
.ord button:disabled{opacity:.28;cursor:default}
/* 끌기 손잡이. touch-action 을 꺼야 손가락으로 끌 때 화면이 같이 스크롤되지 않는다 */
.ord .drag{cursor:grab;touch-action:none;font-size:14px;color:var(--faint);border-color:transparent}
.ord .drag:active{cursor:grabbing}
.tbl tr.is-dragging{background:rgba(63,131,75,.1)}
.tbl tr.is-dragging td{opacity:.7}
/* 순서를 바꾸면 표 아래에 붙어 따라다니는 저장줄 */
.ord-save{
  position:sticky;bottom:0;z-index:5;
  display:flex;align-items:center;justify-content:flex-end;gap:14px;
  margin-top:14px;padding:14px 16px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 -6px 18px rgba(0,0,0,.07);
}
.ord-save span{font-size:13.5px;color:var(--muted)}
/* display:flex 가 브라우저 기본 [hidden] 규칙을 이겨 버리므로 여기서 다시 감춘다 */
.ord-save[hidden]{display:none}

.adm-tabs{display:flex;gap:8px;margin-bottom:22px}
.adm-tabs button{
  padding:9px 18px;font-size:14px;font-weight:600;cursor:pointer;border-radius:2px;
  border:1px solid var(--line-3);background:transparent;color:var(--ink);transition:all .18s;
}
.adm-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}

.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.img-card{background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column}
.img-card .box{position:relative;aspect-ratio:16/9;background:var(--ph-sm);overflow:hidden}
.img-card .box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.img-card .box span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:500 11px var(--mono);color:rgba(0,0,0,.3);
}
.img-card .meta{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.img-card .meta b{font-size:14.5px;font-weight:600;letter-spacing:-.01em}

/* 상담문의 배경 미리보기 — 글자 위에 덮이는 반투명 막까지 그대로 보여준다 */
.bg-card{background:var(--surface);border:1px solid var(--line);max-width:760px}
.bg-card .box{position:relative;aspect-ratio:16/9;background:var(--ph);overflow:hidden}
.bg-card .box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bg-card .box .scrim{position:absolute;inset:0;background:rgba(250,248,244,.78)}
.bg-card .box .demo{position:absolute;left:34px;top:50%;transform:translateY(-50%)}
.bg-card .box .demo span{font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--accent-strong)}
.bg-card .box .demo b{display:block;margin-top:8px;font-size:24px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.bg-card .box .demo em{display:block;margin-top:8px;font-size:13px;font-style:normal;color:var(--muted)}
.bg-card .meta{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.bg-card .meta b{font-size:14.5px;font-weight:600}

/* 히어로 미리보기 — 실제 화면처럼 어두운 그라디언트와 문구를 얹어 보여준다 */
.hero-cards{display:grid;gap:20px;max-width:840px}
.hero-card{background:var(--surface);border:1px solid var(--line)}
.hero-card .box{position:relative;aspect-ratio:21/9;background:var(--ph);overflow:hidden}
.hero-card .box img,.hero-card .box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-card .box .grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,19,17,.25),rgba(20,19,17,.65))}
.hero-card .box .demo{
  position:absolute;left:26px;bottom:22px;color:#fff;
  font-size:17px;font-weight:700;letter-spacing:-.025em;line-height:1.4;
}
.hero-card .box .kind{
  position:absolute;top:14px;left:16px;
  font:600 10.5px var(--mono);letter-spacing:.1em;color:rgba(255,255,255,.85);
}
.hero-card .meta{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.hero-card .meta b{font-size:15px;font-weight:600;letter-spacing:-.01em}

/* 사업영역 — 기본 사진과 마우스 오버 사진을 나란히 보여준다 */
.svc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:920px}
.svc-card{background:var(--surface);border:1px solid var(--line)}
.svc-card .pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.svc-card .slot{position:relative;aspect-ratio:16/9;background:var(--ph-sm);overflow:hidden}
.svc-card .slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc-card .slot .none{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:500 11px var(--mono);color:rgba(0,0,0,.3);
}
.svc-card .slot .lab{
  position:absolute;left:0;bottom:0;padding:5px 9px;
  font:600 10.5px var(--mono);letter-spacing:.06em;
  background:rgba(20,19,17,.72);color:#fff;
}
.svc-card .meta{padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.svc-card .meta b{font-size:15px;font-weight:600;letter-spacing:-.01em}

.inq{border-bottom:1px solid var(--line)}
.inq:last-child{border-bottom:0}
.inq-head{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  padding:16px 20px;display:grid;grid-template-columns:132px 1fr auto auto;
  align-items:center;gap:16px;
}
.inq-head:hover{background:rgba(0,0,0,.015)}
.inq-date{font:500 12.5px var(--mono);color:var(--faint);white-space:nowrap}
.inq-who b{font-size:15px;font-weight:600}
.inq-who span{font-size:13px;color:var(--muted);margin-left:8px}
.inq-subj{font-size:14.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inq-body{padding:0 20px 22px 168px;font-size:15px;line-height:1.85;color:#3a3833;white-space:pre-line}
.inq-body[hidden]{display:none}

.set-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:640px}
.set-note{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.7}
.eq-edit{display:grid;grid-template-columns:88px 1fr 1.4fr 150px;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.eq-edit:last-child{border-bottom:0}
.eq-edit code{font:500 11.5px var(--mono);color:var(--faint)}
.eq-edit input{
  border:1px solid var(--line-3);background:var(--surface);
  padding:9px 12px;font-size:14.5px;border-radius:2px;width:100%;
}
.eq-edit input:focus{border-color:var(--accent-strong);outline:none;box-shadow:0 0 0 3px rgba(39,117,57,.15)}
.eq-edit input[type=number]{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}

/* 관리자 모달 */
.modal{
  position:fixed;inset:0;z-index:120;background:rgba(12,11,10,.72);
  display:flex;align-items:center;justify-content:center;padding:40px;
  animation:fade .18s ease;
}
.modal[hidden]{display:none}
.modal form{
  width:min(560px,100%);max-height:88vh;overflow:auto;
  background:var(--bg);padding:34px 36px 30px;
  display:flex;flex-direction:column;gap:20px;animation:pop .24s ease;
}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.modal-head h3{font-size:21px;font-weight:700;letter-spacing:-.025em}
.modal-head p{font-size:13.5px;color:var(--faint);margin-top:6px}
.modal-close{
  width:34px;height:34px;border:1px solid var(--line-3);background:transparent;
  border-radius:50%;font-size:15px;cursor:pointer;flex:0 0 auto;
}
.modal-close:hover{border-color:var(--ink)}
.modal .field input,.modal .field select{font-size:15.5px;font-weight:400}
.drop{
  border:1px dashed var(--line-3);background:var(--surface);
  padding:16px;display:flex;align-items:center;gap:16px;
}
.drop .prev{width:132px;height:74px;background:var(--ph-sm);position:relative;overflow:hidden;flex:0 0 auto}
.drop .prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.drop .prev span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:500 10px var(--mono);color:rgba(0,0,0,.3)}
.drop .txt{font-size:13.5px;color:var(--muted);line-height:1.7}
.drop input[type=file]{font-size:13px;margin-top:8px;max-width:100%}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}

/* ---------- 전송 완료 안내 ---------- */
.sent{
  position:fixed;inset:0;z-index:130;
  background:rgba(12,11,10,.72);
  display:flex;align-items:center;justify-content:center;padding:32px;
  animation:fade .2s ease;
}
.sent[hidden]{display:none}
.sent-card{
  width:min(440px,100%);background:var(--bg);
  padding:46px 40px 34px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  animation:pop .28s ease;
}
.sent-mark{
  width:64px;height:64px;border-radius:50%;
  background:rgba(79,0,204,.1);
  display:flex;align-items:center;justify-content:center;
}
/* 체크 표시가 그려지듯 나타난다 */
.sent-mark svg{
  width:30px;height:30px;fill:none;stroke:#4f00cc;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:32;stroke-dashoffset:32;
  animation:tick .5s cubic-bezier(.22,.61,.36,1) .2s forwards;
}
@keyframes tick{to{stroke-dashoffset:0}}
.sent-card h3{font-size:21px;font-weight:700;letter-spacing:-.025em;line-height:1.45}
.sent-card p{font-size:15.5px;line-height:1.8;color:var(--muted);text-wrap:pretty}
.sent-card p b{color:var(--ink);font-weight:600}
.sent-sub{font-size:14px!important;color:var(--faint)!important}
.sent-ok{
  width:100%;margin-top:12px;border:0;
  background:#4f00cc;color:#fff;
  padding:15px;font-size:16px;font-weight:700;
  border-radius:2px;cursor:pointer;transition:background .2s;
}
.sent-ok:hover{background:#3d009e}

.toast{
  position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(12px);
  z-index:200;background:var(--ink);color:var(--on-dark);
  padding:14px 24px;border-radius:3px;font-size:14.5px;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.empty{padding:60px 20px;text-align:center;color:var(--faint);font-size:15px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .intro,.contact .wrap{grid-template-columns:1fr;gap:48px}
  .price{grid-template-columns:1fr;gap:40px;padding:44px}
}
@media (max-width:860px){
  :root{--pad:24px}
  .header-inner{height:64px;gap:20px}
  .logo svg{height:34px}
  .gnb{gap:20px}
  .gnb a{font-size:14.5px}
  .hero--about{height:420px}
  .hero--studio{height:320px}
  .hero h1{font-size:30px}
  .hero--studio h1{font-size:28px}
  .page-head{padding-top:48px}
  .page-head h1{font-size:27px}
  .grid-3,.gal-grid{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:1fr;gap:36px}
  .pf-bar{grid-template-columns:1fr;gap:14px;justify-items:start}
  .chips{justify-content:flex-start}
  .slider-nav{width:44px;height:44px}
  .slider-nav.prev{left:12px}
  .slider-nav.next{right:12px}
  .slide-title{font-size:20px}
  .contact-form{--lbl:78px;padding:28px 0 0}
  .lb{padding:20px}
  .footer-right{align-items:flex-start}

  .adm{grid-template-columns:1fr}
  .adm-side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 20px}
  .adm-side .brand{padding:0;flex:1 1 100%}
  .adm-nav{flex-direction:row;flex-wrap:wrap;padding:0}
  .adm-side .foot{margin:0;padding:10px 0 0;flex-direction:row;gap:18px;flex:1 1 100%}
  .adm-head,.adm-body{padding-left:20px;padding-right:20px}
  .set-grid{grid-template-columns:1fr}
  .eq-edit{grid-template-columns:1fr;gap:8px}
  .inq-head{grid-template-columns:1fr;gap:6px}
  .inq-body{padding-left:20px}
}
@media (max-width:560px){
  /* 로고와 메뉴를 한 줄에 담으면 휴대폰 폭을 넘긴다.
     로고를 위, 메뉴 4개를 아래 한 줄에 균등 배치해 전부 보이게 한다. */
  .header-inner{
    height:auto;flex-direction:column;align-items:stretch;gap:8px;
    padding:12px var(--pad) 10px;
  }
  .logo{justify-content:center}
  .logo svg{height:38px}
  /* 네 칸을 균등 분할하면 가장 긴 '스튜디오대여' 기준으로 칸이 잡혀 폭이 모자란다.
     글자 폭대로 두고 남는 공간만 사이에 나눈다. */
  .gnb{justify-content:space-between;gap:0}
  .gnb a{font-size:13px;white-space:nowrap}

  .grid-3,.gal-grid,.pf-grid{grid-template-columns:1fr}
  /* 알약 모양을 유지하면서 좁은 폭에 맞춘다 */
  .vcm-item{padding:18px 36px}
  .vcm-item b{font-size:20px}
  .vcm-item p{font-size:16px}
  .intro h2{font-size:24px}
  .sec-head h2,.price h2{font-size:24px}
  .calc-fields{grid-template-columns:1fr}
  .eq-row{flex-direction:column;align-items:flex-start;gap:8px}
  .modal{padding:16px}
  .modal form{padding:24px 20px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  /* 무한 반복 애니메이션은 위 규칙으로 짧아지면 깜빡임이 되므로 아예 끈다 */
  .hero-line,.hero.play .hero-line{animation:none!important;opacity:1!important}
}

/* ═══════════ PHP 판에서 추가된 것 ═══════════ */

/* 분류 칩·카드·확인 버튼이 button 에서 a 로 바뀌었다 */
.chip{display:inline-block;text-align:center}
.pf-item,.gal-item{text-decoration:none}
.sent-ok{display:block;text-align:center;text-decoration:none}

/* 라이트박스에서 재생되는 유튜브.
   제목·채널·공유·동영상 더보기·유튜브 로고는 플레이어 맨 위와 맨 아래 띠에만 그려진다.
   그래서 iframe 을 위아래로 --yt-pad 만큼 키우고 그만큼 끌어올려 그 띠를 프레임 밖으로 내보낸다.
   플레이어가 16:9 보다 세로로 길어지면 영상은 위아래 여백을 두고 가운데 놓이므로,
   위아래를 같은 값으로 늘리면 영상 자체는 프레임에 그대로 꽉 맞는다.
   막(.lb-shield)이 마우스를 막아도 재생·이동 명령을 보내면 유튜브가 이 띠를 잠깐 띄우는데,
   이렇게 잘라 두면 그때도 보이지 않는다. */
.lb-frame{--yt-pad:max(64px,11%)}
.lb-frame iframe{
  position:absolute;left:0;width:100%;border:0;
  top:calc(-1 * var(--yt-pad));
  height:calc(100% + 2 * var(--yt-pad));
}

/* 플레이어를 덮는 투명한 막.
   마우스가 유튜브에 닿지 않아야 제목·공유·나중에 볼 동영상이 뜨지 않는다.
   누르면 재생/일시정지가 되고, 멈춘 동안에는 검게 차서 유튜브의 정지 화면을 가린다. */
.lb-shield{
  position:absolute;inset:0;z-index:2;
  width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s;
}
.lb-shield::before{content:"▶";font-size:54px;color:rgba(255,255,255,.9);opacity:0;transition:opacity .18s}
.lb-shield.is-paused{background:#000}
.lb-shield.is-paused::before{opacity:1}

/* 누른 썸네일을 플레이어 위에 얹어 둔다.
   유튜브가 플레이어를 준비하는 1~2초 동안 iframe 이 검은 배경만 깔고 있어서
   그대로 두면 빈 검은 칸이 보인다. 목록에서 이미 받아 둔 그림이라 곧바로 뜬다.
   영상이 나오기 시작하면(playerState 1) 걷힌다. */
/* .lb-frame img 가 이미지 전용으로 object-fit:contain 을 걸어 두었으므로 같은 자리에서 덮어쓴다 */
.lb-frame img.lb-cover{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;background:transparent;
  transition:opacity .35s;
}
.lb-frame img.lb-cover.is-off{opacity:0;pointer-events:none}

/* 직접 만든 재생바. 막 위에 얹는다.
   유튜브는 재생바와 제목·공유를 한 벌로 같이 띄워서 재생바만 켤 수가 없다.
   그래서 유튜브 UI 는 전부 끈 채로 두고 재생 위치만 우리가 그린다. */
.lb-ctl{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:34px 20px 12px;
  background:linear-gradient(transparent,rgba(0,0,0,.65));
  opacity:0;transition:opacity .18s;
}
.lb-frame:hover .lb-ctl,.lb-ctl:focus-within,.lb-ctl.is-on{opacity:1}
@media (hover:none){.lb-ctl{opacity:1}}   /* 터치 기기에는 hover 가 없다 */

.lb-seek{position:relative;height:14px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.lb-seek::before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:2px;background:rgba(255,255,255,.3)}
.lb-fill{position:relative;width:0;height:4px;border-radius:2px;background:var(--accent-light)}
.lb-fill::after{
  content:"";position:absolute;right:-5px;top:50%;
  width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#fff;
}
.lb-ctl-row{display:flex;align-items:center;gap:12px;margin-top:6px}
.lb-play{
  width:26px;height:26px;padding:0;border:0;border-radius:4px;
  background:transparent;color:#fff;font-size:12px;line-height:1;cursor:pointer;
}
.lb-play:hover{background:rgba(255,255,255,.15)}
.lb-time{margin-left:auto;font:500 12px var(--mono);color:rgba(255,255,255,.8)}

.contact-info a{text-decoration:none}
.contact-info a:hover{text-decoration:underline}

/* 입력값 검증 실패 안내 */
.form-errors{
  background:rgba(163,58,47,.14);
  border-left:3px solid var(--danger);
  padding:14px 16px;display:flex;flex-direction:column;gap:6px;
  font-size:14.5px;font-weight:600;color:#fff;
}

/* 사람에게는 보이지 않고 자동 등록 프로그램만 채우는 칸.
   display:none 은 일부 봇이 걸러내므로 화면 밖으로 밀어낸다. */
.trap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ═══════════ 관리자 (PHP 판) ═══════════ */

/* 사이드바·탭이 button 에서 a 로 바뀌었다 */
.adm-nav a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;font-size:15px;font-weight:600;border-radius:2px;
  color:rgba(250,248,244,.68);text-decoration:none;
  transition:background .18s,color .18s;
}
.adm-nav a:hover{background:rgba(250,248,244,.08);color:var(--on-dark)}
.adm-nav a[aria-current="true"]{background:var(--accent);color:#fff}
.adm-nav a[aria-current="true"] .badge{background:rgba(0,0,0,.25)}
.adm-tabs a{
  display:inline-block;padding:9px 18px;font-size:14px;font-weight:600;
  border:1px solid var(--line-3);border-radius:2px;color:var(--ink);text-decoration:none;
  transition:all .18s;
}
.adm-tabs a:hover{border-color:var(--ink)}
.adm-tabs a[aria-pressed="true"]{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}

/* a 로 만든 버튼 */
a.btn{display:inline-block;text-decoration:none;line-height:1.4}

/* 표 안의 작은 폼이 줄을 만들지 않게 한다 */
.adm .row-acts form,.adm .ord form{display:inline-block;margin:0}
.adm-side .foot form{margin:0}

/* 처리 결과 알림 */
.adm-flash{
  background:rgba(63,131,75,.12);border-left:3px solid var(--accent);
  padding:13px 16px;margin-bottom:22px;font-size:14.5px;font-weight:600;color:var(--accent-strong);
}

/* 히어로 종류 선택 */
.radio-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px;font-size:14px;font-weight:600;cursor:pointer;
  border:1px solid var(--line-3);border-radius:2px;
}
.radio-pill:has(input:checked){background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.radio-pill input{accent-color:var(--accent-strong)}

/* 문의 내역 : details/summary 로 펼친다 */
.inq details summary{list-style:none;cursor:pointer}
.inq details summary::-webkit-details-marker{display:none}
.inq details[open] .inq-head{background:rgba(0,0,0,.02)}
.inq-head{display:grid}
.inq-body{display:block}