/* ===========================================================
   율이공방 — 공통 스타일
   색·글자·간격은 전부 아래 변수로 모아 두었습니다.
   톤을 바꾸고 싶으면 :root 안의 값만 고치면 전체가 따라옵니다.
   =========================================================== */

:root{
  /* 바탕 */
  --bg:        #FAF8F3;   /* 기본 바탕 (따뜻한 크림) */
  --bg2:       #F1EFE6;   /* 한 단계 진한 바탕 */
  --bg3:       #EBEFE5;   /* 연한 그린 — 강사 소개 등 구획용 */
  --paper:     #FFFFFF;

  /* 글자 */
  --ink:       #202B20;   /* 제목 (대비 13:1) */
  --body:      #3E4838;   /* 본문 (대비 9.1:1) */
  --muted:     #4A5442;   /* 보조 (대비 6.9~7.5:1) */
  --on-dark:   #F4F2EA;

  /* 브랜드 — 제주의 숲빛 세이지 */
  --brand:     #4E6146;   /* 주색 (제목·아이콘) */
  --brand-dk:  #35452F;   /* 글자·버튼용 진한 값 (대비 9.8:1) */
  --brand-lt:  #8FA383;   /* 선·장식 */
  --brand-pale:#DCE4D5;

  /* 3축 색 — 향 / 색 / 자연 */
  --ax-scent:      #A86B3C;
  --ax-scent-ink:  #6B3C15;   /* 밝은 배경 위 글자용 (대비 7.6:1) */
  --ax-scent-pale: #F3E7DA;
  --ax-color:      #7A6087;
  --ax-color-ink:  #4F3A5C;   /* 밝은 배경 위 글자용 (대비 8.2:1) */
  --ax-color-pale: #EDE6F0;
  --ax-eco:        #4E6146;
  --ax-eco-ink:    #35452F;
  --ax-eco-pale:   #E1E9DA;

  --line:      #E4E0D3;
  --line-soft: #EEEBE0;

  --radius:    14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(32,43,32,.03), 0 8px 24px rgba(32,43,32,.05);
  --shadow-md: 0 2px 6px rgba(32,43,32,.04), 0 18px 44px rgba(32,43,32,.08);

  --head-h:    72px;
  --bar-h:     58px;
}

/* ── 기본 ───────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:'Pretendard','Noto Sans KR',system-ui,-apple-system,'Malgun Gothic',sans-serif;
  font-size:16.5px;
  line-height:1.85;
  letter-spacing:-.012em;
  word-break:keep-all;
  overflow-wrap:break-word;
  /* overflow-x:hidden 을 body 에 걸면 body 가 별도 스크롤 상자가 되어
     주소 뒤 #표시로 이동하는 것과 window.scrollTo 가 먹지 않는다.
     가로 넘침은 각 요소에서 이미 잡아 두었으므로(표는 .tbl-scroll) 빼둔다. */
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand-dk); text-underline-offset:3px; }

h1,h2,h3,h4{
  font-family:'Noto Serif KR','Nanum Myeongjo',serif;
  color:var(--ink);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.42;
  word-break:keep-all;
  margin:0 0 .6em;
}
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.wrap{ max-width:1140px; margin:0 auto; padding:0 24px; }
/* 읽기 편한 폭으로 좁히되, 왼쪽 선은 .wrap 과 그대로 맞춘다.
   (.wrap 자체에 max-width 를 걸면 가운데로 밀려 선이 어긋난다) */
.col{ max-width:840px; }
.col.wide{ max-width:920px; }
@media(min-width:1400px){ .wrap{ max-width:1380px; } }
@media(max-width:700px){ .wrap{ padding:0 18px; } }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── 헤더 ───────────────────────────────────────────── */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:90;
  height:var(--head-h);
  background:rgba(250,248,243,.94);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.hd-in{ height:100%; display:flex; align-items:center; gap:20px; }
.logo{
  display:flex; align-items:baseline; gap:9px;
  font-family:'Noto Serif KR',serif; font-weight:700; font-size:21px;
  color:var(--ink); text-decoration:none; letter-spacing:-.03em; flex:none;
}
.logo em{
  font-style:normal; font-size:11.5px; font-family:inherit; font-weight:500;
  color:var(--brand-dk); letter-spacing:.08em; white-space:nowrap;
}
.nav{ margin-left:28px; display:flex; align-items:center; gap:2px; }
.nav .btn-ask{ margin-left:auto; }
.nav a{
  display:block; padding:9px 14px; border-radius:9px;
  font-size:15.5px; font-weight:500; color:var(--body); text-decoration:none;
  white-space:nowrap; transition:background .15s,color .15s;
}
.nav a:hover{ background:var(--bg3); color:var(--brand-dk); }
.nav a[aria-current="page"]{ color:var(--brand-dk); font-weight:700; }
.nav .drop{ position:relative; }
.nav .drop > a::after{ content:'⌄'; margin-left:5px; font-size:12px; opacity:.6; }
.nav .drop-menu{
  position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:180px; padding:8px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transition:.18s;
}
.nav .drop:hover .drop-menu,
.nav .drop:focus-within .drop-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.drop-menu a{ font-size:15px; padding:8px 12px; }

.btn-ask{
  flex:none; margin-left:10px; padding:11px 20px; border-radius:99px;
  background:var(--brand-dk); color:#fff !important; font-size:15px; font-weight:700;
  text-decoration:none; white-space:nowrap; box-shadow:0 4px 14px rgba(53,69,47,.22);
  transition:transform .15s, box-shadow .15s;
}
.btn-ask:hover{ transform:translateY(-1px); box-shadow:0 7px 20px rgba(53,69,47,.3); }

.burger{
  display:none; margin-left:auto; width:44px; height:44px; flex:none;
  background:none; border:1px solid var(--line); border-radius:11px; cursor:pointer;
  align-items:center; justify-content:center; gap:4px; flex-direction:column;
}
.burger span{ display:block; width:19px; height:1.8px; background:var(--ink); border-radius:2px; transition:.2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.8px) rotate(-45deg); }

@media(max-width:1000px){
  .burger{ display:flex; }
  .nav{
    position:fixed; inset:var(--head-h) 0 auto 0; margin:0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:10px 18px 22px;
    background:var(--bg); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md);
    max-height:calc(100vh - var(--head-h)); overflow-y:auto;
    display:none;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:13px 6px; border-bottom:1px solid var(--line-soft); border-radius:0; font-size:16px; }
  .nav .drop-menu{
    position:static; transform:none; opacity:1; visibility:visible;
    border:0; box-shadow:none; background:transparent; padding:0 0 0 16px; min-width:0;
  }
  .nav .drop > a::after{ display:none; }
  .btn-ask{ margin:14px 0 0; text-align:center; padding:14px; }
}

/* ── 섹션 공통 ───────────────────────────────────────── */
.sec{ padding:64px 0; }
.sec.tight{ padding:46px 0; }
.sec.alt{ background:var(--bg2); }
.sec.green{ background:var(--bg3); }
@media(max-width:700px){ .sec{ padding:40px 0; } .sec.tight{ padding:30px 0; } }

.eyebrow{
  display:inline-block; margin:0 0 14px;
  font-size:12.5px; font-weight:700; letter-spacing:.06em;
  color:var(--brand-dk); text-transform:none;
}
.eyebrow::before{
  content:''; display:inline-block; width:22px; height:1.5px;
  background:var(--brand-lt); vertical-align:middle; margin-right:9px;
}
.sec-head{ max-width:800px; margin-bottom:30px; }
.sec-head h2{ font-size:clamp(24px,3.1vw,34px); margin-bottom:14px; }
.sec-head p{ color:var(--muted); font-size:17px; }
@media(max-width:700px){ .sec-head{ margin-bottom:22px; } .sec-head p{ font-size:15.5px; } }

.lead{ font-size:clamp(17px,2vw,19px); color:var(--body); }
.quiet{ color:var(--muted); font-size:15px; }

/* 두 칸 본문 배치 — 폰에서는 한 칸으로 접힌다 */
.split{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,64px); align-items:start; }
.split.mid{ align-items:center; }
.split.side{ grid-template-columns:minmax(0,1fr) 340px; gap:clamp(30px,4vw,52px); }
.split .sticky{ position:sticky; top:96px; }
@media(max-width:900px){
  .split,.split.side{ grid-template-columns:1fr; }
  .split .sticky{ position:static; }
}

/* 원고 그대로 보여주는 덩어리 (줄바꿈 유지) */
.script{
  font-size:clamp(16.5px,1.9vw,18.5px); line-height:2.05; color:var(--body);
}
.script strong{ color:var(--ink); font-weight:700; }

/* ── 버튼 ───────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 28px; border-radius:99px; border:1.5px solid transparent;
  font-size:16px; font-weight:700; text-decoration:none; cursor:pointer;
  font-family:inherit; letter-spacing:-.02em; transition:transform .15s, box-shadow .15s, background .15s;
}
.btn-primary{ background:var(--brand-dk); color:#fff; box-shadow:0 5px 18px rgba(53,69,47,.24); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(53,69,47,.3); }
.btn-ghost{ background:transparent; color:var(--brand-dk); border-color:var(--brand-lt); }
.btn-ghost:hover{ background:var(--brand-pale); }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }
@media(max-width:480px){
  .btn{ padding:14px 22px; font-size:15.5px; }
  .btn-row .btn{ flex:1 1 100%; }
}

/* ── 첫 화면 ─────────────────────────────────────────── */
/* 사진 4장이 천천히 바뀌는 첫 화면.
   글자는 반투명 패널 위에 올려서, 어떤 사진이 와도 대비가 흔들리지 않게 했다.
   (그라데이션만으로 덮으면 밝은 사진에서 흰 글자가 묻힌다 — 실제로 측정해 확인) */
.hero{
  position:relative; isolation:isolate;
  padding-top:var(--head-h);
  min-height:clamp(560px, 82vh, 780px);
  display:flex; align-items:flex-end;
  background:#1B241B;
  overflow:hidden;
}
.hero-slides{ position:absolute; inset:0; z-index:-2; }
.slide{
  position:absolute; inset:0; margin:0;
  /* 5초에 한 번, 1.4초에 걸쳐 천천히 겹친다.
     (2초 간격은 너무 분주하다는 의견으로 늦췄다 — 사진이 2장뿐이라 더 그렇다) */
  opacity:0; transition:opacity 1.4s ease-in-out;
}
.slide.is-on{ opacity:1; }
/* 화면이 사진보다 넓으면 세로가 넘쳐 잘린다.
   기준을 위쪽에 두어, 잘려 나가는 쪽이 아래(테이블·바닥)가 되게 한다. */
.slide img{ width:100%; height:100%; object-fit:cover; object-position:center 32%; }
/* 1번은 강사 머리가 프레임 맨 위에 있어 더 위쪽을 기준으로 잡는다 */
.slide:first-child img{ object-position:center 10%; }
/* 배경 영상 — 16:9 원본이 넓은 화면에서 세로로 잘리므로,
   기준을 위쪽에 두어 잘리는 쪽이 아래(책상)가 되게 한다 (인물 머리 보호) */
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 12%;
}
/* 글자가 놓이는 자리만 부드럽게 어둡게. 테두리가 없어 사진이 이어져 보인다.
   ① 아래에서 위로  ② 왼쪽에서 오른쪽으로 — 두 겹이 겹치는 왼쪽 아래가 가장 어둡다 */
/* 사진에 층 번호(z-index 0·1·2)를 주었으므로, 글자 뒤 그늘은 그보다 위(3)에
   있어야 한다. 빼먹으면 그늘이 사진 아래로 내려가 흰 글자가 묻힌다. */
.hero-slides::after{
  content:''; position:absolute; inset:0; z-index:3;
  /* 화면 전체를 넓게 덮으면 사진이 통째로 어두워진다.
     그래서 넓게 까는 두 겹은 최소로 줄이고, 글자 덩어리 둘레에만
     타원으로 눌러 준다. 사진이 주인공인 오른쪽은 거의 손대지 않는다.

     사진 파일에 구워 넣었던 그늘도 걷어냈다. 이제 사진은 원본 그대로다.

     실측 — 사진이 덮인 정도: 전체평균 25%, 오른쪽 9%, 왼쪽 위 21%
            흰 글자 대비: 제목 최저 3.9:1(기준 3), 설명글 최저 4.8:1(기준 4.5) */
  /* 영상 배경으로 바꾸며 타원을 한 단계 올렸다(.62→.74).
     영상은 사진보다 밝은 순간이 있어, 4개 시점 프레임으로 재서 정했다
     — 제목 3.1(기준 3, 글자 그림자 별도), 설명 6.5 */
  background:
    /* 타원을 글자 덩어리에 맞게 「좁고 진하게」 바꿨다.
       넓게 진하게 하면 영상 전체가 어두워지는데, 좁히면 같은 보호를 하면서
       덮이는 넓이는 오히려 준다 (실측 — 전체 덮임 26% → 25%).
       이 값으로 제목 흰 3.42 / 제목 금색 3.1 / 설명 4.9 (기준 3·3·4.5) */
    radial-gradient(ellipse 40% 36% at 25% 53%,
      rgba(13,20,12,.90) 0%, rgba(13,20,12,.66) 20%, rgba(13,20,12,.44) 40%,
      rgba(13,20,12,.25) 60%, rgba(13,20,12,.095) 80%, rgba(13,20,12,0) 100%),
    linear-gradient(to top,
      rgba(13,20,12,.30) 0%, rgba(13,20,12,.24) 18%, rgba(13,20,12,.15) 34%,
      rgba(13,20,12,.07) 50%, rgba(13,20,12,.02) 66%, rgba(13,20,12,0) 80%),
    linear-gradient(to right,
      rgba(13,20,12,.22) 0%, rgba(13,20,12,.17) 24%, rgba(13,20,12,.09) 40%,
      rgba(13,20,12,.03) 55%, rgba(13,20,12,0) 72%);
}
/* 900px 이하에서는 글자가 가로를 다 쓴다. 왼쪽 겹은 빼고 아래쪽만 진하게,
   위쪽 절반은 걷어서 사진이 그대로 보이게 한다 */
@media(max-width:900px){
  .hero-slides::after{
    background:
      radial-gradient(ellipse 82% 48% at 50% 62%,
        rgba(13,20,12,.82) 0%, rgba(13,20,12,.60) 20%, rgba(13,20,12,.40) 40%,
        rgba(13,20,12,.22) 60%, rgba(13,20,12,.09) 80%, rgba(13,20,12,0) 100%),
      linear-gradient(to top,
        rgba(13,20,12,.42) 0%, rgba(13,20,12,.37) 16%, rgba(13,20,12,.29) 30%,
        rgba(13,20,12,.19) 44%, rgba(13,20,12,.09) 58%, rgba(13,20,12,.02) 72%,
        rgba(13,20,12,0) 84%);
  }
}

.hero-wrap{ position:relative; z-index:1; width:100%; padding-top:48px; padding-bottom:52px; }
.hero-panel{ max-width:620px; }
.hero-panel h1, .hero-panel .sub{ text-wrap:balance; }
/* 글자에 옅은 그늘을 깔아 잔가지·밝은 점 위에서도 획이 뭉개지지 않게 */
.hero-panel h1,
.hero-panel .sub{ text-shadow:0 1px 2px rgba(0,0,0,.45), 0 6px 26px rgba(0,0,0,.36); }
.hero-panel h1{ text-shadow:0 2px 5px rgba(0,0,0,.58), 0 10px 34px rgba(0,0,0,.46); }

/* ── 제목 위로 빛이 천천히 지나가게 ──────────────────
   글자는 흰색이 기본이고, 좁은 띠만 살짝 따뜻해졌다 돌아온다.
   금색처럼 진한 색을 넣으면 그 순간 글자가 어두워져 읽기 나빠진다.
   background 단축 속성을 쓰면 잘림 설정이 풀리므로 background-image 로 쓴다.
   글자 그늘은 끄고 filter 로 대신한다 — text-shadow 는 잘린 글자 안까지 번진다. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-panel h1.shine{
    background-image:linear-gradient(100deg,
      /* 금색이 진하면 그 순간 글자가 어두워져 배경 밝은 장면에서 안 읽힌다.
         (실측 — 진한 금색 #FFDF9E 일 때 2.49:1 로 기준 3 미달)
         따뜻한 기운은 남기되 밝기를 끌어올린 값으로 바꿨다. */
      #fff 0%, #fff 33%, #FFFDF7 41%, #FFF9E9 47%, #FFF4D9 50%,
      #FFF9E9 53%, #FFFDF7 59%, #fff 67%, #fff 100%);
    background-size:260% auto;
    /* 값이 커지면 배경이 왼쪽으로 밀린다 = 빛은 오른쪽→왼쪽.
       왼쪽→오른쪽으로 흐르게 하려면 값을 줄여 나가야 한다. */
    background-position:160% center;
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
    text-shadow:none;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.58)) drop-shadow(0 10px 30px rgba(0,0,0,.46));
    animation:shine 7s linear infinite;
  }
}
@keyframes shine{
  from{ background-position:160% center; }
  to  { background-position:-60% center; }
}

/* 움직임을 줄이도록 설정한 분에게는 흰 글자로 고정 */
@media(prefers-reduced-motion:reduce){
  .hero-panel h1.shine{
    animation:none; background-image:none; color:#fff;
    filter:none; text-shadow:0 2px 5px rgba(0,0,0,.58), 0 10px 34px rgba(0,0,0,.46);
  }
}
.hero-panel h1{
  color:#fff;
  font-size:clamp(27px,3.9vw,46px); line-height:1.3; margin-bottom:18px;
  letter-spacing:-.033em;
}
.hero-panel h1 .sep{ display:block; }
.hero-panel .sub{
  font-size:clamp(16px,1.8vw,18.5px); color:rgba(255,255,255,.92);
  margin-bottom:28px; max-width:30em;
}
.hero-panel .sub strong{ color:#fff; }
.hero-panel .tag{
  display:inline-block; margin-bottom:18px; padding:7px 15px; border-radius:99px;
  background:rgba(13,20,12,.68); color:#fff;
  font-size:13.5px; font-weight:700; letter-spacing:-.01em;
  border:1px solid rgba(255,255,255,.30);
  backdrop-filter:blur(6px);
}
.hero-panel .btn-primary{ background:#fff; color:#22301F; box-shadow:0 6px 20px rgba(0,0,0,.28); }
.hero-panel .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.5); }
.hero-panel .btn-ghost:hover{ background:rgba(255,255,255,.14); }


@media(max-width:900px){
  .hero{ min-height:clamp(520px, 76vh, 700px); }
  .hero-panel{ max-width:none; }
}
@media(max-width:700px){
  /* 헤더와 하단 고정바를 뺀 높이 안에서, 사진이 위쪽에 보이도록 */
  .hero{ min-height:calc(100vh - 126px); }
  /* 폰 브라우저는 주소창이 접혔다 펴지며 100vh 가 출렁인다.
     svh 를 쓰면 그 흔들림이 없어진다 (지원하는 기기만 적용) */
  @supports (height:100svh){ .hero{ min-height:calc(100svh - 126px); } }
  .hero-wrap{ padding-top:20px; padding-bottom:30px; }
  .hero-panel h1{ font-size:clamp(24px,6.4vw,31px); margin-bottom:13px; }
  .hero-panel .sub{ font-size:15.5px; margin-bottom:20px; }
  .hero-panel .sub br{ display:none; }
  .hero-panel .tag{ margin-bottom:13px; font-size:12.5px; padding:6px 13px; }
}

/* 320px 대 작은 폰 — 글자 덩어리를 줄여 아래쪽(어두운 쪽)으로 내린다 */
@media(max-width:360px){
  .hero-panel h1{ font-size:22.5px; line-height:1.28; margin-bottom:11px; }
  .hero-panel .sub{ font-size:14.5px; line-height:1.68; margin-bottom:16px; }
  .hero-panel .tag{ margin-bottom:10px; font-size:12px; padding:5px 12px; }
  .hero .btn{ padding:12px 18px; font-size:15px; }
  .hero-wrap{ padding-bottom:24px; }
}

/* 움직임을 줄이도록 설정한 분에게는 첫 장만 보여준다 */
@media(prefers-reduced-motion:reduce){
  .slide{ transition:none; }
}

/* ── 신뢰 지표 ───────────────────────────────────────── */
.stats{ background:var(--brand-dk); color:var(--on-dark); }
.stats-in{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:34px 20px; text-align:center; border-left:1px solid rgba(244,242,234,.14); }
.stat:first-child{ border-left:0; }
.stat b{
  display:block; font-family:'Noto Serif KR',serif; font-size:clamp(24px,3.2vw,33px);
  font-weight:600; color:#fff; line-height:1.25; letter-spacing:-.02em;
}
.stat span{ display:block; margin-top:7px; font-size:14px; color:rgba(244,242,234,.86); }
@media(max-width:700px){
  .stats-in{ grid-template-columns:repeat(2,1fr); }
  .stat{ padding:24px 12px; border-top:1px solid rgba(244,242,234,.14); }
  .stat:nth-child(-n+2){ border-top:0; }
  .stat:nth-child(odd){ border-left:0; }
  .stat span{ font-size:13px; }
}

/* ── 공감 인용 ───────────────────────────────────────── */
.voices{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:34px; }
.voice{
  padding:24px 26px; background:var(--paper); border:1px solid var(--line);
  border-left:3px solid var(--brand-lt); border-radius:0 var(--radius) var(--radius) 0;
  font-size:16.5px; color:var(--ink); line-height:1.75;
}
@media(max-width:760px){ .voices{ grid-template-columns:1fr; gap:12px; } .voice{ padding:19px 20px; font-size:15.5px; } }

/* ── 대표 소개 블록 ──────────────────────────────────── */
.owner{ background:var(--bg3); }
.owner-in{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(28px,4vw,56px); align-items:center; }
/* 사진이 글보다 커 보인다는 지적 — 사진 기둥을 좁히고 본문 글자를 키웠습니다 */
.owner-pic{ max-width:420px; }
.owner [data-cms="owner-body"] p, .owner .script p{ font-size:clamp(16.5px,1.35vw,18px); line-height:1.95; }
/* 자격·이력 별도 칸 — 사진·글 기둥 아래에 두 칸으로.
   글 기둥 안에 넣었더니 사진 옆 여백이 커진다는 지적으로 분리했다. */
.cred-band{ display:grid; grid-template-columns:1.2fr .8fr; gap:22px; margin-top:38px; }
.cred{
  padding:24px 26px 22px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
}
.cred h3{ font-size:17px; color:var(--brand-dk); margin-bottom:12px; }
.cred h3 b{ color:var(--ink); }
.cred .facts{ margin:0; }
.cred p{ font-size:15.5px; color:var(--body); line-height:1.75; margin-bottom:10px; }
.cred a{ font-size:14px; font-weight:700; color:var(--brand-dk); text-decoration:none; }
.cred a:hover{ text-decoration:underline; }
@media(max-width:820px){ .cred-band{ grid-template-columns:1fr; gap:14px; margin-top:26px; } }
.owner-pic{ position:relative; }
.owner-pic img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 22%;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
}
.owner-pic .cap{
  position:absolute; left:20px; bottom:20px; right:20px;
  padding:12px 16px; border-radius:11px;
  background:rgba(32,43,32,.82); color:#fff; font-size:13.5px; line-height:1.5;
  backdrop-filter:blur(4px);
}
.owner h2{ font-size:clamp(25px,3.3vw,36px); margin-bottom:8px; }
.owner .role{ color:var(--brand-dk); font-weight:700; font-size:16.5px; margin-bottom:22px; }
.owner blockquote{
  margin:0 0 24px; padding:0 0 0 18px; border-left:3px solid var(--brand-lt);
  font-family:'Noto Serif KR',serif; font-size:clamp(19px,2.4vw,24px);
  color:var(--ink); line-height:1.6; font-weight:600;
}
.owner .facts{ list-style:none; margin:26px 0; padding:0; }
.owner .facts li{
  position:relative; padding-left:20px; margin-bottom:9px; font-size:15.5px; color:var(--body);
}
.owner .facts li::before{
  content:''; position:absolute; left:0; top:.72em; width:7px; height:7px;
  border-radius:50%; background:var(--brand-lt);
}
.owner .certs{
  padding:15px 18px; background:rgba(255,255,255,.66); border-radius:12px;
  font-size:14.5px; color:var(--muted); margin-bottom:26px;
}
@media(max-width:900px){
  .owner-in{ grid-template-columns:1fr; gap:30px; }
  .owner-pic{ max-width:none; }
  .owner-pic img{ aspect-ratio:3/4; }
}

/* ── 카드 ───────────────────────────────────────────── */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cards.two{ grid-template-columns:repeat(2,1fr); }
@media(max-width:980px){ .cards{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media(max-width:640px){ .cards,.cards.two{ grid-template-columns:1fr; } }

.card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  text-decoration:none; color:inherit; box-shadow:var(--shadow-sm);
  transition:transform .18s, box-shadow .18s;
}
a.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.card-pic{ aspect-ratio:4/3; overflow:hidden; background:var(--bg2); }
.card-pic img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
a.card:hover .card-pic img{ transform:scale(1.04); }
.card-bd{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.card-bd h3{ font-size:20px; margin-bottom:10px; }
.card-bd p{ font-size:15.5px; color:var(--muted); line-height:1.75; }
/* 축 카드 안의 프로그램 이름 목록 */
.mini-list{ list-style:none; margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--line-soft); }
.mini-list li{
  position:relative; padding-left:14px; margin-bottom:6px;
  font-size:14.5px; color:var(--body); line-height:1.6;
}
.mini-list li::before{
  content:''; position:absolute; left:0; top:.7em;
  width:5px; height:5px; border-radius:50%; background:var(--brand-lt);
}

.card-more{ margin-top:auto; padding-top:18px; font-size:14.5px; font-weight:700; color:var(--brand-dk); }
.card-more::after{ content:' →'; }
.axis-tag{
  display:inline-block; margin-bottom:12px; padding:4px 11px; border-radius:99px;
  font-size:12.5px; font-weight:700; letter-spacing:-.01em;
}
.ax-scent .axis-tag{ background:var(--ax-scent-pale); color:var(--ax-scent-ink); }
.ax-color .axis-tag{ background:var(--ax-color-pale); color:var(--ax-color-ink); }
.ax-eco   .axis-tag{ background:var(--ax-eco-pale);   color:var(--ax-eco-ink); }

/* ── 약속 / 단계 ────────────────────────────────────── */
.promises{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media(max-width:760px){ .promises{ grid-template-columns:1fr; } }
.promise{
  padding:32px 32px 34px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
}
.promise .no{
  display:block; font-family:'Noto Serif KR',serif; font-size:15px; font-weight:700;
  color:var(--brand); margin-bottom:10px; letter-spacing:.04em;
}
.promise h3{ font-size:21px; margin-bottom:12px; }
.promise p{ font-size:15.8px; color:var(--muted); }
.promise.key{
  background:var(--brand-dk); border-color:var(--brand-dk); color:var(--on-dark);
  box-shadow:0 10px 34px rgba(53,69,47,.24);
}
.promise.key .no{ color:rgba(244,242,234,.86); }
.promise.key h3{ color:#fff; font-size:23px; }
.promise.key p{ color:rgba(244,242,234,.92); }
@media(max-width:700px){ .promise{ padding:24px 22px 26px; } .promise h3{ font-size:19px; } }

.steps{ counter-reset:st; display:grid; gap:14px; }
.step{
  display:grid; grid-template-columns:52px 1fr; gap:20px; align-items:start;
  padding:24px 26px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
}
.step::before{
  counter-increment:st; content:counter(st,decimal-leading-zero);
  font-family:'Noto Serif KR',serif; font-size:19px; font-weight:700; color:var(--brand-lt);
  line-height:1.5;
}
.step h3{ font-size:18px; margin-bottom:6px; }
.step p{ font-size:15.5px; color:var(--muted); }
@media(max-width:600px){ .step{ grid-template-columns:38px 1fr; gap:12px; padding:20px 18px; } }

/* ── 표 ─────────────────────────────────────────────── */
/* 표는 자기 상자 안에서만 가로로 스크롤되어야 한다.
   grid 칸 안에 들어가면 칸이 기본으로 min-width:auto 라서, 표의 min-width(520px)가
   칸을 밀어 올려 상자가 스크롤 역할을 잃고 페이지 전체가 옆으로 늘어난다.
   (폰에서 접이식을 펼치면 가로 스크롤 198px 생기던 원인) */
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 8px; min-width:0; max-width:100%; }
table{
  width:100%; min-width:520px; border-collapse:collapse; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  font-size:15.5px;
}
table.narrow{ min-width:0; }
th,td{ padding:15px 18px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top; }
thead th{
  background:var(--bg3); color:var(--ink); font-weight:700; font-size:14.5px;
  white-space:nowrap; border-bottom:1px solid var(--line);
}
tbody tr:last-child td,tbody tr:last-child th{ border-bottom:0; }
tbody th{ font-weight:700; color:var(--ink); white-space:nowrap; }
td strong{ color:var(--ink); }
.tbl-note{ font-size:13.5px; color:var(--muted); margin-top:10px; }
/* 안내문 속 링크는 밑줄 없이 색과 굵기로만 구분한다 */
.tbl-note a{ color:var(--brand-dk); font-weight:700; text-decoration:none; }
.tbl-note a:hover{ color:var(--ink); }
@media(max-width:700px){
  th,td{ padding:12px 13px; font-size:14.5px; }
  /* 폰에서는 표가 옆으로 밀린다는 걸 알 수 있게 스크롤 막대를 보이게 둔다 */
  .tbl-scroll{ padding-bottom:8px; scrollbar-width:thin; scrollbar-color:var(--brand-lt) var(--line-soft); }
  .tbl-scroll::-webkit-scrollbar{ height:6px; }
  .tbl-scroll::-webkit-scrollbar-track{ background:var(--line-soft); border-radius:99px; }
  .tbl-scroll::-webkit-scrollbar-thumb{ background:var(--brand-lt); border-radius:99px; }
}

/* 두 칸 비교표 — 「구분이 잘 안 보인다」는 의견으로 대비를 키웠다.
   율이공방 칸은 머리부터 짙은 초록, 왼쪽에 굵은 경계선. 일반 칸은 일부러 옅게. */
.vs th:nth-child(2){ color:var(--muted); font-weight:500; }
.vs th:nth-child(3){ background:var(--brand-dk); color:#fff; border-radius:8px 8px 0 0; }
.vs td:nth-child(2){ color:var(--muted); }
.vs td:nth-child(3){
  background:var(--brand-pale); color:var(--ink); font-weight:700;
  /* 세로 굵은선은 넣어 봤다가 뺐다 — ✓ 표시와 바탕색만으로 충분히 구분된다 */
}
.vs td:nth-child(3)::before{ content:'✓  '; color:var(--brand-dk); font-weight:700; }

/* ── 갤러리 ─────────────────────────────────────────── */
.gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:900px){ .gal{ grid-template-columns:repeat(2,1fr); gap:10px; } }
.gal figure{ margin:0; border-radius:var(--radius); overflow:hidden; background:var(--bg2); }
.gal img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .4s; }
.gal figure:hover img{ transform:scale(1.045); }
.gal figcaption{ padding:11px 13px; font-size:13.5px; color:var(--muted); background:var(--paper); }

/* 대상별 탭 */
.tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.tabs button{
  /* 폰에서 손가락으로 누르는 자리는 44px 이상이어야 한다 (지금 43px 이라 1px 모자랐다) */
  min-height:44px;
  padding:10px 20px; border-radius:99px; border:1.5px solid var(--line);
  background:var(--paper); color:var(--body); font-family:inherit; font-size:15px;
  font-weight:600; cursor:pointer; transition:.15s;
}
.tabs button:hover{ border-color:var(--brand-lt); }
.tabs button[aria-selected="true"]{ background:var(--brand-dk); border-color:var(--brand-dk); color:#fff; }
.tab-panel[hidden]{ display:none; }

/* ── FAQ ────────────────────────────────────────────── */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); background:transparent; }
.faq summary{
  display:flex; align-items:flex-start; gap:14px; padding:22px 46px 22px 0;
  cursor:pointer; list-style:none; position:relative;
  font-family:'Noto Serif KR',serif; font-size:17.5px; font-weight:600; color:var(--ink);
  line-height:1.55;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:'Q'; color:var(--brand-lt); font-weight:700; flex:none; }
.faq summary::after{
  content:''; position:absolute; right:8px; top:32px;
  width:10px; height:10px; border-right:1.8px solid var(--brand); border-bottom:1.8px solid var(--brand);
  transform:rotate(45deg); transition:transform .2s;
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:36px; }
.faq .ans{ padding:0 10px 26px 30px; font-size:16px; color:var(--body); }
.faq .ans strong{ color:var(--brand-dk); }
@media(max-width:600px){
  .faq summary{ font-size:16.5px; padding:19px 38px 19px 0; }
  .faq .ans{ padding-left:22px; font-size:15.5px; }
}

/* ── 강조 박스 ──────────────────────────────────────── */
.note{
  padding:24px 26px; border-radius:var(--radius);
  background:var(--bg3); border:1px solid var(--brand-pale); font-size:15.8px;
}
.note b{ color:var(--brand-dk); }
.note.warm{ background:var(--ax-scent-pale); border-color:#E7D3BF; }
.note.plain{ background:var(--paper); border-color:var(--line); }

/* 두 칸 준비 목록 */
.prep{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media(max-width:700px){ .prep{ grid-template-columns:1fr; } }
.prep > div{ padding:28px 28px 30px; border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--paper); }
.prep > div.mine{ background:var(--brand-dk); border-color:var(--brand-dk); }
.prep h3{ font-size:18.5px; margin-bottom:16px; }
.prep .mine h3{ color:#fff; }
.prep ul{ margin:0; padding:0; list-style:none; }
.prep li{ position:relative; padding-left:22px; margin-bottom:9px; font-size:15.5px; }
.prep li::before{ content:'·'; position:absolute; left:6px; font-weight:700; }
.prep .mine li{ color:rgba(244,242,234,.94); }

/* ── 문의 폼 ────────────────────────────────────────── */
.form{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px 20px; }
.form .full{ grid-column:1/-1; }
@media(max-width:700px){ .form{ grid-template-columns:1fr; } }
.field label{ display:block; font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:7px; }
.field label .req{ color:#A4442E; margin-left:3px; }
.field label .opt{ color:var(--muted); font-weight:500; margin-left:5px; font-size:13px; }
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:11px;
  background:var(--paper); color:var(--ink);
  font-family:inherit; font-size:16px; line-height:1.6;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brand-lt); box-shadow:0 0 0 3px var(--brand-pale);
}
.form-out{
  white-space:pre-wrap; padding:20px 22px; border-radius:var(--radius);
  background:var(--bg2); border:1px solid var(--line);
  font-size:15px; line-height:1.85; color:var(--ink);
}

/* ── 마무리 CTA ─────────────────────────────────────── */
.cta{ background:var(--brand-dk); color:var(--on-dark); }
.cta h2{ color:#fff; font-size:clamp(23px,3vw,32px); }
.cta p{ color:rgba(244,242,234,.9); font-size:17px; max-width:44em; }
.cta .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.45); }
.cta .btn-ghost:hover{ background:rgba(255,255,255,.12); }
.cta .btn-primary{ background:#fff; color:var(--brand-dk); box-shadow:0 6px 20px rgba(0,0,0,.18); }

/* ── 페이지 머리 ────────────────────────────────────── */
.phead{ padding:calc(var(--head-h) + 62px) 0 54px; background:var(--bg2); border-bottom:1px solid var(--line); }
.phead h1{ font-size:clamp(27px,3.8vw,42px); margin-bottom:14px; }
.phead p{ font-size:17.5px; color:var(--muted); max-width:44em; }
@media(max-width:700px){ .phead{ padding:calc(var(--head-h) + 36px) 0 36px; } }

/* 세부 페이지에서 돌아가는 길 — 역할을 둘로 나눴다.
   ① [← 뒤로] 단추: 바로 앞 화면으로 (브라우저 뒤로가기와 같음)
   ② 홈 › 커리큘럼 › 조향: 지금 위치 표시 + 각 단계로 이동하는 링크
   「← 홈」 하나로 합쳐 놨더니 단추인지 위치 표시인지 헷갈린다는 의견으로 분리했다. */
.crumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:4px 2px;
  font-size:14px; color:var(--muted); margin-bottom:16px;
}
/* 오른쪽 끝, 위 메뉴의 「출강 문의」 단추 바로 아랫선.
   flex 자동 여백으로 밀었더니 화면에 따라 가운데쯤 서는 일이 있어
   자리를 좌표로 못박았다. */
.phead .wrap{ position:relative; }
.crumb{ padding-right:96px; }           /* 단추 자리 — 위치 표시 글자와 겹치지 않게 */
.crumb .back{
  position:absolute; right:24px; top:-2px;
  display:inline-flex; align-items:center; gap:6px;
  min-height:34px; padding:5px 14px 5px 11px;
  border:1.5px solid var(--brand-lt); border-radius:99px;
  background:var(--paper); color:var(--brand-dk);
  font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
}
.crumb .back::before{ content:'←'; font-weight:400; }
.crumb .back:hover{ background:var(--brand-pale); }
.crumb a{
  display:inline-flex; align-items:center;
  min-height:34px; padding:4px 6px;
  color:var(--brand-dk); font-weight:600; text-decoration:underline;
  text-decoration-color:var(--brand-lt); text-decoration-thickness:1.5px;
  text-underline-offset:3px; border-radius:6px;
}
.crumb a:hover{ background:var(--brand-pale); text-decoration-color:var(--brand-dk); }

/* ── 푸터 ───────────────────────────────────────────── */
.ft{ background:#1B241B; color:rgba(244,242,234,.72); padding:38px 0 calc(26px + var(--bar-h)); font-size:14.5px; }
@media(min-width:701px){ .ft{ padding-bottom:34px; } }
.ft-in{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:36px; }
@media(max-width:820px){ .ft-in{ grid-template-columns:1fr 1fr; gap:28px; } .ft-brand{ grid-column:1/-1; } }
@media(max-width:520px){ .ft-in{ grid-template-columns:1fr; } }
.ft h3{ color:#fff; font-size:15px; margin-bottom:14px; font-family:inherit; font-weight:700; }
.ft a{ color:rgba(244,242,234,.78); text-decoration:none; }
.ft a:hover{ color:#fff; text-decoration:underline; }
.ft ul{ list-style:none; margin:0; padding:0; }
.ft li{ margin-bottom:8px; }
.ft-brand .name{ font-family:'Noto Serif KR',serif; font-size:20px; color:#fff; font-weight:700; margin-bottom:10px; }
.ft-brand p{ line-height:1.9; }
/* 간단 푸터 — 상호 · 연락처 한 줄만 */
.ft-slim{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px; }
.ft-slim .name{ font-family:'Noto Serif KR',serif; font-size:19px; color:#fff; font-weight:700; margin:0; }
.ft-slim .line{ margin:0; line-height:1.9; }
@media(max-width:520px){ .ft-slim{ flex-direction:column; gap:6px; } .ft-slim .line{ font-size:14px; } }
.ft-note{ margin-top:24px; padding-top:22px; border-top:1px solid rgba(244,242,234,.14); font-size:13px; color:rgba(244,242,234,.68); }
.admin-link{ color:rgba(244,242,234,.68); text-decoration:underline; }
.admin-link:hover{ color:#fff; }

/* 예시 표시 — 실제 후기로 바꾸면 이 표시만 지우세요 */
.rv-ex{ display:inline-block; margin-right:8px; padding:2px 8px; border-radius:999px;
  background:var(--brand-pale); color:var(--brand-dk); font-size:12.5px; font-weight:700;
  vertical-align:2px; }

/* 수업 후기 카드 */
.review{ padding:26px 28px 24px; background:var(--paper); border:1px solid var(--line);
  border-left:3px solid var(--brand-lt); border-radius:0 var(--radius) var(--radius) 0; }
.review p{ font-size:16.5px; color:var(--ink); line-height:1.8; }
.review .who{ margin-top:14px; font-size:14.5px; color:var(--muted); }
.review .who::before{ content:'— '; }
.ft .todo{ color:#D9C48A; }

/* ── 모바일 하단 고정바 ─────────────────────────────── */
.bar{ display:none; }
@media(max-width:700px){
  .bar{
    display:grid; grid-template-columns:1fr 1fr; position:fixed; inset:auto 0 0 0; z-index:95;
    height:var(--bar-h); border-top:1px solid rgba(0,0,0,.08);
    box-shadow:0 -4px 18px rgba(32,43,32,.1);
  }
  .bar a{
    display:flex; align-items:center; justify-content:center; gap:7px;
    font-size:15.5px; font-weight:700; text-decoration:none;
  }
  .bar .tel{ background:var(--brand-dk); color:#fff; }
  .bar .kko{ background:#FAE100; color:#2B1D0E; }
  body{ padding-bottom:0; }
}

/* 인쇄 */
@media print{
  .hd,.bar,.cta,.btn-row{ display:none !important; }
  body{ background:#fff; }
}

/* ── 관리자 편집 모드 ──────────────────────────────
   고칠 수 있는 곳이 700곳 가까이 된다. 전부 점선을 두르면 글을 읽을 수가
   없으므로, 평소에는 아주 옅게만 두고 마우스를 올린 곳만 뚜렷하게 한다. */
.cms-on [data-cms]{
  outline:1px dashed rgba(78,97,70,.28); outline-offset:3px; border-radius:3px;
  transition:outline-color .15s, background-color .15s;
}
.cms-on [data-cms]:hover{ outline:2px dashed var(--brand-lt); background:rgba(220,228,213,.4); }
.cms-on [data-cms]:focus{
  outline:2px solid var(--brand); background:#fff;
  box-shadow:0 2px 14px rgba(32,43,32,.14);
}
.cms-on [data-cms].cms-hit{ outline-color:#C9A96A; background:rgba(201,169,106,.09); }
.cms-on [data-cms].cms-just{ background:rgba(143,163,131,.34); }
.cms-on{ padding-bottom:70px; }

.cms-bar{
  position:fixed; inset:auto 0 0 0; z-index:200;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:11px 18px; background:#2A3724; color:#F2F0E8;
  font-size:14px; line-height:1.5; box-shadow:0 -4px 20px rgba(0,0,0,.25);
}
.cms-bar b{ color:#fff; }
.cms-bar .cms-n{ margin-left:auto; color:#D6C89B; font-weight:700; }
.cms-bar button{
  padding:8px 15px; border-radius:99px; cursor:pointer; font-family:inherit;
  font-size:13.5px; font-weight:700;
  border:1.5px solid rgba(242,240,232,.5); background:transparent; color:#F2F0E8;
}
.cms-bar button.on{ background:#F2F0E8; border-color:#F2F0E8; color:#2A3724; }
@media(max-width:640px){
  .cms-bar{ font-size:13px; gap:9px; padding:10px 12px; }
  .cms-bar .cms-n{ margin-left:0; flex-basis:100%; order:3; }
}

/* 접었다 펴는 이력 상자 */
.more-box{ margin-top:22px; border-top:1px solid var(--line); padding-top:18px; }
.more-box > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border:1px solid var(--brand-dk); border-radius:999px;
  color:var(--brand-dk); font-weight:700; font-size:15.5px; background:transparent;
}
.more-box > summary::-webkit-details-marker{ display:none; }
.more-box > summary::after{ content:'▾'; font-size:13px; }
.more-box[open] > summary::after{ content:'▴'; }
.more-box > summary:hover{ background:var(--brand-pale); }

/* 차별점 표 — 율이공방 칸만 강조 */
.vs-solo th:nth-child(2){ background:var(--brand-dk); color:#fff; border-radius:8px 8px 0 0; }
.vs-solo td:nth-child(2){ background:var(--brand-pale); color:var(--ink); font-weight:600; }
.vs-solo td:nth-child(2)::before{ content:'✓  '; color:var(--brand-dk); font-weight:700; }
.vs-solo tr:last-child td:nth-child(2){ border-radius:0 0 8px 8px; }

/* 클릭해서 펼치는 칸 (프로그램 안내 아래) */
.acc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; align-items:start; }
/* grid 칸은 기본이 min-width:auto 라 안쪽 내용(표)이 칸을 벌린다. 0 으로 눌러 준다 */
.acc-grid > *{ min-width:0; }
@media(max-width:900px){ .acc-grid{ grid-template-columns:1fr; } }
.acc{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.acc > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:20px 22px; font-weight:700; font-size:16.5px; color:var(--ink);
}
.acc > summary::-webkit-details-marker{ display:none; }
.acc > summary::after{ content:'＋'; color:var(--brand-dk); font-size:17px; }
.acc[open] > summary::after{ content:'－'; }
.acc[open] > summary{ border-bottom:1px solid var(--line-soft); }
.acc > summary:hover{ background:var(--brand-pale); border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.acc-in{ padding:20px 22px 24px; }
.acc-in > *:last-child{ margin-bottom:0; }
.acc[open]{ grid-column:1/-1; }

/* 한 칸 전체를 쓰는 펼침 상자 (보유 자격 · 출강 기관) */
.acc-wide > summary{ font-size:20px; font-family:'Noto Serif KR',serif; padding:24px 26px; }
.acc-wide .acc-in{ padding:24px 26px 28px; }

/* 이벤트 배너 — 관리자 페이지에서 켜고 끕니다 */
.evt-bar{ position:fixed; top:0; left:0; right:0; z-index:95; background:var(--brand-dk); color:#fff;
  padding:11px 46px 11px 20px; text-align:center; font-size:15px; line-height:1.55; }
.evt-bar a{ color:#fff; text-decoration:underline; text-underline-offset:3px; font-weight:700; }
.evt-bar .evt-x{ position:absolute; right:10px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; color:rgba(255,255,255,.8); font-size:20px; line-height:1;
  cursor:pointer; padding:6px 10px; }
.evt-bar .evt-x:hover{ color:#fff; }
body.has-evt{ padding-top:var(--evt-h,0px); }
body.has-evt .hd{ top:var(--evt-h,0px); }
@media(max-width:700px){ .evt-bar{ font-size:14px; padding:10px 42px 10px 14px; } }

/* 접힌 칸만 있는 구역 — 위아래 여백을 줄인다 */
.acc-sec{ padding:24px 0; }
.acc-sec .acc + .acc{ margin-top:12px; }
@media(max-width:700px){ .acc-sec{ padding:18px 0; } }

/* 후기 — 한 줄에 셋 */
.rv-grid{ grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; }
@media(max-width:980px){ .rv-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .rv-grid{ grid-template-columns:1fr; } }

/* ── 폰 다듬기 ─────────────────────────────────────── */
@media(max-width:700px){
  .wrap{ padding-left:18px; padding-right:18px; }
  .owner-in{ gap:22px; }
  .owner-pic img{ aspect-ratio:1/1; }
  .cred-band{ margin-top:20px; }
  .cred{ padding:18px 18px 16px; }
  .acc > summary{ padding:16px 18px; font-size:15.5px; }
  .acc-wide > summary{ padding:18px 18px; font-size:17px; }
  .acc-in{ padding:16px 18px 20px; }
  .promise{ padding:20px 18px 22px; }
  .promises{ gap:12px; }
  .gal{ gap:12px; }
  .gal figcaption{ font-size:14px; padding:11px 13px 13px; }
  .review{ padding:20px 20px 18px; }
  .review p{ font-size:15.5px; }
  .tbl-scroll table{ font-size:14.5px; }
  .btn{ padding:13px 20px; font-size:15px; }
  .btn-row{ gap:9px; }
  .ft{ padding:26px 0 calc(20px + var(--bar-h)); }
  .ft-note{ margin-top:18px; padding-top:16px; font-size:12.5px; }
  .mini-list li{ font-size:15px; }
  h1{ line-height:1.25; }
  .cards, .cards.two, .rv-grid, .acc-grid{ gap:12px; }
}
@media(max-width:400px){
  .wrap{ padding-left:15px; padding-right:15px; }
  .acc > summary{ font-size:15px; }
}
/* ── 폰에서 첫 화면 글자를 아래로 내리기 ──────────────────
   글자 덩어리가 366px 이나 되어 영상이 보이는 구간이 218px 뿐이었다.
   ("사람 얼굴·제품이 글자에 가린다"는 지적)
   글자는 이미 바닥에 붙어 있으므로, 덩어리 자체를 줄여야 시작점이 내려간다.
   딱지 2줄→1줄, 설명 3줄→2줄, 여백·버튼 높이를 조금씩 줄였다. */
@media(max-width:700px){
  .hero-panel .pc-only{ display:none; }
  .hero-wrap{ padding-bottom:18px; }
  .hero-panel .tag{ margin-bottom:10px; }
  .hero-panel h1{ margin-bottom:10px; }
  .hero-panel .sub{ margin-bottom:15px; }
  .hero-panel .btn-row .btn{ padding-top:13px; padding-bottom:13px; }
}

/* ── 화면이 낮을 때 (카톡·인스타 안에서 열었을 때) ──────────
   카톡 안 브라우저는 위아래 막대 때문에 쓸 수 있는 높이가 560px 안팎이다.
   첫 화면은 화면 높이를 따라 줄어드는데 글자 덩어리는 그대로라,
   영상이 보이는 구간이 36px 까지 줄어든다("영상이 안 보인다"는 지적).
   그래서 ① 첫 화면에 최소 높이를 두고 ② 글자를 한 번 더 줄인다. */
@media (max-width:700px) and (max-height:720px){
  .hero{ min-height:470px; }
  @supports (height:100svh){ .hero{ min-height:max(470px, calc(100svh - 126px)); } }
  .hero-wrap{ padding-top:14px; padding-bottom:14px; }
  .hero-panel .tag{ margin-bottom:8px; font-size:11.5px; padding:5px 11px; }
  .hero-panel h1{ font-size:clamp(21px,5.6vw,26px); margin-bottom:8px; }
  .hero-panel .sub{ font-size:14px; margin-bottom:12px; }
  .hero-panel .btn-row{ gap:7px; }
  .hero-panel .btn-row .btn{ padding-top:11px; padding-bottom:11px; font-size:14.5px; }
  /* 첫 화면이 낮아지면 둘째 줄 버튼이 영상의 밝은 부분에 걸려 흰 글자가 묻힌다.
     딱지와 같은 방식으로 버튼에만 옅은 유리막을 깔아 둔다 (영상은 그대로 밝게 둔 채). */
  .hero-panel .btn-ghost{ background:rgba(13,20,12,.34); backdrop-filter:blur(4px); }
}
/* 아주 낮은 화면에서는 설명글까지 접는다 — 제목과 버튼만 남긴다 */
@media (max-width:700px) and (max-height:600px){
  .hero-panel .sub{ display:none; }
}

/* 폰에서 첫 화면 버튼 — 세 개가 세로로 길게 쌓이지 않게 */
@media(max-width:700px){
  .hero-panel .btn-row{ display:flex; flex-wrap:wrap; gap:8px; }
  .hero-panel .btn-row .btn{ flex:1 1 46%; min-width:0; text-align:center; }
  .hero-panel .btn-row .btn:first-child{ flex-basis:100%; }
  .cta .btn-row{ display:flex; flex-wrap:wrap; gap:8px; }
  .cta .btn-row .btn{ flex:1 1 46%; text-align:center; }
  .hero-panel .tag{ font-size:12.5px; line-height:1.5; }
}