/* ===========================================================
   1. 디자인 토큰 : 색·글자·간격을 여기서 한 번에 바꾼다
   =========================================================== */
:root{
  /* 색. 아이보리 + 웜그레이는 고객이 직접 요청한 톤이다.
     네이비는 지어낸 색이 아니라 《숨;쉼》 상자 리본과 내함의 실제 색. */
  --paper:      #F4F0E8;   /* 바탕 아이보리 */
  --paper-hi:   #FBF9F5;   /* 올라온 면(카드) */
  --paper-lo:   #EBE6DB;   /* 눌린 면(구분 띠) */
  --ink:        #2A2E35;   /* 본문 먹색 */
  --ink-soft:   #5A5A54;   /* 보조 텍스트 */
  --warm-gray:  #8C8578;   /* 웜그레이. 라벨·캡션 */
  --line:       #DCD5C8;   /* 괘선 */
  --navy:       #2F4156;   /* 강조. 제품 리본 색 */
  --navy-deep:  #1E2A38;   /* 페이지 끝 어두운 블록 */

  --serif: "Gowun Batang", "Nanum Myeongjo", serif;
  --sans:  "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif;

  --gap-sm: 16px;
  --gap:    28px;
  --sec-y:  clamp(76px, 11vw, 152px);   /* 섹션 위아래 여백 */
  --pad-x:  clamp(20px, 5vw, 56px);     /* 좌우 여백 */
  --wrap:   1120px;                      /* 본문 최대 폭 */

  /* 호흡 리듬. 《숨;쉼》 워크북에 적힌 실제 호흡법 4초-4초-6초 = 14초 */
  --breath: 14s;

  --r-card: 0px;                         /* 모서리는 전부 각지게 통일 */
  --r-pill: 999px;                       /* 예외는 버튼 하나뿐 */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:350; line-height:1.75;
  letter-spacing:-0.01em;
  word-break:keep-all;                 /* 한글이 단어 단위로만 끊기게 */
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
figure{margin:0}          /* figure 기본 좌우 여백 40px 제거 (모바일에서 가로 스크롤 유발) */
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
a:focus-visible, button:focus-visible{
  outline:2px solid var(--navy); outline-offset:3px;
}

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

/* 섹션 제목 위계는 레퍼런스(인뮤직)를 그대로 따른다.
   작은 영문 라벨 -> 큰 영문 세리프 제목 -> 한글 설명. 영문이 주인공이고 한글이 보조다. */
.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:0.26em;
  text-transform:uppercase; color:var(--warm-gray); margin:0 0 var(--gap-sm);
}
.sec-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(28px, 4.6vw, 46px); line-height:1.3;
  margin:0 0 14px; letter-spacing:-0.015em;
}
.sec-title-ko{
  font-family:var(--serif); font-weight:400; color:var(--navy);
  font-size:clamp(17px, 2.2vw, 22px); line-height:1.55;
  margin:0 0 20px; letter-spacing:-0.02em;
}
.sec-lead{
  max-width:33em; margin:0; color:var(--ink-soft);
  font-size:clamp(14px, 1.6vw, 16px); line-height:2;
}

/* ===========================================================
   2. 헤더
   =========================================================== */
.hd{
  position:sticky; top:0; z-index:60;
  background:rgba(244,240,232,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:border-color .3s ease;
}
.hd.is-stuck{border-bottom-color:var(--line)}
.hd-in{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--pad-x);
  height:66px; display:flex; align-items:center; justify-content:space-between;
}
.logo{font-family:var(--serif); font-size:19px; letter-spacing:0.1em}
.logo i{font-style:normal; color:var(--navy)}
.nav{display:flex; gap:clamp(18px,2.6vw,34px)}
.nav a{
  font-size:12px; font-weight:500; letter-spacing:0.15em;
  color:var(--ink-soft); padding:6px 0; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:right;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover::after, .nav a:focus-visible::after{transform:scaleX(1); transform-origin:left}
.hd-burger{display:none; width:40px; height:40px; margin-right:-8px}
.hd-burger i{display:block; width:20px; height:1px; background:var(--ink); margin:5px auto}

/* ===========================================================
   3. 히어로 : 비대칭 2단 + 시그니처 호흡 원
      호흡 리듬의 근거는 《숨;쉼》 워크북의 '호흡 연습' 문구다.
   =========================================================== */
/* 레퍼런스와 같은 전면 사진 히어로. 사진 위에 글이 가운데로 얹힌다.
   레퍼런스는 어두운 사진에 밝은 글씨지만, 고객이 요청한 톤이 아이보리라
   같은 짜임을 밝기만 뒤집어 옮겼다. 사진 위에 아이보리 베일을 덮고 먹색 글씨. */
.hero{
  position:relative; overflow:hidden;
  min-height:calc(100svh - 66px);
  display:grid; place-items:center; text-align:center;
  padding:clamp(56px,8vw,96px) var(--pad-x) clamp(96px,11vw,140px);
}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:52% 42%}
/* 글자 뒤쪽만 밝게 덮고 가장자리는 사진이 그대로 보이게 한다.
   레퍼런스도 사진이 선명한 채로 가운데만 어둡게 눌러 글자를 세웠다. */
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(76% 52% at 50% 44%, rgba(244,240,232,.9) 0%, rgba(244,240,232,.62) 46%, rgba(244,240,232,0) 100%),
    linear-gradient(to bottom, rgba(244,240,232,.42) 0%, rgba(244,240,232,0) 26%, rgba(244,240,232,0) 62%, rgba(244,240,232,.92) 100%);
}
.hero-txt{position:relative; z-index:1; max-width:760px}
.hero-kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:0.22em; color:var(--navy); font-weight:600;
  margin:0 0 clamp(22px,3vw,30px);
}
.hero-kicker s{width:26px; height:1px; background:var(--navy); opacity:.45; display:block}
/* 영문 제목이 가장 크고, 한글 두 줄이 그 아래에 받쳐 선다 (레퍼런스와 같은 순서) */
.hero h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(29px, 5vw, 55px); line-height:1.28;
  letter-spacing:-0.02em; margin:0 0 clamp(18px,2.4vw,26px);
}
.hero-ko{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(16px, 2.3vw, 23px); line-height:1.85;
  color:var(--navy); margin:0 0 clamp(30px,4vw,42px); letter-spacing:-0.02em;
}
.hero-ko span{display:block}
.hero-cta{justify-content:center}
/* 히어로 글자는 위에서부터 차례로 올라온다 */
.hero-txt > *{opacity:0; transform:translateY(16px); animation:riseIn .95s cubic-bezier(.16,1,.3,1) forwards}
.hero-txt > *:nth-child(1){animation-delay:.12s}
.hero-txt > *:nth-child(2){animation-delay:.26s}
.hero-txt > *:nth-child(3){animation-delay:.42s}
.hero-txt > *:nth-child(4){animation-delay:.58s}
@keyframes riseIn{to{opacity:1; transform:none}}
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 26px; font-size:13.5px; font-weight:500;
  border:1px solid var(--ink); border-radius:var(--r-pill);
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .12s ease;
}
.btn:hover{background:var(--ink); color:var(--paper)}
.btn:active{transform:translateY(1px)}
.btn-ghost{border-color:var(--line); color:var(--ink-soft)}
.btn-ghost:hover{background:transparent; border-color:var(--ink); color:var(--ink)}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px}

/* 호흡 원은 히어로 맨 아래 가운데. 다음 섹션 경계에 반쯤 걸친다 */
.breath{
  position:absolute; left:50%; transform:translateX(-50%); bottom:-56px;
  width:clamp(150px, 17vw, 196px); aspect-ratio:1; z-index:3;
  display:grid; place-items:center; text-align:center;
}
.breath-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--navy); opacity:.62; background:var(--paper);
  animation:breathe var(--breath) cubic-bezier(.42,0,.58,1) infinite;
}
.breath-ring.is-echo{border-color:var(--navy); opacity:.2; animation-delay:-1.1s; background:none}
.breath-word{
  position:relative; z-index:1;
  font-family:var(--serif); font-size:clamp(22px,2.8vw,30px);
  letter-spacing:0.06em; line-height:1;
}
.breath-word i{font-style:normal; color:var(--navy); margin:0 .18em}
.breath-step{
  position:absolute; bottom:-30px; left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:11px; letter-spacing:0.22em;
  color:var(--warm-gray); font-weight:500;
}
.breath-step span{position:absolute; left:50%; transform:translateX(-50%); opacity:0}
.breath-step span:nth-child(1){animation:step1 var(--breath) linear infinite}
.breath-step span:nth-child(2){animation:step2 var(--breath) linear infinite}
.breath-step span:nth-child(3){animation:step3 var(--breath) linear infinite}
.breath-static{display:none; font-size:11px; letter-spacing:.14em; color:var(--warm-gray)}

/* 4초 들숨(확장) -> 4초 정지 -> 6초 날숨(수축) */
@keyframes breathe{
  0%     {transform:scale(.74)}
  28.57% {transform:scale(1)}
  57.14% {transform:scale(1)}
  100%   {transform:scale(.74)}
}
@keyframes step1{0%,2%{opacity:0} 6%,26%{opacity:1} 30%,100%{opacity:0}}
@keyframes step2{0%,30%{opacity:0} 34%,54%{opacity:1} 58%,100%{opacity:0}}
@keyframes step3{0%,58%{opacity:0} 62%,94%{opacity:1} 98%,100%{opacity:0}}

/* ===========================================================
   4. 바로가기 4칸 : 실제 브랜드 로고(Simple Icons)를 쓴다
   =========================================================== */
.quick{background:var(--paper-lo); border-block:1px solid var(--line)}
.quick-in{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--pad-x);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.quick a{
  padding:22px 8px; text-align:center;
  font-size:11.5px; letter-spacing:0.12em; font-weight:500; color:var(--ink-soft);
  border-left:1px solid var(--line);
  transition:background .3s ease, color .3s ease;
}
.quick a:first-child{border-left:0}
.quick a:hover{background:var(--paper-hi); color:var(--ink)}
.quick img{width:17px; height:17px; margin:0 auto 9px; opacity:.62; transition:opacity .3s ease}
.quick a:hover img{opacity:1}

/* ===========================================================
   5. ABOUT : 글이 주인공이고 사진이 글에 걸쳐 들어온다
      (히어로의 좌우 2단과 겹치지 않는 다른 짜임)
   =========================================================== */
.about{padding:var(--sec-y) 0 calc(var(--sec-y) + 40px); position:relative}
.about-in{max-width:var(--wrap); margin:0 auto; padding:0 var(--pad-x); position:relative}
.about h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(29px, 4.8vw, 50px); line-height:1.28; letter-spacing:-0.015em;
  margin:0 0 14px; max-width:14em;
}
.about-ko{
  font-family:var(--serif); font-weight:400; color:var(--navy);
  font-size:clamp(17px,2.2vw,22px); letter-spacing:-0.02em;
  margin:0 0 clamp(30px,4vw,48px);
}
.about-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,60px);
  max-width:62%;
}
.about-cols p{margin:0 0 1.4em; color:var(--ink-soft); line-height:2.05; font-size:15px}
.about-cols p:last-child{margin-bottom:0}
.about-cols strong{font-weight:600; color:var(--ink)}
/* 사진은 오른쪽 아래에서 본문 영역으로 밀고 들어온다 */
.about-fig{
  position:absolute; right:var(--pad-x); bottom:-96px;
  width:min(360px, 33%); z-index:2;
}
.about-fig img{aspect-ratio:4/5; object-fit:cover; width:100%}
.sign{
  margin-top:44px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; align-items:baseline; gap:12px; max-width:62%;
}
.sign b{font-family:var(--serif); font-weight:400; font-size:17px}
.sign span{font-size:11.5px; letter-spacing:0.14em; color:var(--warm-gray)}

/* ===========================================================
   6. PRODUCT : 가로로 밀어 보는 카드 줄
   =========================================================== */
.product{padding:var(--sec-y) 0; background:var(--paper-hi); border-block:1px solid var(--line); overflow-x:clip}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap}
.sec-more{
  font-size:11.5px; letter-spacing:0.16em; color:var(--warm-gray);
  border-bottom:1px solid var(--line); padding-bottom:5px; white-space:nowrap;
  transition:color .3s ease, border-color .3s ease;
}
.sec-more:hover{color:var(--ink); border-color:var(--ink)}

.rail-outer{margin-inline:calc(50% - 50vw)}
.rail{
  display:flex; gap:clamp(14px,2vw,24px);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-block:44px 8px;
  padding-inline:max(var(--pad-x), calc(50vw - var(--wrap)/2 + var(--pad-x)));
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}

/* 레퍼런스의 강사 카드처럼 세로로 긴 카드 */
.card{
  flex:0 0 clamp(212px, 24vw, 268px); scroll-snap-align:start;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card);
  display:flex; flex-direction:column;
  transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease;
}
.card:hover{transform:translateY(-5px); box-shadow:0 14px 34px rgba(42,46,53,.09)}
/* 원본이 '긴 상세 이미지 한 장'이라 카드마다 필요한 부분만 확대한다.
   배율과 위치는 각 카드의 --z / --px / --py 로 조절. */
.card-fig{
  aspect-ratio:3/4; background:var(--paper-lo);
  background-repeat:no-repeat;
  background-size:var(--z, cover);
  background-position:var(--px, 50%) var(--py, 50%);
}
.card-body{padding:20px 20px 24px; display:flex; flex-direction:column; flex:1}
.card h3{
  font-family:var(--serif); font-weight:400; font-size:19px; line-height:1.5;
  margin:0 0 8px; letter-spacing:-0.015em;
}
.card p{margin:0; font-size:13px; color:var(--ink-soft); line-height:1.85}
.card-foot{
  margin-top:auto; padding-top:18px;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.price{font-size:14px; font-weight:600}
.price s{color:var(--warm-gray); font-size:11.5px; font-weight:400; text-decoration:none; letter-spacing:.08em}
.limit{
  font-size:10.5px; letter-spacing:.08em; color:var(--navy);
  border:1px solid currentColor; border-radius:var(--r-pill); padding:3px 9px; white-space:nowrap;
}

/* 레일을 움직이는 실제 버튼 (안내 문구 대신 누를 수 있는 것을 둔다) */
.rail-nav{display:flex; gap:8px; margin-top:22px}
.rail-nav button{
  width:40px; height:40px; border:1px solid var(--line); border-radius:var(--r-pill);
  color:var(--ink-soft); display:grid; place-items:center; font-size:15px;
  transition:border-color .3s ease, color .3s ease, background .3s ease;
}
.rail-nav button:hover{border-color:var(--ink); color:var(--ink); background:var(--paper)}
.rail-nav button:active{transform:translateY(1px)}

/* 컬러 팔레트 : 이 사이트에서 색이 나오는 유일한 자리 */
.palette{margin-top:clamp(56px,8vw,88px); padding-top:34px; border-top:1px solid var(--line)}
.palette h3{
  font-family:var(--serif); font-weight:400; font-size:clamp(19px,2.4vw,24px);
  margin:0 0 10px; letter-spacing:-0.02em;
}
.palette p{font-size:13.5px; color:var(--ink-soft); margin:0 0 26px; max-width:34em}
.swatches{display:grid; grid-template-columns:repeat(13,1fr); gap:16px 8px}
.sw{text-align:center}
.sw i{
  display:block; width:34px; height:34px; margin:0 auto 9px; border-radius:50%;
  border:1px solid rgba(42,46,53,.1);
  transform:scale(.94); transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.sw:hover i{transform:scale(1.14)}
.sw b{
  display:block; font-family:var(--serif); font-weight:400; font-size:12.5px;
  color:var(--ink-soft);
}

/* ===========================================================
   7. PROJECT : 큰 것 하나 + 작은 것 둘. 균등 3열을 피한다
   =========================================================== */
/* 갤러리 레퍼런스(유진갤러리) 방식.
   왼쪽에 글, 오른쪽에 높이가 서로 어긋난 사진 셋. 캡션은 사진 위가 아니라 사진 아래에 둔다.
   사진마다 밝기가 달라 글씨가 묻히는 문제도 이 방식으로 같이 사라진다. */
.project{padding:calc(var(--sec-y) + 20px) 0}
.project .wrap{max-width:1240px}     /* 사진 셋이 충분히 크게 보이도록 이 섹션만 넓게 쓴다 */
.proj-wrap{
  display:grid; grid-template-columns:0.58fr 1.42fr; gap:clamp(30px,4.5vw,64px);
  align-items:start;
}
.proj-intro .sec-title{font-size:clamp(26px,3.4vw,36px)}
.proj-items{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px); align-items:start}
.proj-item{display:block}
.proj-item:nth-child(1){margin-top:clamp(0px,3vw,34px)}
.proj-item:nth-child(2){margin-top:0}
.proj-item:nth-child(3){margin-top:clamp(14px,5vw,62px)}
.proj-fig{overflow:hidden; background:var(--paper-lo); margin-bottom:16px}
.proj-fig img{width:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.proj-item:hover .proj-fig img{transform:scale(1.035)}
.proj-item:nth-child(1) .proj-fig img{aspect-ratio:3/4}
.proj-item:nth-child(2) .proj-fig img{aspect-ratio:4/5}
.proj-item:nth-child(3) .proj-fig img{aspect-ratio:3/4}
.proj-item h3{
  font-family:var(--serif); font-weight:400; font-size:15.5px; line-height:1.5;
  margin:0 0 5px; letter-spacing:-0.015em;
}
.proj-item p{margin:0; font-size:12px; color:var(--warm-gray); line-height:1.7}

/* ===========================================================
   8. LECTURE : 차림표처럼 읽는 목록
   =========================================================== */
.lecture{padding:var(--sec-y) 0; background:var(--paper-lo); border-block:1px solid var(--line)}
.lec-list{margin-top:clamp(34px,5vw,54px); border-top:1px solid var(--line)}
.lec{
  display:grid; grid-template-columns:minmax(96px,0.22fr) 1fr auto; gap:clamp(16px,3vw,36px);
  align-items:baseline; padding:26px 4px; border-bottom:1px solid var(--line);
  transition:padding-left .4s cubic-bezier(.2,.7,.3,1), background .4s ease;
}
.lec:hover{padding-left:14px; background:rgba(251,249,245,.6)}
.lec-kind{font-family:var(--serif); font-size:14px; color:var(--warm-gray)}
.lec-name{font-family:var(--serif); font-size:clamp(17px,2.3vw,21px); line-height:1.5}
.lec-name small{
  display:block; font-family:var(--sans); font-size:12.5px; color:var(--ink-soft);
  margin-top:7px; line-height:1.8; font-weight:350;
}
.lec-go{color:var(--warm-gray); font-size:14px; transition:transform .4s ease, color .4s ease}
.lec:hover .lec-go{transform:translateX(5px); color:var(--ink)}

/* ===========================================================
   9. CONTACT : 커튼 사진 위 네이비 블록.
      페이지에서 밝기가 바뀌는 곳은 여기 한 번뿐이고, 푸터까지 그대로 이어진다.
   =========================================================== */
.contact{
  position:relative; padding:calc(var(--sec-y) + 10px) 0;
  background:var(--navy-deep); color:#EDEAE3; overflow:hidden;
}
.contact-bg{
  position:absolute; inset:0; z-index:0;
  /* 이 파일이 assets/ 안에 있으므로 이미지 경로는 한 단계 위에서 시작한다 */
  background:url("../img/curtain-navy.jpg") center/cover no-repeat;
  opacity:.5;
}
.contact-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(30,42,56,.94) 42%, rgba(30,42,56,.55) 100%);
}
.contact-in{position:relative; z-index:1; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad-x)}
.contact h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(27px,4.4vw,44px); line-height:1.42; letter-spacing:-0.03em;
  margin:0 0 20px; max-width:15em;
}
.contact p{margin:0; color:rgba(237,234,227,.72); font-size:15px; line-height:2; max-width:28em}
.contact-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px}
.btn-light{border-color:rgba(237,234,227,.86); color:#EDEAE3}
.btn-light:hover{background:#EDEAE3; color:var(--navy-deep)}
.btn-line{border-color:rgba(237,234,227,.3); color:rgba(237,234,227,.8)}
.btn-line:hover{background:transparent; border-color:#EDEAE3; color:#EDEAE3}
.contact-info{
  margin-top:clamp(46px,6vw,72px); padding-top:28px;
  border-top:1px solid rgba(237,234,227,.16);
  display:flex; flex-wrap:wrap; gap:10px 46px;
  font-size:13px; color:rgba(237,234,227,.72);
}
.contact-info b{
  font-weight:500; color:rgba(237,234,227,.42);
  margin-right:10px; letter-spacing:.14em; font-size:10.5px;
}

/* ===========================================================
   10. 푸터
   =========================================================== */
.ft{background:var(--navy-deep); color:rgba(237,234,227,.6); padding:0 0 40px; font-size:12px}
.ft-in{max-width:var(--wrap); margin:0 auto; padding:0 var(--pad-x)}
.ft-top{
  display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:center;
  padding:34px 0; border-top:1px solid rgba(237,234,227,.16);
}
.ft .logo{color:#EDEAE3; font-size:18px}
.ft .logo i{color:#8FA6BF}
.ft-nav{display:flex; flex-wrap:wrap; gap:8px 26px}
.ft-nav a{font-size:11.5px; letter-spacing:.14em; color:rgba(237,234,227,.6); transition:color .3s}
.ft-nav a:hover{color:#EDEAE3}
.ft-biz{line-height:2; color:rgba(237,234,227,.42); font-size:11.5px}
.ft-biz span{margin-right:18px; white-space:nowrap; display:inline-block}
.ft-copy{margin-top:16px; color:rgba(237,234,227,.3); font-size:11px}

/* ===========================================================
   11. 스크롤 등장 (transform / opacity 만 사용)
   =========================================================== */
.rv{opacity:0; transform:translateY(18px); transition:opacity .85s ease, transform .85s cubic-bezier(.2,.7,.3,1)}
.rv.is-in{opacity:1; transform:none}
.rv-d1{transition-delay:.09s} .rv-d2{transition-delay:.18s} .rv-d3{transition-delay:.27s}

/* ===========================================================
   12. 반응형
   =========================================================== */
@media (max-width: 1000px){
  .swatches{grid-template-columns:repeat(7,1fr)}
  .about-cols{max-width:none}
  .sign{max-width:none}
  .about-fig{position:static; width:100%; max-width:420px; margin-top:44px}
  .about{padding-bottom:var(--sec-y)}
}
@media (max-width: 900px){
  .hero{padding-bottom:clamp(88px,14vw,110px)}
  .breath{bottom:-46px; width:clamp(136px,34vw,168px)}
  .about-cols{grid-template-columns:1fr; gap:0}
  .proj-wrap{grid-template-columns:1fr; gap:38px}
  .proj-item:nth-child(n){margin-top:0}      /* 좁은 화면에서는 어긋난 배치를 푼다 */
}
@media (max-width: 720px){
  .nav{display:none}
  .hd-burger{display:block}
  .quick-in{grid-template-columns:repeat(2,1fr)}
  .quick a:nth-child(3){border-left:0}
  .quick a:nth-child(n+3){border-top:1px solid var(--line)}
  .swatches{grid-template-columns:repeat(5,1fr); gap:18px 6px}
  .sec-head{align-items:flex-start}
  /* 좁은 화면에서는 분류를 제목 위로 올린다 */
  .lec{grid-template-columns:1fr auto; row-gap:6px; padding:22px 4px}
  .lec-kind{grid-column:1 / -1; order:-1; font-size:12px; letter-spacing:.1em}
  .lec-go{align-self:center}
  .proj-items{grid-template-columns:1fr 1fr; gap:14px}
  .proj-item:nth-child(3){grid-column:1 / -1; max-width:50%}
  .contact-info{flex-direction:column; gap:12px}
}
@media (max-width: 420px){
  .hero h1{font-size:30px}
  .sw i{width:30px; height:30px}
}

/* 모션 줄이기 설정 존중. 호흡 애니메이션은 멈추고 안내 문구로 바꾼다 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .rv{opacity:1; transform:none}
  .breath-ring{transform:scale(.92)}
  .breath-step{display:none}
  .breath-static{display:block; position:absolute; bottom:-26px; left:50%; transform:translateX(-50%); white-space:nowrap}
}

/* ===========================================================
   13. 하위 페이지 공통 (ABOUT / PRODUCT / PROJECT / LECTURE / CONTACT)
   =========================================================== */
.nav a.is-here{color:var(--ink)}
.nav a.is-here::after{transform:scaleX(1)}

/* 페이지 상단 배너 */
.pagehead{
  position:relative; overflow:hidden;
  min-height:clamp(240px, 40vh, 380px);
  display:grid; place-items:center; text-align:center;
  padding:clamp(52px,7vw,84px) var(--pad-x);
}
.pagehead-bg{position:absolute; inset:0; z-index:0}
.pagehead-bg img{width:100%; height:100%; object-fit:cover}
.pagehead-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(72% 62% at 50% 50%, rgba(244,240,232,.9) 0%, rgba(244,240,232,.6) 52%, rgba(244,240,232,.24) 100%),
    linear-gradient(to bottom, rgba(244,240,232,.5), rgba(244,240,232,0) 42%, rgba(244,240,232,.9));
}
.pagehead-in{position:relative; z-index:1; max-width:720px}
.pagehead h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(28px,4.4vw,46px); line-height:1.28;
  letter-spacing:-0.02em; margin:0 0 12px;
}
.pagehead .ko{
  font-family:var(--serif); font-weight:400; color:var(--navy);
  font-size:clamp(16px,2.1vw,21px); margin:0; letter-spacing:-0.02em;
}

/* 본문 공통 블록 */
.block{padding:var(--sec-y) 0}
.block-alt{background:var(--paper-hi); border-block:1px solid var(--line)}
.block-lo{background:var(--paper-lo); border-block:1px solid var(--line)}
.prose{max-width:38em}
.prose p{margin:0 0 1.5em; color:var(--ink-soft); line-height:2.05; font-size:15px}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:600; color:var(--ink)}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,60px)}
.two-col p{margin:0 0 1.4em; color:var(--ink-soft); line-height:2.05; font-size:15px}
.two-col p:last-child{margin-bottom:0}
.two-col strong{font-weight:600; color:var(--ink)}

/* 왼쪽 글 / 오른쪽 사진 (갤러리 레퍼런스 방식) */
.split{display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(30px,5vw,72px); align-items:start}
.split-rev{grid-template-columns:1.15fr 0.85fr}
.split img{width:100%; object-fit:cover}
.split figcaption{margin-top:14px; font-size:12px; color:var(--warm-gray); line-height:1.7}

/* 구성품 목록 */
.spec{border-top:1px solid var(--line); margin-top:clamp(30px,4vw,44px)}
.spec-row{
  display:grid; grid-template-columns:minmax(120px,0.26fr) 1fr;
  gap:clamp(16px,3vw,36px); align-items:baseline;
  padding:22px 4px; border-bottom:1px solid var(--line);
}
.spec-row dt{font-family:var(--serif); font-size:15px; color:var(--navy); margin:0}
.spec-row dd{margin:0; font-size:14px; color:var(--ink-soft); line-height:1.9}
.spec-row dd small{display:block; color:var(--warm-gray); font-size:12.5px; margin-top:4px}

/* 두 에디션 비교 */
.editions{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,28px); margin-top:clamp(30px,4vw,44px)}
.edition{background:var(--paper); border:1px solid var(--line); padding:clamp(24px,3vw,34px)}
.edition.is-pick{border-color:var(--navy)}
.edition h3{font-family:var(--serif); font-weight:400; font-size:21px; margin:0 0 6px; letter-spacing:-0.02em}
.edition .p{font-size:22px; font-weight:600; margin:0 0 18px; letter-spacing:-0.01em}
.edition ul{margin:0; padding:0; list-style:none; border-top:1px solid var(--line)}
.edition li{
  font-size:13.5px; color:var(--ink-soft); padding:11px 0;
  border-bottom:1px solid var(--line); line-height:1.6;
}
.edition li.is-off{color:var(--warm-gray); opacity:.62}
.edition .limit{display:inline-block; margin-bottom:16px}

/* 프로젝트 갤러리 격자 */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.6vw,32px) clamp(14px,2vw,24px); margin-top:clamp(34px,5vw,54px)}
.gal{display:block}
.gal-fig{overflow:hidden; background:var(--paper-lo); margin-bottom:14px}
.gal-fig img{width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.gal:hover .gal-fig img{transform:scale(1.035)}
.gal:nth-child(3n+2){margin-top:clamp(0px,3.4vw,44px)}
.gal h3{font-family:var(--serif); font-weight:400; font-size:16px; margin:0 0 5px; letter-spacing:-0.015em}
.gal p{margin:0; font-size:12.5px; color:var(--warm-gray); line-height:1.7}

/* 강의 상세 카드 */
.course{
  display:grid; grid-template-columns:minmax(150px,0.3fr) 1fr;
  gap:clamp(20px,4vw,56px); padding:clamp(30px,4vw,46px) 0;
  border-bottom:1px solid var(--line);
}
.course:first-of-type{border-top:1px solid var(--line)}
.course h3{font-family:var(--serif); font-weight:400; font-size:clamp(19px,2.4vw,25px); margin:0 0 4px; letter-spacing:-0.02em}
.course .kind{font-size:11px; font-weight:600; letter-spacing:.2em; color:var(--warm-gray); margin:0 0 10px}
.course p{margin:0 0 1.3em; font-size:14.5px; color:var(--ink-soft); line-height:2}
.course p:last-child{margin-bottom:0}
.course .tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.course .tags span{
  font-size:11.5px; color:var(--warm-gray);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:5px 12px;
}

/* 문의 폼 */
.formwrap{display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(32px,5vw,76px); align-items:start}
.field{margin-bottom:20px}
.field label{display:block; font-size:12px; font-weight:600; letter-spacing:.1em; color:var(--ink-soft); margin-bottom:8px}
.field input, .field textarea, .field select{
  width:100%; font:inherit; font-size:14.5px; color:var(--ink);
  background:var(--paper-hi); border:1px solid var(--line); border-radius:0;
  padding:13px 14px; transition:border-color .3s ease;
}
.field textarea{min-height:132px; resize:vertical}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--navy)}
.field .help{font-size:12px; color:var(--warm-gray); margin:7px 0 0}
.form-note{
  margin-top:22px; padding:14px 16px; background:var(--paper-lo);
  border-left:2px solid var(--navy); font-size:12.5px; color:var(--ink-soft); line-height:1.8;
}
.info-list{border-top:1px solid var(--line)}
.info-list div{
  display:flex; gap:18px; padding:16px 0; border-bottom:1px solid var(--line);
  font-size:14px; color:var(--ink-soft);
}
.info-list b{
  min-width:78px; font-weight:600; font-size:11px; letter-spacing:.14em;
  color:var(--warm-gray); padding-top:3px;
}

@media (max-width: 900px){
  .two-col{grid-template-columns:1fr; gap:0}
  .split, .split-rev{grid-template-columns:1fr; gap:30px}
  .editions{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .gal:nth-child(3n+2){margin-top:0}
  .gal:nth-child(2n){margin-top:clamp(0px,4vw,36px)}
  .formwrap{grid-template-columns:1fr; gap:38px}
}
@media (max-width: 720px){
  .spec-row{grid-template-columns:1fr; gap:6px}
  .course{grid-template-columns:1fr; gap:14px}
  .gallery{grid-template-columns:1fr; gap:26px}
  .gal:nth-child(n){margin-top:0}
  .info-list div{flex-direction:column; gap:4px}
}