:root{--sf-text-n2:clamp(10.88px, 10.88px + 0vw, 10.88px);--sf-text-n1:clamp(13.6px, 13.6px + 0vw, 13.6px);--sf-text-0:clamp(13.94px, 12.96px + 0.31vw, 17px);--sf-text-1:clamp(17px, 15.64px + 0.43vw, 21.25px);--sf-text-2:clamp(21.25px, 19.55px + 0.53vw, 26.56px);--sf-text-3:clamp(26.56px, 24.44px + 0.66vw, 33.2px);--sf-text-4:clamp(33.2px, 30.54px + 0.83vw, 41.5px);--sf-text-5:clamp(41.5px, 38.18px + 1.04vw, 51.88px);--sf-text-6:clamp(51.88px, 47.73px + 1.3vw, 64.85px);--sf-space-0:0px;--sf-space-1:4px;--sf-space-2:8px;--sf-space-3:12px;--sf-space-4:16px;--sf-space-5:24px;--sf-space-6:32px;--sf-space-7:48px;--sf-space-8:64px;--sf-space-9:96px;--sf-space-10:128px;--sf-space-11:160px;--sf-bg:#16140f;--sf-surface:#23211c;--sf-ink:#f4efe8;--sf-muted:#97938d;--sf-line:#3e3b36;--sf-accent:#d98f9a;--sf-accent-ink:#111111;--sf-accent-tint:color-mix(in srgb, #d98f9a 8%, #16140f);--sf-accent-focus:color-mix(in srgb, #d98f9a 45%, transparent);--sf-ease:cubic-bezier(.2,.7,.2,1);--sf-dur-fast:.18s;--sf-dur:.32s;--sf-dur-slow:.7s;--sf-radius-sm:6px;--sf-radius-md:12px;--sf-radius-lg:20px;--sf-radius-pill:999px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:'NanumSquareNeo',system-ui,-apple-system,sans-serif;color:var(--sf-ink);background:var(--sf-bg);line-height:1.65;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-x:clip;overflow-wrap:anywhere}
a{color:inherit}
img{display:block;max-width:100%}
.sf-serif{font-family:'MaruBuri',Georgia,'Times New Roman',serif}
/* container + section rhythm — spacing from the scale, never ad-hoc */
/* NOTE: the 1120/860/640 px literals here and in the @media queries below mirror
   BREAKPOINTS (lg/md/sm) in tokens.ts — @media can't consume CSS custom properties,
   so keep these in sync by hand if BREAKPOINTS ever changes. */
.sf-container{max-width:1120px;margin:0 auto;padding:0 var(--sf-space-6)}
.sf-section{padding:var(--sf-space-9) 0}
.sf-section--tight{padding:var(--sf-space-8) 0}
.sf-surface{background:var(--sf-surface)}
.sf-hairline{height:1px;background:var(--sf-line);border:0}
/* headings from the type scale */
.sf-h1{font-size:var(--sf-text-6);font-weight:700;line-height:1.08;letter-spacing:-.02em}
.sf-h2{font-size:var(--sf-text-4);font-weight:700;line-height:1.15;letter-spacing:-.01em}
.sf-h3{font-size:var(--sf-text-2);font-weight:600;line-height:1.25}
.sf-lead{font-size:var(--sf-text-1);color:var(--sf-muted);max-width:60ch}
.sf-body{font-size:var(--sf-text-0)}
/* eyebrow — brand-driven, used sparingly (NOT one per section) */
.sf-eyebrow{font-size:var(--sf-text-n1);letter-spacing:.14em;text-transform:uppercase;color:var(--sf-accent);font-weight:600}
/* grid */
.sf-grid{display:grid;gap:var(--sf-space-6)}
.sf-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sf-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sf-grid--auto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* focus visibility — brand-driven ring */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--sf-accent-focus);outline-offset:3px}
/* reveal primitive — single shared implementation */
@media(prefers-reduced-motion:no-preference){
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity var(--sf-dur-slow) var(--sf-ease),transform var(--sf-dur-slow) var(--sf-ease)}
[data-reveal].in{opacity:1;transform:none}
.js [data-reveal-stagger]>*{opacity:0;transform:translateY(18px);transition:opacity var(--sf-dur) var(--sf-ease),transform var(--sf-dur) var(--sf-ease)}
[data-reveal-stagger].in>*{opacity:1;transform:none}
[data-reveal-stagger].in>*:nth-child(2){transition-delay:.07s}
[data-reveal-stagger].in>*:nth-child(3){transition-delay:.14s}
[data-reveal-stagger].in>*:nth-child(4){transition-delay:.21s}
}
@media(max-width:860px){.sf-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
.sf-container{padding:0 var(--sf-space-5)}
.sf-section{padding:var(--sf-space-8) 0}
.sf-grid--2,.sf-grid--3{grid-template-columns:1fr}
}
/* ===== 타이포 — 공용 base 의 Pretendard 를 이 시안 것으로 덮는다 =====
   무대·인물 사진과 붙는 헤드라인이라 살짝 각이 서고 자간이 좁은 활자를 쓴다. */
body{font-family:'NanumSquareNeo',system-ui,sans-serif;letter-spacing:-.005em}
/* 숫자·라벨은 폭이 일정한 활자로 — 번호가 줄마다 흔들리지 않는다 */
.sp-num{font-family:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;font-variant-numeric:tabular-nums}

/* ===== nav — 투명 → 스크롤시 어두운 프로스티드 ===== */
.sp-nav{position:fixed;inset:0 0 auto;z-index:40;padding:var(--sf-space-5) 0;border-bottom:1px solid transparent;transition:background var(--sf-dur) var(--sf-ease),padding var(--sf-dur) var(--sf-ease),border-color var(--sf-dur) var(--sf-ease)}
.sp-nav-in{display:flex;align-items:center;justify-content:space-between;gap:var(--sf-space-5)}
.sp-nav.solid{background:color-mix(in srgb,var(--sf-bg) 88%,transparent);backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);padding:var(--sf-space-3) 0;border-color:var(--sf-line)}
.sp-brand{font-size:clamp(17px,1.45vw,20px);font-weight:800;letter-spacing:-.01em;text-decoration:none;color:#fff}
.sp-nav-right{display:flex;align-items:center;gap:var(--sf-space-5)}
.sp-tel{font-size:var(--sf-text-n1);color:color-mix(in srgb,#fff 72%,transparent);letter-spacing:.02em;text-decoration:none;transition:color var(--sf-dur-fast) var(--sf-ease)}
.sp-tel:hover{color:var(--sf-accent)}
.sp-cta{flex:none;background:#fff;color:#16140f;padding:11px 22px;border-radius:var(--sf-radius-pill);text-decoration:none;font-size:var(--sf-text-n1);font-weight:700;transition:transform var(--sf-dur-fast) var(--sf-ease),box-shadow var(--sf-dur-fast) var(--sf-ease)}
.sp-cta:hover{background:var(--sf-accent);color:#16140f}
@media(max-width:640px){.sp-tel{display:none}}

/* ===== 모션 =====
   무대 조명이 서서히 밝아지듯 여는 것이 이 시안의 성격이다. 다만 저사양 기기에서
   스크롤이 죽지 않도록 움직이는 것은 transform/opacity 로만 다루고, 모션을 줄이겠다는
   사용자 설정에서는 전부 정지한다. */
@keyframes sp-zoom{from{transform:scale(1.085)}to{transform:scale(1)}}
@keyframes sp-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes sp-wipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sp-drop{0%{transform:translateY(-30px);opacity:0}35%{opacity:1}100%{transform:translateY(6px);opacity:0}}

/* 첫 화면 — 사진이 아주 천천히 물러나며 글자가 한 줄씩 올라온다 */
.sp-hero-media img{animation:sp-zoom 16s var(--sf-ease) both}
.js .sp-hero-in .sp-kicker,
.js .sp-hero-in h1,
.js .sp-hero-in .sp-hero-lead,
.js .sp-hero-in .sp-hero-btns{opacity:0;animation:sp-rise .95s var(--sf-ease) forwards}
.js .sp-hero-in .sp-kicker{animation-delay:.20s}
.js .sp-hero-in h1{animation-delay:.34s}
.js .sp-hero-in .sp-hero-lead{animation-delay:.50s}
.js .sp-hero-in .sp-hero-btns{animation-delay:.64s}

/* 스크롤 유도 */
.sp-scroll{position:absolute;left:50%;bottom:var(--sf-space-6);z-index:3;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px}
.sp-scroll i{display:block;width:1px;height:54px;background:color-mix(in srgb,#fff 30%,transparent);position:relative;overflow:hidden}
.sp-scroll i::after{content:"";position:absolute;inset:0;background:#fff;animation:sp-drop 2.6s var(--sf-ease) infinite}
.sp-scroll span{font-size:10px;letter-spacing:.28em;color:color-mix(in srgb,#fff 52%,transparent)}

/* 섹션 제목 — 아래에서 밀려 올라오는 마스크. 강조 라인은 좌에서 우로 그어진다 */
.sp-head h2{overflow:hidden}
.sp-head h2 .rv{display:inline-block;will-change:transform}
.js .sp-head h2 .rv{transform:translateY(110%);transition:transform .85s var(--sf-ease)}
.js .sp-head.in h2 .rv{transform:none}
.js .sp-head .sp-line{transform:scaleX(0);transform-origin:left;transition:transform .7s var(--sf-ease) .12s}
.js .sp-head.in .sp-line{transform:scaleX(1)}

@media(prefers-reduced-motion:reduce){
  .sp-hero-media img{animation:none}
  .js .sp-hero-in .sp-kicker,.js .sp-hero-in h1,.js .sp-hero-in .sp-hero-lead,.js .sp-hero-in .sp-hero-btns{opacity:1;animation:none}
  .js .sp-head h2 .rv,.js .sp-head .sp-line{transform:none;transition:none}
  .sp-scroll i::after{animation:none}
}

/* ===== 진입 커튼 · 커스텀 커서 =====
   z-index 는 주입 레이어보다 위여야 한다 — 라이트박스 10000 · 문의 모달 9999 ·
   플로팅 버튼 9998. 커서가 그 아래면 사진을 확대한 순간 커서가 사라진다.
   커튼은 JS 가 만들고 JS 가 지운다. HTML 에 정적으로 두면 스크립트가 실패했을 때
   화면이 영원히 덮인다(과거 리빌 opacity:0 로 본문이 안 보이던 사고와 같은 함정).
   커서는 정밀 포인터가 있는 기기에서만 — 터치에서는 기본 동작을 건드리지 않는다. */
.sp-curtain{position:fixed;inset:0;z-index:10005;background:#0f0d0b;pointer-events:none;transform:translateY(0);transition:transform 1s cubic-bezier(.76,0,.24,1)}
.sp-curtain.up{transform:translateY(-101%)}
.sp-curtain span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:var(--sf-text-n1);letter-spacing:.3em;color:color-mix(in srgb,#fff 55%,transparent);opacity:1;transition:opacity .4s var(--sf-ease)}
.sp-curtain.up span{opacity:0}

.sp-cursor-on,.sp-cursor-on a,.sp-cursor-on button,.sp-cursor-on input,.sp-cursor-on textarea{cursor:none}
.sp-dot,.sp-ring{position:fixed;left:0;top:0;z-index:10010;pointer-events:none;border-radius:50%;transform:translate3d(-50%,-50%,0)}
.sp-dot{width:5px;height:5px;background:var(--sf-accent)}
.sp-ring{width:34px;height:34px;border:1px solid color-mix(in srgb,#fff 45%,transparent);transition:width .28s var(--sf-ease),height .28s var(--sf-ease),background .28s var(--sf-ease),border-color .28s var(--sf-ease)}
.sp-ring.hot{width:70px;height:70px;background:color-mix(in srgb,var(--sf-accent) 16%,transparent);border-color:var(--sf-accent)}
@media(pointer:coarse){.sp-dot,.sp-ring{display:none}}

/* ===== hero — 풀블리드 인물 사진 + 하단 그라디언트 ===== */
.sp-hero{position:relative;min-height:min(92vh,900px);display:flex;align-items:flex-end;overflow:hidden;background:#0f0d0b}
.sp-hero-media{position:absolute;inset:0;z-index:0}
.sp-hero-media img,.sp-hero-media picture{width:100%;height:100%;display:block}
.sp-hero-media img{object-fit:cover;object-position:center 22%}
/* 인물 얼굴이 글자에 가리지 않게 아래에서만 짙어지는 세로 그라디언트 + 좌측 약한 틴트 */
.sp-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,13,11,.46) 0%,rgba(15,13,11,.06) 38%,rgba(15,13,11,.72) 84%,rgba(15,13,11,.92) 100%)}
.sp-hero-in{position:relative;z-index:2;width:100%;padding-block:var(--sf-space-9) var(--sf-space-8)}
.sp-kicker{display:inline-block;font-size:var(--sf-text-n1);font-weight:700;letter-spacing:.02em;color:var(--sf-accent);margin-bottom:var(--sf-space-4)}
.sp-hero h1{font-size:clamp(var(--sf-text-5),7.4vw,var(--sf-text-6));font-weight:900;line-height:1.14;letter-spacing:-.025em;color:#fff;max-width:18ch;text-wrap:balance;margin:0}
.sp-hero-lead{margin-top:var(--sf-space-5);font-size:var(--sf-text-1);font-weight:300;line-height:1.75;text-wrap:pretty;color:color-mix(in srgb,#fff 78%,transparent);max-width:44ch}
.sp-hero-btns{display:flex;flex-wrap:wrap;gap:var(--sf-space-3);margin-top:var(--sf-space-6)}
.sp-btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;border-radius:var(--sf-radius-pill);font-size:var(--sf-text-0);font-weight:700;text-decoration:none;transition:transform var(--sf-dur-fast) var(--sf-ease),background var(--sf-dur-fast) var(--sf-ease),color var(--sf-dur-fast) var(--sf-ease)}
.sp-btn-solid{background:#fff;color:#16140f}
.sp-btn-solid:hover{background:var(--sf-accent);color:#16140f}
.sp-btn-ghost{border:1px solid color-mix(in srgb,#fff 42%,transparent);color:#fff}
.sp-btn-ghost:hover{background:#fff;color:#16140f;border-color:#fff}

/* ===== 섹션 헤드 — 강조 라인 + 굵은 한글 헤드라인 ===== */
.sp-head{max-width:38ch;margin-bottom:var(--sf-space-7)}
.sp-line{display:block;width:44px;height:3px;border-radius:2px;background:var(--sf-accent);margin-bottom:var(--sf-space-5)}
.sp-head h2{margin:0;font-size:clamp(var(--sf-text-4),4.4vw,var(--sf-text-5));font-weight:900;line-height:1.12;letter-spacing:-.03em;color:var(--sf-ink);text-wrap:balance}
.sp-head p{margin-top:var(--sf-space-4);color:var(--sf-muted);max-width:48ch;line-height:1.75;text-wrap:pretty}

/* ===== 강점 4열 — 큰 번호가 무게를 잡고 문장이 그 아래 붙는다 =====
   한 줄짜리 강점이라 설명을 덧붙일 수 없다. 번호를 키워 시각적 무게를 만들고
   위아래 여백을 줄여 네 칸이 한 덩어리로 읽히게 한다. */
.sp-str{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sf-space-6) var(--sf-space-5)}
.sp-str .item{position:relative;padding-top:var(--sf-space-4);border-top:1px solid var(--sf-line);transition:border-color var(--sf-dur) var(--sf-ease)}
.sp-str .item:hover{border-top-color:var(--sf-accent)}
.sp-str .no{display:block;font-size:var(--sf-text-3);font-weight:300;line-height:1;letter-spacing:.02em;color:var(--sf-accent);margin-bottom:var(--sf-space-3)}
.sp-str .item p{margin:0;font-size:var(--sf-text-1);font-weight:600;line-height:1.5;color:var(--sf-ink);letter-spacing:-.015em;text-wrap:balance}
@media(max-width:860px){.sp-str{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.sp-str{grid-template-columns:minmax(0,1fr)}}

/* ===== 인물 카드 그리드(시그니처) ===== */
.sp-people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sf-space-6) var(--sf-space-5);align-items:start}
/* 짝수 칸을 한 단 내려 지그재그로 — 여덟 장이 한 판으로 굳지 않는다 */
.sp-people .sp-person:nth-child(even){margin-top:var(--sf-space-7)}
.sp-person{position:relative;margin:0}
.sp-person .shot{position:relative;overflow:hidden;border-radius:var(--sf-radius-md);aspect-ratio:3/4;background:var(--sf-surface)}
/* 인물 사진은 배경색이 사진 자체에 박혀 있어 CSS 로 통일할 수 없다. 채도를 낮추고
   아주 옅은 세피아를 얹어 서로 다른 배경색을 한 계열로 모은다 — 노랑 계열이 다크
   화면에서 혼자 튀던 것이 눌린다. 호버하면 원래 색으로 돌아와 대비가 생긴다. */
.sp-person .shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--sf-ease),filter 1.1s var(--sf-ease);filter:saturate(.78) brightness(.93) sepia(.07)}
.sp-person:hover .shot img{transform:scale(1.05);filter:saturate(1.02) brightness(1) sepia(0)}
/* 사진 하단을 살짝 눌러 이름이 어떤 사진 위에서도 읽히게. 호버하면 더 짙어져 이름이 또렷해진다 */
.sp-person .shot::after{content:"";position:absolute;inset:auto 0 0;height:46%;background:linear-gradient(180deg,transparent,rgba(15,13,11,.78));pointer-events:none;transition:height var(--sf-dur) var(--sf-ease),opacity var(--sf-dur) var(--sf-ease)}
.sp-person:hover .shot::after{height:58%}
/* 아래에서 그어지는 강조 밑줄 — 카드를 들어 올리는 흔한 방식 대신 */
.sp-person .shot::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;background:var(--sf-accent);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--sf-ease)}
.sp-person:hover .shot::before{transform:scaleX(1)}
.sp-person figcaption{position:absolute;left:var(--sf-space-4);right:var(--sf-space-4);bottom:var(--sf-space-4);z-index:2;transition:transform var(--sf-dur) var(--sf-ease)}
.sp-person:hover figcaption{transform:translateY(-4px)}
.sp-person .nm{display:block;font-size:var(--sf-text-2);font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1.25}
.sp-person .role{display:block;margin-top:5px;font-size:var(--sf-text-n1);font-weight:500;color:var(--sf-accent);letter-spacing:.01em}
.sp-people .empty{grid-column:1/-1;aspect-ratio:16/6;display:flex;align-items:center;justify-content:center;padding:var(--sf-space-8);border-radius:var(--sf-radius-md);background:var(--sf-surface);color:var(--sf-muted);font-size:var(--sf-text-0);text-align:center;line-height:1.7}
@media(max-width:860px){.sp-people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.sp-people .sp-person:nth-child(even){margin-top:0}}
@media(max-width:420px){.sp-people{grid-template-columns:minmax(0,1fr)}}

/* ===== 진행 과정(시그니처) — 한 줄로 흐르는 단계 =====
   앞선 판(중앙 원을 좌우 노드가 둘러싸는 배치)은 원의 aspect-ratio 가 행 높이를 밀어
   노드 사이가 200px 넘게 벌어졌고, 항목 수가 바뀌면 그때마다 다시 무너졌다.
   번호 배지를 가로선 위에 꿰는 형태로 바꿔 항목이 몇 개든 같은 리듬을 유지한다. */
.sp-flow{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sf-space-6) var(--sf-space-5)}
/* 배지 한가운데를 지나는 연결선. 배지가 배경색을 깔고 있어 선이 끊긴 것처럼 보인다. */
.sp-flow::before{content:"";position:absolute;left:0;right:0;top:33px;height:1px;background:linear-gradient(90deg,transparent,var(--sf-line) 7%,var(--sf-line) 93%,transparent);z-index:0}
.sp-flow .node{position:relative;z-index:1}
.sp-flow .node .no{display:inline-flex;align-items:center;justify-content:center;width:66px;height:66px;border-radius:50%;border:1px solid var(--sf-line);background:var(--sf-bg);color:var(--sf-accent);font-size:var(--sf-text-1);font-weight:300;letter-spacing:.02em;margin-bottom:var(--sf-space-5);transition:border-color var(--sf-dur) var(--sf-ease),color var(--sf-dur) var(--sf-ease)}
.sp-flow .node:hover .no{border-color:var(--sf-accent)}
.sp-flow .node h3{margin:0 0 var(--sf-space-3);font-size:var(--sf-text-1);font-weight:700;letter-spacing:-.015em;color:var(--sf-ink);line-height:1.35;text-wrap:balance}
.sp-flow .node p{margin:0;font-size:var(--sf-text-n1);line-height:1.75;color:var(--sf-muted);max-width:26ch;text-wrap:pretty}
@media(max-width:860px){
  .sp-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-flow::before{display:none}
}
@media(max-width:520px){.sp-flow{grid-template-columns:minmax(0,1fr)}}

/* ===== 소개 — 인물 다음에 오는 큰 인용문. 사진은 곁들임이지 주인공이 아니다 ===== */
.sp-quote{position:relative;padding-block:clamp(var(--sf-space-8),12vw,var(--sf-space-10));background:var(--sf-bg)}
.sp-quote .sf-container{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(var(--sf-space-6),6vw,var(--sf-space-8));align-items:center}
.sp-quote blockquote{margin:0}
.sp-quote blockquote p{margin:var(--sf-space-5) 0 0;font-size:clamp(var(--sf-text-3),3.6vw,var(--sf-text-5));font-weight:800;line-height:1.42;letter-spacing:-.035em;color:var(--sf-ink);max-width:20ch;text-wrap:pretty}
.sp-quote-fig{margin:0;overflow:hidden;border-radius:var(--sf-radius-md);aspect-ratio:3/4;background:var(--sf-surface)}
.sp-quote-fig img,.sp-quote-fig picture{width:100%;height:100%}
.sp-quote-fig img{object-fit:cover}
@media(max-width:860px){.sp-quote .sf-container{grid-template-columns:minmax(0,1fr)}}

/* ===== 소개 — 큰 선언문 + 포트레이트 ===== */
.sp-story{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(var(--sf-space-6),5vw,var(--sf-space-8));align-items:start}
.sp-story-statement{font-size:var(--sf-text-3);line-height:1.5;letter-spacing:-.025em;color:var(--sf-ink);max-width:22ch;font-weight:700}
.sp-story > div:first-child{padding-top:var(--sf-space-4)}
.sp-story-fig{overflow:hidden;border-radius:var(--sf-radius-lg);aspect-ratio:4/5;background:var(--sf-surface)}
.sp-story-fig img,.sp-story-fig picture{width:100%;height:100%}
.sp-story-fig img{object-fit:cover}
@media(max-width:860px){.sp-story{grid-template-columns:minmax(0,1fr)}}

/* ===== 서비스 — 에디토리얼 리스트 ===== */
.sp-svc{border-top:1px solid var(--sf-line)}
.sp-svc .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--sf-space-4) var(--sf-space-7);align-items:baseline;padding:var(--sf-space-6) 0;border-bottom:1px solid var(--sf-line);transition:padding-left var(--sf-dur) var(--sf-ease)}
.sp-svc .row:hover{padding-left:var(--sf-space-3)}
.sp-svc .row h3{margin:0;font-size:var(--sf-text-2);font-weight:700;line-height:1.25;letter-spacing:-.015em;color:var(--sf-ink)}
.sp-svc .row p{margin:0;color:var(--sf-muted);font-size:var(--sf-text-0);line-height:1.75}
@media(max-width:640px){.sp-svc .row{grid-template-columns:minmax(0,1fr)}}

/* ===== FAQ ===== */
.sp-faq{display:grid;gap:var(--sf-space-4)}
.sp-faq .qa{padding:var(--sf-space-5);border-radius:var(--sf-radius-md);background:var(--sf-surface);border:1px solid var(--sf-line)}
.sp-faq .qa h3{margin:0 0 8px;font-size:var(--sf-text-1);font-weight:700;letter-spacing:-.01em;color:var(--sf-ink)}
.sp-faq .qa p{margin:0;color:var(--sf-muted);line-height:1.75}

/* ===== CTA 배너 — 초대형 워터마크 ===== */
.sp-cta-band{position:relative;overflow:hidden;text-align:center;padding-block:clamp(var(--sf-space-8),12vw,var(--sf-space-9));background:#141210;isolation:isolate}
/* 하단 배너 뒤로 흐르는 상호. 상호가 길면 화면 폭을 넘어 양끝이 뭉텅 잘리고,
   잘린 글자 조각이 오히려 읽혀 지저분해진다. 양끝을 페이드로 지워 장식으로 남긴다. */
.sp-watermark{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:0;
  font-size:clamp(78px,17vw,260px);font-weight:800;letter-spacing:-.04em;line-height:1;
  color:color-mix(in srgb,#fff 5%,transparent);white-space:nowrap;text-align:center;overflow:hidden;
  pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.sp-cta-band .inner{position:relative;z-index:1}
.sp-cta-band h2{margin:0;font-size:clamp(var(--sf-text-3),4.6vw,var(--sf-text-5));font-weight:800;letter-spacing:-.025em;color:#fff;line-height:1.25;text-wrap:balance}
.sp-cta-band h2 em{font-style:normal;color:var(--sf-accent)}
.sp-cta-band p{margin:var(--sf-space-4) auto 0;max-width:48ch;color:color-mix(in srgb,#fff 72%,transparent);line-height:1.75}
.sp-cta-band .btns{display:flex;flex-wrap:wrap;gap:var(--sf-space-3);justify-content:center;margin-top:var(--sf-space-6)}

/* ===== 연락 요약 ===== */
.sp-contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sf-space-6)}
.sp-contact dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sf-space-3) var(--sf-space-5)}
.sp-contact dt{color:var(--sf-muted);font-size:var(--sf-text-n1)}
.sp-contact dd{margin:0;color:var(--sf-ink);font-size:var(--sf-text-0)}
.sp-call{display:inline-block;margin-top:var(--sf-space-5);font-size:var(--sf-text-3);font-weight:800;letter-spacing:-.02em;color:var(--sf-ink);text-decoration:none}
.sp-call:hover{color:var(--sf-accent)}
@media(max-width:860px){.sp-contact{grid-template-columns:minmax(0,1fr)}}

/* ===== 푸터 ===== */
.sp-foot{padding-block:var(--sf-space-6);border-top:1px solid var(--sf-line);color:var(--sf-muted);font-size:var(--sf-text-n1)}
.sp-foot-in{display:flex;flex-wrap:wrap;gap:var(--sf-space-4) var(--sf-space-6);align-items:baseline;justify-content:space-between}
.sp-foot-info{display:flex;flex-wrap:wrap;gap:var(--sf-space-3) var(--sf-space-5);align-items:baseline}
.sp-foot-info .nm{color:var(--sf-ink);font-weight:700}
.sp-foot-info a{color:inherit;text-decoration:none}
.sp-foot-info a:hover{color:var(--sf-accent)}
/* --- 공통 문의 모달(sf-iq) --- */
.sf-iq-fab{position:fixed;right:20px;bottom:20px;z-index:9998;display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;background:#2563eb;color:#ffffff;font-family:inherit;font-weight:600;font-size:15px;line-height:1;padding:15px 22px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.22);transition:transform .18s ease,box-shadow .18s ease}
.sf-iq-fab:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.28)}
.sf-iq-fab .sf-iq-dot{width:8px;height:8px;border-radius:50%;background:#ffffff;opacity:.9}
.sf-iq-back{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(15,17,20,.55);backdrop-filter:blur(3px)}
.sf-iq-back.open{display:flex}
.sf-iq-modal{width:100%;max-width:460px;background:#fff;color:#16181c;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35);transform:translateY(14px) scale(.98);opacity:0;transition:transform .26s cubic-bezier(.2,.7,.2,1),opacity .26s ease;font-family:inherit;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
.sf-iq-back.open .sf-iq-modal{transform:none;opacity:1}
.sf-iq-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:24px 24px 6px}
.sf-iq-head h3{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:0}
.sf-iq-head p{margin:6px 0 0;color:#6b7078;font-size:13px}
.sf-iq-x{flex:none;width:34px;height:34px;border:0;background:#f1f2f4;border-radius:10px;cursor:pointer;font-size:18px;color:#444;line-height:1}
.sf-iq-x:hover{background:#e6e8ea}
.sf-iq-body{padding:14px 24px 24px}
.sf-iq-field{margin-top:14px}
.sf-iq-field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#33373d}
.sf-iq-field input,.sf-iq-field textarea{width:100%;border:1px solid #d9dce0;border-radius:10px;padding:12px 14px;font:inherit;font-size:15px;color:#16181c;background:#fff;transition:border-color .18s,box-shadow .18s}
.sf-iq-field textarea{min-height:96px;resize:vertical}
.sf-iq-field input:focus,.sf-iq-field textarea:focus{outline:0;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb22}
.sf-iq-submit{margin-top:18px;width:100%;border:0;cursor:pointer;background:#2563eb;color:#ffffff;font-family:inherit;font-weight:700;font-size:16px;line-height:1;padding:15px;border-radius:12px;transition:filter .18s,transform .12s}
.sf-iq-submit:hover{filter:brightness(1.05)}
.sf-iq-submit:active{transform:translateY(1px)}
.sf-iq-submit[disabled]{opacity:.6;cursor:default}
.sf-iq-note{margin-top:12px;font-size:12px;color:#8a8f96;text-align:center}
.sf-iq-note a{color:#2563eb}
.sf-iq-ok,.sf-iq-err{display:none;padding:8px 0 4px}
.sf-iq-ok.show,.sf-iq-err.show{display:block}
.sf-iq-ok{text-align:center}
.sf-iq-ok .sf-iq-check{width:54px;height:54px;border-radius:50%;background:#2563eb;color:#ffffff;display:flex;align-items:center;justify-content:center;font-size:26px;margin:6px auto 14px}
.sf-iq-ok h4{font-size:18px;margin:0 0 6px}
.sf-iq-ok p{color:#6b7078;font-size:14px;margin:0}
.sf-iq-err{color:#c0392b;font-size:13px;text-align:center}
/* 플로팅 레일(전화/문의/지도/TOP) */
.sf-iq-rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:9998;display:flex;flex-direction:column;gap:10px}
.sf-iq-r{width:54px;height:54px;border-radius:14px;border:0;cursor:pointer;background:#fff;color:#16181c;font-family:inherit;font-weight:700;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:transform .16s ease,filter .16s}
.sf-iq-r:hover{transform:translateY(-2px);filter:brightness(.97)}
.sf-iq-r-on{background:#2563eb;color:#ffffff}
.sf-iq-r[data-sf-top]{opacity:0;transform:translateY(10px) scale(.85);pointer-events:none;transition:opacity .3s cubic-bezier(.2,.7,.2,1),transform .3s cubic-bezier(.2,.7,.2,1)}
.sf-iq-r[data-sf-top].sf-show{opacity:1;transform:none;pointer-events:auto}
@media(max-width:520px){.sf-iq-fab{right:14px;bottom:14px;padding:13px 18px;font-size:14px}.sf-iq-modal{max-width:none}.sf-iq-rail{right:12px;gap:8px}.sf-iq-r{width:46px;height:46px;font-size:11px;border-radius:12px}}
/* --- 인라인 상담문의 섹션(sf-ct) --- */
/* 폰트는 상속받는다 — 여기만 Pretendard 로 박으면 다른 활자를 쓰는 시안에서 이 블록만 따로 논다 */
.sf-ct{box-sizing:border-box;width:100%;padding:clamp(56px,8vw,104px) 20px;background:#261e1a;font-family:inherit;color:#f2ede6;word-break:keep-all;overflow-wrap:anywhere}
.sf-ct *{box-sizing:border-box}
.sf-ct-inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(28px,4vw,56px);align-items:start}
.sf-ct-eyebrow{display:block;width:56px;height:2px;border-radius:1px;background:#d98f9a;margin:0 0 16px}
.sf-ct-info h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;margin:0 0 14px;line-height:1.2}
.sf-ct-lead{font-size:15px;line-height:1.7;color:#b9b2a8;margin:0 0 26px;max-width:36ch}
.sf-ct-meta{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.sf-ct-meta li{display:flex;gap:14px;align-items:baseline;font-size:15px;line-height:1.5}
.sf-ct-meta .k{flex:none;width:64px;font-size:12px;font-weight:700;color:#8d8579;letter-spacing:.04em}
.sf-ct-meta a{color:inherit;text-decoration:none}
.sf-ct-meta a:hover{text-decoration:underline}
.sf-ct-dir{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.sf-ct-dir a{display:inline-flex;align-items:center;gap:7px;padding:11px 16px;border-radius:10px;font-size:13px;font-weight:700;text-decoration:none;border:1px solid rgba(217,143,154,0.28);color:#d98f9a;background:rgba(255,255,255,.05);transition:border-color .15s,background .15s}
.sf-ct-dir a:hover{border-color:#d98f9a}
.sf-ct-form{background:rgba(255,255,255,.045);border-radius:18px;padding:clamp(24px,3vw,36px);box-shadow:none;border:1px solid rgba(255,255,255,.10)}
.sf-ct-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sf-ct-field{margin-bottom:16px}
.sf-ct-field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:#cdc6bc}
.sf-ct-field label .req{color:#d98f9a;margin-left:3px}
.sf-ct-field input,.sf-ct-field textarea{width:100%;border:1px solid rgba(255,255,255,.16);border-radius:11px;padding:13px 15px;font:inherit;font-size:15px;color:#f2ede6;background:rgba(255,255,255,.05);transition:border-color .16s,box-shadow .16s,background .16s}
.sf-ct-field textarea{min-height:118px;resize:vertical}
.sf-ct-field input:focus,.sf-ct-field textarea:focus{outline:0;border-color:#d98f9a;background:rgba(255,255,255,.08);box-shadow:0 0 0 3px rgba(217,143,154,0.16)}
.sf-ct-agree{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:#a49c92;margin:4px 0 18px;line-height:1.5}
.sf-ct-agree input{flex:none;width:17px;height:17px;margin-top:1px;accent-color:#d98f9a}
.sf-ct-submit{width:100%;border:0;cursor:pointer;background:#d98f9a;color:#111111;font-family:inherit;font-weight:800;font-size:16.5px;line-height:1;letter-spacing:.01em;padding:17px;border-radius:12px;box-shadow:0 8px 20px rgba(217,143,154,0.32);transition:filter .16s,transform .1s,box-shadow .16s}
.sf-ct-submit:hover{filter:brightness(1.08);box-shadow:0 10px 26px rgba(217,143,154,0.4)}
.sf-ct-submit:active{transform:translateY(1px)}
.sf-ct-submit[disabled]{opacity:.6;cursor:default}
.sf-ct-msg{margin-top:13px;font-size:13.5px;text-align:center;display:none}
.sf-ct-msg.show{display:block}
.sf-ct-msg.ok{color:#d98f9a;font-weight:600}
.sf-ct-msg.err{color:#c0392b}
@media(max-width:780px){.sf-ct-inner{grid-template-columns:1fr;gap:30px}.sf-ct-row{grid-template-columns:1fr}}
.sf-draggable{cursor:grab;scroll-behavior:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sf-draggable::-webkit-scrollbar{display:none}
.sf-draggable.sf-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.sf-draggable img{-webkit-user-drag:none;user-drag:none}
.sf-lb-clickable{cursor:zoom-in}
.sf-lb{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;background:rgba(8,9,11,.92);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.sf-lb.open{display:flex}
.sf-lb img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);user-select:none;-webkit-user-drag:none}
.sf-lb-btn{position:absolute;border:0;cursor:pointer;background:rgba(255,255,255,.12);color:#fff;width:52px;height:52px;border-radius:50%;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .16s}
.sf-lb-btn:hover{background:rgba(255,255,255,.24)}
.sf-lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.sf-lb-next{right:18px;top:50%;transform:translateY(-50%)}
.sf-lb-close{top:18px;right:18px;width:46px;height:46px;font-size:22px}
.sf-lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.85);font-family:inherit;font-weight:600;font-size:13px;line-height:1;letter-spacing:.04em}
@media(max-width:560px){.sf-lb-btn{width:44px;height:44px;font-size:20px}.sf-lb-prev{left:8px}.sf-lb-next{right:8px}}
.sf-yt{position:relative;width:100%;aspect-ratio:16/9;background:#0a0a0a center/cover no-repeat;border-radius:14px;overflow:hidden;cursor:pointer}
.sf-yt::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18);transition:background .2s}
.sf-yt:hover::after{background:rgba(0,0,0,.05)}
.sf-yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:78px;height:78px;border-radius:50%;background:rgba(18,18,20,.74);display:flex;align-items:center;justify-content:center;transition:transform .18s,background .18s;pointer-events:none}
.sf-yt:hover .sf-yt-play{transform:translate(-50%,-50%) scale(1.08);background:#e02f2f}
.sf-yt-play svg{width:30px;height:30px;margin-left:4px;fill:#fff}
.sf-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.sf-video{display:block;width:100%;border-radius:14px;overflow:hidden;background:#000}
.sf-video video{display:block;width:100%;height:auto}

/* ===== 2026-08 Awesome Music refinements ===== */
#news,#people,#gallery,#services,#location,#inquiry{scroll-margin-top:130px}
.sp-menu{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2vw,30px);margin-left:auto}
.sp-menu a{position:relative;color:rgba(255,255,255,.78);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;transition:color .2s ease}
.sp-menu a::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;background:var(--sf-accent);transition:right .25s var(--sf-ease)}
.sp-menu a:hover{color:#fff}
.sp-menu a:hover::after{right:0}
.sp-nav.solid .sp-menu a{color:color-mix(in srgb,var(--sf-ink) 78%,transparent)}
.sp-nav.solid .sp-menu a:hover{color:var(--sf-accent)}

.sp-news-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sf-space-5)}
.sp-news-links a{position:relative;display:flex;flex-direction:column;min-height:190px;padding:var(--sf-space-6);border:1px solid var(--sf-line);border-radius:var(--sf-radius-md);background:var(--sf-surface);text-decoration:none;overflow:hidden;transition:transform .3s var(--sf-ease),border-color .3s var(--sf-ease)}
.sp-news-links a::before{content:"";position:absolute;inset:auto -30px -70px auto;width:150px;height:150px;border-radius:50%;background:color-mix(in srgb,var(--sf-accent) 12%,transparent);transition:transform .45s var(--sf-ease)}
.sp-news-links a:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--sf-accent) 58%,var(--sf-line))}
.sp-news-links a:hover::before{transform:scale(1.25)}
.sp-news-links span{color:var(--sf-muted);font-size:var(--sf-text-n1)}
.sp-news-links strong{margin-top:auto;font-size:var(--sf-text-2);letter-spacing:-.02em}
.sp-news-links i{position:absolute;right:var(--sf-space-5);top:var(--sf-space-5);color:var(--sf-accent);font-size:22px;font-style:normal}

.sp-gallery-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:var(--sf-space-6);padding:6px;border:1px solid var(--sf-line);border-radius:var(--sf-radius-md);background:var(--sf-surface)}
.sp-gallery-tabs button{min-height:50px;padding:10px;border:0;border-radius:9px;background:transparent;color:var(--sf-muted);font:inherit;font-size:14px;font-weight:750;cursor:pointer;transition:background .22s ease,color .22s ease,box-shadow .22s ease}
.sp-gallery-tabs button:hover{color:var(--sf-ink)}
.sp-gallery-tabs button[aria-selected="true"]{background:var(--sf-accent);color:var(--sf-accent-ink);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.sp-gallery-panel[hidden]{display:none}
.sp-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sf-space-5)}
.sp-gallery-item,.sp-gallery-empty{position:relative;margin:0;aspect-ratio:16/10;border-radius:var(--sf-radius-md);overflow:hidden;background:var(--sf-surface);border:1px solid var(--sf-line)}
.sp-gallery-item:nth-child(n+5),.sp-gallery-empty:nth-child(n+5){display:none}
.sp-gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--sf-ease),filter .7s var(--sf-ease)}
.sp-gallery-item:hover img{transform:scale(1.035);filter:brightness(1.06)}
.sp-gallery-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 18px 14px;background:linear-gradient(transparent,rgba(0,0,0,.76));color:#fff;font-size:13px}
.sp-gallery-item figcaption:empty{display:none}
.sp-gallery-empty{display:flex;align-items:center;justify-content:center;color:var(--sf-muted);font-size:14px;text-align:center}

.sp-location{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:var(--sf-space-5)}
.sp-location-info{padding:var(--sf-space-6);border:1px solid var(--sf-line);border-radius:var(--sf-radius-md);background:var(--sf-surface)}
.sp-location-info dl{display:grid;gap:0;margin:0}
.sp-location-info dl>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:var(--sf-space-4);padding:16px 0;border-bottom:1px solid var(--sf-line)}
.sp-location-info dl>div:first-child{padding-top:0}
.sp-location-info dl>div:last-child{padding-bottom:0;border-bottom:0}
.sp-location-info dt{color:var(--sf-muted);font-size:13px}
.sp-location-info dd{margin:0;color:var(--sf-ink);font-size:15px}
.sp-location-info a{text-decoration:none}
.sp-location-link{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:250px;padding:var(--sf-space-6);border-radius:var(--sf-radius-md);background:linear-gradient(145deg,#24c875,#03a95d);color:#07150d;text-decoration:none;overflow:hidden;transition:transform .3s var(--sf-ease)}
.sp-location-link::before{content:"N";position:absolute;right:-18px;top:-42px;font-size:180px;line-height:1;font-weight:900;color:rgba(255,255,255,.2)}
.sp-location-link:hover{transform:translateY(-4px)}
.sp-location-link span{font-size:13px;font-weight:700;opacity:.72}
.sp-location-link strong{position:relative;margin-top:6px;font-size:22px;line-height:1.3}
.sp-location-link i{position:absolute;right:24px;bottom:24px;font-size:22px;font-style:normal}

.sp-social-float{position:fixed;right:18px;top:50%;z-index:9998;display:flex;flex-direction:column;gap:8px;transform:translateY(-50%)}
.sp-social-float a{display:flex;align-items:center;gap:10px;width:116px;min-height:48px;padding:7px 13px 7px 7px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(22,20,15,.9);box-shadow:0 9px 28px rgba(0,0,0,.24);backdrop-filter:blur(12px);color:#fff;font-size:12px;font-weight:800;text-decoration:none;transition:transform .2s ease,background .2s ease,border-color .2s ease}
.sp-social-float a:hover{transform:translateX(-5px);border-color:rgba(255,255,255,.3)}
.sp-social-mark{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#fff;color:#111;font-size:13px;font-weight:900}
.sp-social-float .blog .sp-social-mark,.sp-social-float .booking .sp-social-mark{background:#03c75a;color:#fff}
.sp-social-float .instagram .sp-social-mark{background:linear-gradient(135deg,#f9ce34,#ee2a7b 52%,#6228d7);color:#fff}
.sp-social-float .youtube .sp-social-mark{background:#ff0033;color:#fff;font-size:10px}

@media(max-width:960px){
  .sp-nav-in{display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:10px}
  .sp-menu{grid-column:1/-1;grid-row:2;margin:0;justify-content:flex-start;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
  .sp-menu::-webkit-scrollbar{display:none}
  .sp-nav{padding:14px 0 10px}
  .sp-nav.solid{padding:10px 0 8px}
  .sp-hero-in{padding-top:150px}
  .sp-gallery-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:720px){
  .sp-news-links,.sp-location{grid-template-columns:1fr}
  .sp-gallery-grid{gap:12px}
  .sp-location-info{padding:var(--sf-space-5)}
  .sp-location-info dl>div{grid-template-columns:1fr;gap:4px}
  .sp-social-float{left:12px;right:12px;top:auto;bottom:10px;flex-direction:row;gap:6px;transform:none;padding:6px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(22,20,15,.9);box-shadow:0 14px 40px rgba(0,0,0,.36);backdrop-filter:blur(14px)}
  .sp-social-float a{flex:1;min-width:0;width:auto;min-height:52px;padding:4px;gap:3px;flex-direction:column;justify-content:center;border:0;border-radius:12px;background:transparent;box-shadow:none;font-size:10px}
  .sp-social-float a:hover{transform:none;background:rgba(255,255,255,.07)}
  .sp-social-mark{width:27px;height:27px;flex-basis:27px;font-size:11px}
  body{padding-bottom:80px}
}
@media(max-width:520px){
  .sp-brand{font-size:16px}
  .sp-nav-right{gap:8px}
  .sp-cta{padding:9px 14px}
  .sp-menu{gap:20px}
  .sp-menu a{font-size:12px}
  .sp-gallery-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-gallery-item,.sp-gallery-empty{aspect-ratio:4/3;font-size:12px}
}

/* Introduction photo: a plain square upload area */
.sp-quote-fig{aspect-ratio:1/1;display:grid;place-items:center;border:1px solid var(--sf-line);background:var(--sf-surface)}
.sp-quote-fig>*{grid-area:1/1}
.sp-quote-placeholder{color:var(--sf-muted);font-size:14px;font-weight:500;text-align:center}
.sp-quote-photo{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}

/* Process: readable 2 by 2 editorial cards */
.sp-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sp-flow::before{display:none}
.sp-flow .node{min-height:230px;padding:30px;border:1px solid var(--sf-line);border-radius:var(--sf-radius-md);background:var(--sf-bg);transition:transform .3s var(--sf-ease),border-color .3s var(--sf-ease),box-shadow .3s var(--sf-ease)}
.sp-flow .node:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--sf-accent) 55%,var(--sf-line));box-shadow:0 18px 42px rgba(0,0,0,.16)}
.sp-flow .node .no{display:block;width:auto;height:auto;margin:0 0 42px;border:0;border-radius:0;background:transparent;color:var(--sf-accent);font-size:13px;font-weight:500;letter-spacing:.14em;line-height:1}
.sp-flow .node h3{max-width:33ch;margin:0;font-family:'MaruBuri',serif;font-size:clamp(17px,1.7vw,21px);font-weight:600;line-height:1.72;letter-spacing:-.025em;text-wrap:pretty}
.sp-flow .node p:empty{display:none}

/* Class: six focused lesson cards */
.sp-svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;border:0;counter-reset:class-card}
.sp-svc .row{counter-increment:class-card;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;min-height:210px;padding:28px;border:1px solid var(--sf-line);border-radius:var(--sf-radius-md);background:var(--sf-bg);overflow:hidden;transition:transform .3s var(--sf-ease),border-color .3s var(--sf-ease),background .3s var(--sf-ease)}
.sp-svc .row::before{content:counter(class-card,decimal-leading-zero);position:relative;z-index:1;display:block;flex:0 0 auto;margin:0 0 18px;color:var(--sf-accent);font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;line-height:1}
.sp-svc .row::after{content:"";position:absolute;right:-48px;top:-58px;width:130px;height:130px;border-radius:50%;background:color-mix(in srgb,var(--sf-accent) 8%,transparent);transition:transform .45s var(--sf-ease)}
.sp-svc .row:hover{padding-left:28px;transform:translateY(-4px);border-color:color-mix(in srgb,var(--sf-accent) 55%,var(--sf-line));background:color-mix(in srgb,var(--sf-bg) 92%,var(--sf-accent))}
.sp-svc .row:hover::after{transform:scale(1.3)}
.sp-svc .row h3{position:relative;z-index:1;margin:0;font-family:inherit;font-size:clamp(19px,1.8vw,24px);font-weight:700;line-height:1.35;letter-spacing:-.025em}
.sp-svc .row p{position:relative;z-index:1;margin-top:10px;font-size:13px}
.sp-svc .row p:empty{display:none}

@media(max-width:900px){
  .sp-svc{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .sp-flow,.sp-svc{grid-template-columns:1fr}
  .sp-flow .node{min-height:0;padding:24px}
  .sp-flow .node .no{margin-bottom:28px}
  .sp-svc .row{min-height:170px;padding:24px}
  .sp-svc .row:hover{padding-left:24px}
}

/* Responsive hardening for CMS-managed copy */
.sp-nav-in>*,
.sp-menu,
.sp-menu a,
.sp-news-links>*,
.sp-flow>*,
.sp-svc>*,
.sp-location>*,
.sp-location-info dd{min-width:0}
.sp-menu{max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.sp-menu::-webkit-scrollbar{display:none}
.sp-menu a{flex:0 0 auto;writing-mode:horizontal-tb;word-break:keep-all}
.sp-nav-right{flex:none}
.sp-brand,.sp-brand *{writing-mode:horizontal-tb;word-break:keep-all}
.sp-hero h1,.sp-head h2,.sp-flow h3,.sp-svc h3,.sp-location-link strong{writing-mode:horizontal-tb;word-break:keep-all;overflow-wrap:anywhere}
.sp-gallery-tabs button,.sp-social-float a,.sp-location-info dt,.sp-location-info dd{writing-mode:horizontal-tb}
.sp-location-info dd{overflow-wrap:anywhere;word-break:keep-all}
.sp-location-link strong{font-size:clamp(18px,2vw,22px)}
.sp-quote-fig{width:min(100%,480px);justify-self:end}

@media(max-width:820px){
  .sp-location{grid-template-columns:1fr}
  .sp-location-link{min-height:190px}
  .sp-quote-fig{justify-self:start}
}
@media(max-width:420px){
  .sf-container{padding-left:18px;padding-right:18px}
  .sp-brand{font-size:15px;max-width:calc(100vw - 126px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sp-cta{font-size:11px;padding:9px 12px}
  .sp-gallery-tabs button{min-height:46px;font-size:12px}
  .sp-location-link{min-height:170px;padding:24px}
  .sp-location-link i{right:20px;bottom:20px}
}


/* 2026-09-09: supplied academy collage + non-overlapping hero copy */
.sp-hero{display:block;min-height:0;padding-top:84px;background:#0f0d0b}
.sp-hero-media{position:relative;inset:auto;width:100%;background:#0f0d0b}
.sp-hero-media img{width:100%;height:auto;object-fit:contain;object-position:center;animation:none}
.sp-hero::after{display:none}
.sp-hero-in{position:relative;background:#0f0d0b;padding:clamp(36px,5vw,68px) 0}
.sp-hero-in>.sf-container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:18px clamp(32px,6vw,92px);align-items:start}
.sp-hero-in .sp-kicker{grid-column:1/-1;margin-bottom:0}
.sp-hero-in h1{font-size:clamp(34px,5vw,66px);max-width:15ch}
.sp-hero-in .sp-hero-lead{margin-top:8px;max-width:34ch}
.sp-hero-in .sp-hero-btns{grid-column:1;margin-top:10px}
.sp-scroll{display:none}
.sp-person-baked .shot::after{display:none}
@media(max-width:960px){.sp-hero{padding-top:116px}}
@media(max-width:720px){
  .sp-hero-in>.sf-container{grid-template-columns:1fr;gap:16px}
  .sp-hero-in .sp-kicker,.sp-hero-in .sp-hero-btns{grid-column:1}
  .sp-hero-in .sp-hero-lead{margin-top:0;order:3}
  .sp-hero-in .sp-hero-btns{margin-top:8px;order:2}
}
@media(max-width:520px){
  .sp-hero{padding-top:112px}
  .sp-hero-in{padding:32px 0 38px}
  .sp-hero-in h1{font-size:clamp(31px,10vw,42px)}
  .sp-nav-in{grid-template-columns:1fr}
  .sp-nav-right{display:none}
}

@media(max-width:640px){.sp-people{grid-template-columns:minmax(0,1fr)}}

/* 2026-09-09: single-line hero headline */
.sp-hero-in>.sf-container{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.sp-hero-in .sp-kicker{order:0;margin-bottom:14px}
.sp-hero-in h1{order:1;max-width:none;white-space:nowrap;font-size:clamp(20px,5.4vw,62px)}
.sp-hero-in .sp-hero-lead{order:2;max-width:none;margin-top:14px}
.sp-hero-in .sp-hero-btns{order:3;margin-top:22px}
@media(max-width:520px){
  .sp-hero-in h1{font-size:clamp(20px,6.4vw,25px)}
  .sp-hero-in .sp-hero-lead{margin-top:12px;font-size:15px}
  .sp-hero-in .sp-hero-btns{margin-top:20px}
}

/* 2026-09-09: CMS-safe responsive hardening */
body :where(h1,h2,h3,h4,p,a,span,strong,em,dt,dd,button,label,input,textarea,select){writing-mode:horizontal-tb!important;text-orientation:mixed}
img,video,iframe{max-width:100%}
.sp-nav-in>*,.sp-news-links>*,.sp-people>*,.sp-flow>*,.sp-svc>*,.sp-location>*,.sf-ct-inner>*{min-width:0}
.sp-location,.sp-location-info,.sp-location-link{width:100%;max-width:100%;min-width:0}
.sp-location-info dl>div{min-width:0}
.sp-location-info dd{word-break:keep-all;overflow-wrap:anywhere}
.sp-location-link span,.sp-location-link strong{max-width:100%;word-break:keep-all;overflow-wrap:break-word}
.sf-map,.sf-map-embed,.sf-map iframe{width:100%;max-width:100%;min-width:0}
.sf-map-embed{overflow:hidden}
.sp-cta-band p{max-width:none;white-space:nowrap;font-size:clamp(13px,1.25vw,16px);word-break:keep-all;overflow-wrap:normal}
@media(max-width:720px){
.sp-location{grid-template-columns:minmax(0,1fr)}
.sp-location-info,.sp-location-link{width:100%;max-width:100%}
}
@media(max-width:600px){
.sp-cta-band p{max-width:36ch;white-space:normal;text-wrap:balance;word-break:keep-all;overflow-wrap:normal}
.sp-location-info dl>div{grid-template-columns:1fr;gap:4px}
.sp-location-link{min-height:170px}
}


/* 2026-09-11: mobile/tablet overflow, horizontal text and map hardening */
html,body{width:100%;max-width:100%;overflow-x:hidden}
body :where(h1,h2,h3,h4,p,a,span,strong,em,dt,dd,button,label,input,textarea,select){max-width:100%;writing-mode:horizontal-tb!important;text-orientation:mixed!important}
.sp-location,.sp-location>*,
.sp-location-info,.sp-location-info dl,.sp-location-info dl>div,
.sp-location-link,.sf-map,.sf-map-embed,.sf-map>*,.sf-map-embed>*{min-width:0;max-width:100%}
.sp-location-info a{display:inline-block;max-width:100%;overflow-wrap:anywhere}
.sf-map,.sf-map-embed{position:relative;width:100%;overflow:hidden}
.sf-map iframe,.sf-map-embed iframe{display:block;width:100%!important;max-width:100%!important;height:100%!important;border:0}
@media(max-width:1024px){
  .sp-location{grid-template-columns:minmax(0,1fr)}
  .sp-location-link{min-height:190px}
}
@media(max-width:720px){
  .sf-container{width:100%;max-width:100%}
  .sp-hero-in h1,.sp-hero-in .sp-hero-lead,.sp-head h2,.sp-head p,.sp-cta-band h2,.sp-cta-band p{width:100%;max-width:100%}
  .sp-location-info dl>div{grid-template-columns:minmax(0,1fr)}
  .sf-map,.sf-map-embed{height:clamp(260px,72vw,360px)}
}
@media(max-width:360px){
  .sp-hero-in h1{font-size:clamp(18px,6.1vw,22px)}
  .sp-location-info,.sp-location-link{padding:20px}
}

/* Curriculum typeface: HCR Dotum by Hancom. */
@font-face{font-family:'HCR Dotum';src:url('../assets/fonts/hcrdotum-Regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
#process,#process .sp-flow .node h3,#process .sp-flow .node .no{font-family:'HCR Dotum',Arial,sans-serif}
#process .sp-flow .node{display:grid;grid-template-rows:42px 58px auto;align-content:start}
#process .sp-flow .node .no{margin:0}
#process .sp-flow .node h3{align-self:start;line-height:1.35}
#process .sp-flow .node p{align-self:start;margin:0}

/* Curriculum descriptions: three lines on desktop. */
@media(min-width:901px){#process .sp-flow .node p{max-width:none;font-size:15px;line-height:1.6;white-space:pre-line;text-wrap:normal}}