/* =========================================================
   엄주아 글쓰기 코치 — 스타일 앵커: "만년필"
   종이(#FCFBF8) · 잉크 네이비(#15243A) · 형광 하이라이터(#F2E15C)
   Display: Gowun Batang / Body: IBM Plex Sans KR / Util: IBM Plex Mono
   ========================================================= */

:root{
  --paper:      #FCFBF8;
  --paper-2:    #F2EFE8;
  --paper-3:    #E9E4D9;
  --ink:        #15243A;
  --ink-2:      #56657A;
  --ink-3:      #8C97A6;
  --rule:       #DED8CD;
  --rule-soft:  #EBE6DC;
  --mark:       #F2E15C;
  --mark-deep:  #D9C43A;
  --deep:       #101E31;
  --deep-2:     #1B2E47;

  --serif: 'Gowun Batang', 'Nanum Myeongjo', serif;
  --sans:  'IBM Plex Sans KR', system-ui, -apple-system, 'Malgun Gothic', sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 64px);
  --sec-y: clamp(58px, 7.6vw, 108px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.75;
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}

img,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
h1,h2,h3,p,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--mark); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:12px 20px; font-size:14px;
}
.skip:focus{ left:12px; top:12px; }

.wrap{
  width:100%; max-width:var(--wrap);
  margin-inline:auto; padding-inline:var(--gut);
}

/* ── 공통 타이포 ───────────────────────────── */

.eyebrow{
  font-family:var(--mono);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:clamp(24px,4vw,40px);
}

.h2{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(25px,3.3vw,40px);
  line-height:1.34;
  letter-spacing:-.015em;
  margin-bottom:clamp(15px,2.1vw,24px);
}
.h2--light{ color:var(--paper); }

.lead{ font-size:clamp(16px,1.15vw,18px); color:var(--ink-2); }

.sec__intro{
  font-size:clamp(14.5px,1vw,16.5px);
  color:var(--ink-2);
  max-width:46ch;
  margin-bottom:clamp(26px,3.6vw,44px);
}
.sec__intro--light{ color:#9FB0C4; }

/* 깜빡이는 커서 — 시그니처 */
.caret{
  display:inline-block;
  width:.5em; height:1.02em;
  background:var(--ink);
  margin-left:.12em;
  vertical-align:-.14em;
  animation:blink 1.15s steps(1,end) infinite;
}
.caret--sm{ width:.36em; height:.86em; vertical-align:-.06em; }
.caret--light{ background:var(--mark); }
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

mark{
  background:linear-gradient(to top, var(--mark) 0 .48em, transparent .48em);
  color:inherit; padding:0 .06em;
}

/* ── 헤더 ───────────────────────────── */

.site-head{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.site-head::before{
  content:''; position:absolute; inset:0;
  background:rgba(252,251,248,.88);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; transition:opacity .35s var(--ease);
  pointer-events:none;
}
.site-head.is-stuck::before{ opacity:1; }
.site-head.is-stuck{ box-shadow:0 1px 0 var(--rule-soft); }

.site-head__inner{
  position:relative;
  max-width:var(--wrap); margin-inline:auto;
  padding:18px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.brand{ text-decoration:none; display:flex; align-items:baseline; gap:9px; }
.brand__name{ font-family:var(--serif); font-weight:700; font-size:20px; letter-spacing:-.01em; }
.brand__role{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-3); }

.nav{ display:flex; align-items:center; gap:clamp(16px,2.2vw,30px); }
.nav a{
  text-decoration:none; font-size:14.5px; font-weight:500; color:var(--ink-2);
  position:relative; padding:4px 0; transition:color .2s;
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:1px; height:6px;
  background:var(--mark); z-index:-1; transition:right .3s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ right:0; }

.nav__cta{
  color:var(--ink) !important; font-weight:600;
  border:1px solid var(--ink); border-radius:999px; padding:7px 17px !important;
}
.nav__cta::after{ display:none; }
.nav__cta:hover{ background:var(--ink); color:var(--paper) !important; }

.burger{
  display:none; width:40px; height:40px; border:0; background:none; cursor:pointer;
  padding:0; position:relative;
}
.burger span{
  position:absolute; left:9px; width:22px; height:1.5px; background:var(--ink);
  transition:transform .3s var(--ease), opacity .2s;
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:23px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:99;
  background:var(--paper);
  display:flex; align-items:center; justify-content:center;
}
.mobile-nav[hidden]{ display:none; }
.mobile-nav nav{ display:flex; flex-direction:column; gap:6px; text-align:center; }
.mobile-nav a{
  font-family:var(--serif); font-weight:700; font-size:26px;
  text-decoration:none; padding:10px 32px;
}

/* ── HERO : 빈 종이 ───────────────────────────── */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-block:clamp(92px,15vh,170px) clamp(52px,9vh,110px);
  overflow:hidden;
}

/* 노트 괘선 — 아주 옅게 */
.hero__rules{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    to bottom, transparent 0 47px, var(--rule-soft) 47px 48px);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 78%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 78%);
  opacity:.85; pointer-events:none;
}

.hero__wrap{ position:relative; }

.hero__q{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(32px,min(6.4vw,8.6vh),72px);
  line-height:1.24;
  letter-spacing:-.025em;
  margin-bottom:clamp(30px,4.4vw,50px);
  min-height:2.48em;
}
.hero__q-line{ display:block; }
.hero__q-line > span{ display:inline; }
.hero__q .caret{ vertical-align:-.08em; }

/* 방문자가 직접 쓰는 한 줄 — 시그니처 */
.prompt{ max-width:640px; margin-bottom:clamp(32px,5vw,48px); }

.prompt__label{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.04em;
  color:var(--ink-3); margin-bottom:10px; cursor:text;
}
.prompt__mark{
  display:grid; place-items:center;
  width:20px; height:20px; flex:0 0 20px;
  background:var(--mark); color:var(--ink);
  font-family:var(--sans); font-size:11px; font-weight:600;
  border-radius:2px;
}

.prompt__input{
  width:100%; border:0; border-bottom:1.5px solid var(--ink);
  background:transparent; padding:10px 2px 14px;
  font-family:var(--serif); font-size:clamp(17px,2.1vw,25px); line-height:1.5;
  color:var(--ink); border-radius:0;
}
.prompt__input::placeholder{ color:var(--ink-3); opacity:.62; }
.prompt__input:focus{ outline:none; border-bottom-color:var(--mark-deep); }
.prompt__input:focus + .prompt__foot .prompt__count{ color:var(--ink-2); }

.prompt__foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:12px; min-height:34px; flex-wrap:wrap;
}
.prompt__count{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }

.prompt__go{
  border:0; background:var(--mark); color:var(--ink);
  font-family:var(--sans); font-weight:600; font-size:13.5px;
  padding:9px 18px; border-radius:999px; cursor:pointer;
  animation:pop .4s var(--ease) both;
}
.prompt__go:hover{ background:var(--mark-deep); }
@keyframes pop{ from{opacity:0; transform:translateY(6px) scale(.96)} to{opacity:1; transform:none} }

.hero__sub{
  max-width:44ch; color:var(--ink-2);
  font-size:clamp(15px,1.1vw,17px);
  margin-bottom:clamp(30px,4.5vw,40px);
}

.hero__acts{ display:flex; flex-wrap:wrap; gap:12px; }

.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:1px; height:52px; background:var(--rule); overflow:hidden;
}
.hero__scroll span{
  position:absolute; inset:0; background:var(--ink);
  animation:drop 2.1s var(--ease) infinite;
}
@keyframes drop{ 0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)} }

/* ── 버튼 ───────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:14.5px; font-weight:600;
  padding:13px 26px; border-radius:999px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid:hover{ background:var(--deep-2); }
.btn--ghost{ border-color:var(--rule); color:var(--ink-2); }
.btn--ghost:hover{ border-color:var(--ink); color:var(--ink); }
.btn--mark{ background:var(--mark); color:var(--ink); }
.btn--mark:hover{ background:var(--mark-deep); }
.btn--outline{ border-color:rgba(255,255,255,.28); color:var(--paper); }
.btn--outline:hover{ border-color:var(--mark); color:var(--mark); }

/* ── 영상 + 인용 ───────────────────────────── */

.reel{ background:var(--paper-2); padding-block:0 clamp(34px,4.6vw,60px); }

.reel__media{ position:relative; }
.reel__video{
  width:100%; aspect-ratio:16/6; object-fit:cover;
  background:var(--paper-3);
}

.reel__quote{
  max-width:var(--wrap); margin-inline:auto;
  padding:clamp(34px,4.6vw,56px) var(--gut) 0;
}
.reel__quote p{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(20px,2.8vw,33px);
  line-height:1.5; letter-spacing:-.02em;
  max-width:24em;
}
.reel__quote cite{
  display:block; margin-top:22px;
  font-family:var(--mono); font-style:normal;
  font-size:12px; letter-spacing:.1em; color:var(--ink-3);
}
.reel__quote cite::before{ content:'— '; }

/* ── 섹션 뼈대 ───────────────────────────── */

.sec{ padding-block:var(--sec-y); }
.sec--paper{ background:var(--paper-2); }
.sec--deep{ background:var(--deep); color:var(--paper); }

.grid{
  display:grid;
  grid-template-columns:minmax(0,180px) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);
  align-items:start;
}
.col-side{ position:sticky; top:96px; }

.side-label{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  color:var(--ink-3); padding-top:.55em;
  border-top:1px solid var(--rule);
}
.side-label--light{ color:#7E90A6; border-top-color:rgba(255,255,255,.16); }

/* ── ABOUT ───────────────────────────── */

.about{
  display:grid; grid-template-columns:minmax(0,280px) minmax(0,1fr);
  gap:clamp(28px,4vw,52px); align-items:start;
}
.about__photo img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center;
  border-radius:2px;
  filter:saturate(.94);
}
.about__name{
  font-family:var(--serif); font-weight:700; font-size:26px;
  margin-bottom:20px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.about__name span{
  font-family:var(--mono); font-weight:400; font-size:11.5px;
  letter-spacing:.06em; color:var(--ink-3);
}
.about__tag{
  font-family:var(--serif); font-size:clamp(16px,1.5vw,20px);
  margin:24px 0 32px; padding-left:18px;
  border-left:2px solid var(--mark);
}

.facts{ border-top:1px solid var(--rule); }
.facts > div{
  display:grid; grid-template-columns:76px minmax(0,1fr); gap:16px;
  padding:10px 0; border-bottom:1px solid var(--rule-soft);
}
.facts dt{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  color:var(--ink-3); padding-top:.35em;
}
.facts dd{ font-size:14.5px; color:var(--ink-2); }

/* ── PROGRAMS ───────────────────────────── */

.progs{ display:flex; flex-direction:column; gap:clamp(13px,1.8vw,21px); }

.prog{
  display:grid; grid-template-columns:minmax(0,36%) minmax(0,64%);
  gap:clamp(18px,2.4vw,32px); align-items:center;
  scroll-margin-top:100px;
  padding-bottom:clamp(13px,1.8vw,21px);
  border-bottom:1px solid var(--rule-soft);
}
.prog:last-child{ border-bottom:0; padding-bottom:0; }
/* 사진은 다섯 장 모두 왼쪽 — 지그재그 배치는 걷어냄 */

.prog__img{ overflow:hidden; border-radius:2px; }
.prog__img img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform .6s var(--ease);
}
.prog:hover .prog__img img{ transform:scale(1.035); }

/* 사진 없는 두 과정 — 타이포그래피 카드 */
.prog__glyph{
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  aspect-ratio:4/3; padding:clamp(20px,3vw,34px);
  background:var(--paper); border:1px solid var(--rule);
  border-radius:2px;
  font-family:var(--serif); font-size:clamp(18px,2.1vw,27px);
  line-height:1.45; letter-spacing:-.02em;
}
.sec--paper .prog__glyph{ background:var(--paper); }
.glyph-line--edit s{ color:var(--ink-3); text-decoration-thickness:1.5px; }
.glyph-line--edit{ position:relative; }
.glyph-line--book{
  background:linear-gradient(to top, var(--mark) 0 .46em, transparent .46em);
  align-self:flex-start;
}

.prog__n{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  color:var(--mark-deep); margin-bottom:10px;
}
.prog__txt h3{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(19px,2.1vw,27px); line-height:1.4;
  letter-spacing:-.015em; margin-bottom:12px;
}
.prog__txt p{ color:var(--ink-2); font-size:15px; max-width:40ch; }

.prog__link{
  display:inline-block; margin-top:18px;
  font-size:13.5px; font-weight:600; text-decoration:none;
  padding-bottom:3px; border-bottom:1.5px solid var(--mark);
  transition:border-color .2s;
}
.prog__link:hover{ border-bottom-color:var(--ink); }

/* ── PROCESS ───────────────────────────── */

.steps{ counter-reset:s; border-top:1px solid var(--rule); }
.step{
  display:grid; grid-template-columns:72px minmax(0,1fr);
  gap:clamp(14px,2.4vw,30px);
  padding:clamp(16px,2.3vw,24px) 0;
  border-bottom:1px solid var(--rule);
}
.step__n{
  font-family:var(--mono); font-size:13px; letter-spacing:.06em;
  color:var(--ink-3); padding-top:.5em;
}
.step h3{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(19px,2.2vw,28px); margin-bottom:8px; letter-spacing:-.015em;
}
.step p{ color:var(--ink-2); font-size:15px; max-width:48ch; }

/* ── WORKS ───────────────────────────── */

.works{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule);
}
.work{
  background:var(--paper); padding:clamp(22px,2.8vw,32px);
  transition:background .25s var(--ease);
}
.work:hover{ background:var(--paper-2); }
.work__kind{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:var(--ink-3); margin-bottom:14px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.badge{
  font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:0;
  background:var(--mark); color:var(--ink); padding:2px 8px; border-radius:999px;
}
.work h3{
  font-family:var(--serif); font-weight:700; font-size:19px;
  line-height:1.45; margin-bottom:10px; letter-spacing:-.01em;
}
.work p{ font-size:14px; color:var(--ink-2); }

/* ── VOICES ───────────────────────────── */



/* ── CONTACT ───────────────────────────── */

.form{ max-width:660px; }
.hp{ position:absolute; left:-9999px; opacity:0; }

.field{ margin-bottom:22px; }
.field label{
  display:block; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.08em; color:#8FA0B4; margin-bottom:8px;
}
.field input,
.field select,
.field textarea{
  width:100%; background:transparent; color:var(--paper);
  border:0; border-bottom:1px solid rgba(255,255,255,.2);
  padding:10px 2px; border-radius:0;
  font-family:var(--sans); font-size:15.5px; line-height:1.6;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input::placeholder,
.field textarea::placeholder{ color:#5D6E85; }
.field input:focus,
.field select:focus,
.field textarea:focus{ outline:none; border-bottom-color:var(--mark); }
.field select{
  appearance:none; cursor:pointer; padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23F2E15C' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 4px center;
}
.field select option{ background:var(--deep); color:var(--paper); }
.field.is-bad input,
.field.is-bad textarea{ border-bottom-color:#E0674F; }

.form__foot{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:34px;
}
.form__msg{
  margin-top:18px; font-size:14px; min-height:1.5em; color:var(--mark);
}
.form__msg.is-bad{ color:#F0937E; }

@media (min-width:720px){
  .form{ display:grid; grid-template-columns:1fr 1fr; gap:0 26px; }
  .field--full,.form__foot,.form__msg{ grid-column:1 / -1; }
}

/* ── 푸터 ───────────────────────────── */

.foot{
  background:var(--deep); color:#8FA0B4;
  border-top:1px solid rgba(255,255,255,.09);
  padding-block:clamp(36px,5vw,54px);
  font-size:13.5px;
}
.foot__inner{ display:flex; flex-wrap:wrap; gap:18px 40px; align-items:baseline; }
.foot__brand{
  font-family:var(--serif); font-weight:700; font-size:18px; color:var(--paper);
}
.foot__brand span{ font-family:var(--mono); font-size:11px; color:#7E90A6; margin-left:8px; }
.foot__contact{ display:flex; flex-wrap:wrap; gap:6px 22px; }
.foot__contact a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.2); }
.foot__contact a:hover{ color:var(--mark); border-bottom-color:var(--mark); }
.foot__contact strong{ color:var(--paper); font-weight:500; }
.foot__copy{ margin-left:auto; font-size:12px; color:#66788D; }

/* ── 스크롤 등장 ───────────────────────────── */

.js .reveal{ opacity:0; transform:translateY(18px); }
.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}

/* ── 반응형 ───────────────────────────── */

@media (max-width:900px){
  .nav{ display:none; }
  .burger{ display:block; }
  .grid{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .col-side{ position:static; }
  .side-label{ padding-bottom:0; }
  .about{ grid-template-columns:minmax(0,1fr); }
  .about__photo{ max-width:280px; }
  .prog,.prog:nth-child(even){ grid-template-columns:minmax(0,1fr); gap:20px; }
  .prog__img img,.prog__glyph{ aspect-ratio:4/3; }
  .reel__video{ aspect-ratio:16/10; }
  .foot__copy{ margin-left:0; width:100%; }
}

@media (max-width:560px){
  .hero{ min-height:auto; padding-block:130px 80px; }
  .hero__q{ min-height:0; }
  .step{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .step__n{ padding-top:0; }
  .facts > div{ grid-template-columns:minmax(0,1fr); gap:2px; }
  .btn{ width:100%; }
  .hero__acts,.form__foot{ flex-direction:column; }
}

/* ── 모션 최소화 ───────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal{ opacity:1; transform:none; }
  .caret{ opacity:1; }
}

/* ── 인쇄 ───────────────────────────── */

@media print{
  .site-head,.mobile-nav,.hero__scroll,.reel__video,.prompt,.btn{ display:none !important; }
  body{ background:#fff; }
  .sec--deep,.foot{ background:#fff; color:#000; }
}

/* ═══════════════════════════════════════════
   2차 개정 (2026-08-24)
   ═══════════════════════════════════════════ */

/* 치유 글쓰기 4단계 칩 */
.prog__steps{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-top:16px;
}
.prog__steps span{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--ink-2);
  border:1px solid var(--rule); border-radius:999px;
  padding:4px 11px; background:var(--paper);
}
.prog__steps span + span{ position:relative; }
.prog__steps span + span::before{
  content:'→'; position:absolute; left:-13px; top:50%; transform:translateY(-50%);
  color:var(--ink-3); font-size:10px; border:0;
}

/* 진행 형태 */
.modes{
  display:grid; grid-template-columns:minmax(0,36%) minmax(0,64%);
  gap:clamp(18px,2.4vw,32px); align-items:start;
  margin-top:clamp(30px,4vw,50px);
  padding-top:clamp(22px,2.8vw,34px);
  border-top:2px solid var(--ink);
}
.modes__img{ overflow:hidden; border-radius:2px; }
.modes__img img{
  width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 44%;
}

.modes__q{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(20px,2.4vw,30px); line-height:1.32; letter-spacing:-.015em;
  margin-bottom:clamp(16px,2.2vw,24px);
}

.modes__list{ border-top:1px solid var(--rule); }
.modes__list > div{
  display:grid; grid-template-columns:104px minmax(0,1fr);
  gap:4px 18px; align-items:start;
  padding:13px 0; border-bottom:1px solid var(--rule-soft);
}
.modes__list dt{
  font-family:var(--sans); font-weight:600; font-size:14px;
  padding-top:.15em; white-space:nowrap;
}
.modes__list dt::after{
  content:''; display:block; height:2px; margin-top:5px;
  background:var(--mark);
}
.modes__list dd{ font-size:14.5px; color:var(--ink-2); }
.modes__list dd b{
  display:block; font-weight:500; color:var(--ink);
  font-size:14.5px; margin-bottom:2px;
}
.modes__link{
  display:inline-block; margin-top:6px;
  font-size:13.5px; font-weight:600; color:var(--ink); text-decoration:none;
  border-bottom:2px solid var(--mark); padding-bottom:1px;
}
.modes__link:hover{ background:var(--mark); }

.modes__note{
  margin-top:clamp(14px,1.8vw,20px);
  font-family:var(--mono); font-size:12px; color:var(--ink-3);
}

@media (max-width:700px){
  .modes{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .modes__list > div{ grid-template-columns:minmax(0,1fr); gap:7px; }
  .modes__list dt::after{ width:52px; }
  .modes__img img{ aspect-ratio:16/9; }
}

/* 저서 — 보조 목록 */
.works-more{
  margin-top:18px; border:1px solid var(--rule); border-top:0;
}
.works-more li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
  padding:13px clamp(18px,2.4vw,28px);
  border-bottom:1px solid var(--rule-soft);
  font-size:14.5px;
}
.works-more li:last-child{ border-bottom:0; }
.works-more__k{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--ink-3); flex:0 0 82px;
}
.works-more em{ font-style:normal; font-size:12.5px; color:var(--ink-3); }
[data-placeholder]{ background:repeating-linear-gradient(-45deg,transparent 0 7px,rgba(242,225,92,.22) 7px 14px); }

/* 이런 분께 */
.fits{
  margin-bottom:clamp(34px,4.5vw,48px);
  border-top:1px solid rgba(255,255,255,.16);
}
.fits li{
  position:relative;
  padding:13px 0 13px 30px;
  border-bottom:1px solid rgba(255,255,255,.1);
  font-size:15.5px; color:#C3D0DE;
}
.fits li::before{
  content:''; position:absolute; left:2px; top:23px;
  width:12px; height:2px; background:var(--mark);
}

/* 개인정보 동의 */
.consent{
  display:flex; align-items:flex-start; gap:11px;
  font-family:var(--sans) !important; font-size:13.5px !important;
  letter-spacing:0 !important; color:#9FB0C4 !important;
  line-height:1.65; cursor:pointer; margin-bottom:0 !important;
}
.consent input{
  width:17px !important; height:17px; flex:0 0 17px; margin-top:4px;
  accent-color:var(--mark); cursor:pointer;
}
.field.is-bad .consent span{ color:#F0937E !important; }

/* 모바일 하단 고정 CTA */
.dock{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:90;
  display:none; align-items:center; justify-content:center;
  background:var(--ink); color:var(--paper);
  font-size:15px; font-weight:600; text-decoration:none;
  padding:15px; border-radius:999px;
  box-shadow:0 8px 28px rgba(21,36,58,.28);
  animation:dockIn .35s var(--ease) both;
}
.dock[hidden]{ display:none !important; }
@keyframes dockIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

@media (max-width:900px){
  .dock{ display:flex; }
  body{ padding-bottom:0; }
  .works-more__k{ flex:0 0 auto; }
}

/* ═══════════════════════════════════════════
   4차 개정 (2026-08-24) — 실사 전환 · 공지 · FAQ
   ═══════════════════════════════════════════ */

/* ── 공지 (상단 접이식) — 종이색. 첫 화면의 조용함을 깨지 않도록 ── */
.ticker{
  position:relative; z-index:1;
  background:var(--paper);
  border-bottom:1px solid var(--rule-soft);
}
/* 스크롤을 시작하면 띠를 접어 헤더를 얇게 — 첫 화면에서만 보입니다 */
.site-head.is-stuck .ticker{ display:none; }
.ticker[hidden]{ display:none; }

.ticker__item + .ticker__item{ border-top:1px solid var(--rule-soft); }

.ticker__bar{
  display:flex; align-items:center; gap:12px;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:7.5px var(--gut);
  background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--sans); font-size:13px; color:inherit;
}
.ticker__tag{
  flex:0 0 auto;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.09em;
  color:var(--ink);
  background:linear-gradient(to top, var(--mark) 0 .95em, transparent .95em);
  padding:2px 7px 3px;
}
.ticker__txt{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--ink-2);
}
.ticker__more{ flex:0 0 auto; font-size:11.5px; color:var(--ink-3); transition:color .2s; }
.ticker__chev{
  flex:0 0 auto; width:7px; height:7px;
  border-right:1.3px solid var(--ink-3); border-bottom:1.3px solid var(--ink-3);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s var(--ease), border-color .2s;
}
.ticker__bar:hover .ticker__more{ color:var(--ink); }
.ticker__bar:hover .ticker__chev{ border-color:var(--ink); }
.ticker__bar[aria-expanded="true"] .ticker__chev{ transform:rotate(-135deg) translate(-2px,-2px); }
.ticker__bar:focus-visible{ outline:2px solid var(--ink); outline-offset:-3px; }

.ticker__panel{ border-top:1px solid var(--rule-soft); background:var(--paper-2); }
.ticker__panel[hidden]{ display:none; }

.notice-list{ max-width:var(--wrap); margin-inline:auto; padding:4px var(--gut) 16px; }
.notice-item{ padding:15px 0; border-bottom:1px solid var(--rule); }
.notice-item:last-child{ border-bottom:0; }
.notice-item__meta{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:6px; }
.notice-item__date{ font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.notice-item__tag{
  font-size:10px; font-weight:600;
  background:var(--mark); color:var(--ink);
  padding:2px 8px; border-radius:999px;
}
.notice-item h3{
  font-family:var(--serif); font-weight:700; font-size:16.5px;
  letter-spacing:-.01em; margin-bottom:5px;
}
.notice-item p{ font-size:13.5px; color:var(--ink-2); max-width:64ch; }

/* ── 수상 이력 ───────────────────────────── */
.awards__q{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(18px,2.1vw,26px); letter-spacing:-.015em;
  margin:clamp(40px,5.5vw,64px) 0 clamp(18px,2.4vw,26px);
}
.awards{ border-top:2px solid var(--ink); }
.awards li{
  display:grid; grid-template-columns:76px minmax(0,1fr);
  gap:clamp(12px,2vw,26px);
  padding:clamp(16px,2.2vw,22px) 0;
  border-bottom:1px solid var(--rule);
}
.awards__yr{
  font-family:var(--mono); font-size:13px; color:var(--ink-3); padding-top:.2em;
}
.awards h3{
  font-family:var(--serif); font-weight:700; font-size:clamp(17px,1.9vw,22px);
  letter-spacing:-.01em; margin-bottom:5px;
}
.awards h3 em{
  font-style:normal;
  background:linear-gradient(to top, var(--mark) 0 .5em, transparent .5em);
  padding:0 .1em;
}
.awards p{ font-size:14px; color:var(--ink-2); }

/* ── 참가자가 두고 간 문장 ───────────────────────────── */
.notes{
  display:flex; flex-wrap:wrap; gap:clamp(11px,1.5vw,16px);
  margin-bottom:clamp(30px,4vw,44px);
}
.note{
  flex:0 1 auto; max-width:100%;
  padding:15px 18px; border-radius:1px;
  font-family:var(--serif); font-size:clamp(14.5px,1.15vw,16.5px);
  line-height:1.5; color:#2A2A26;
  box-shadow:1px 2px 5px rgba(21,36,58,.09);
}
.note:nth-child(3n+1){ transform:rotate(-1deg); }
.note:nth-child(3n+2){ transform:rotate(.8deg); }
.note:nth-child(3n){ transform:rotate(-.3deg); }
.note--yellow{ background:#FBF0A8; }
.note--pink{ background:#FBC7D8; }
.note--blue{ background:#BEDDF5; }
.note--orange{ background:#FBD87E; }

/* ── 사진 규칙 ────────────────────────────────
   ① 본문 사진 (한 블록에 한 장)  4:3 · 왼쪽 · 같은 폭 · radius 2px
      → .prog__img, .modes__img
   ② 인물 사진                    4:5 세로 · radius 2px
      → .about__photo
   ③ 갤러리 (여러 장 나란히)      1:1 · 4열 · radius 2px
      → .shots
   ④ 띠 사진 (섹션 도입·전환)     가로로 긴 띠 · 전폭 · radius 2px
      → .reel__video, .band
   ──────────────────────────────────────────── */

/* ④ 띠 사진 */
.band{
  margin-bottom:clamp(30px,4vw,44px);
}
.band picture{ display:block; overflow:hidden; border-radius:2px; }
.band img{
  width:100%; aspect-ratio:1400/316; object-fit:cover;
}
.band figcaption{
  margin-top:10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--ink-3);
}
@media (max-width:560px){
  .band img{ aspect-ratio:2/1; object-position:center 42%; }
}

/* 프로젝트 3단계 — 물었습니다 / 썼습니다 / 부쳤습니다 */
.story{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.4vw,30px);
  margin-bottom:clamp(34px,4.5vw,52px);
}
.story figure{ overflow:hidden; border-radius:2px; margin-bottom:13px; }
.story img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform .6s var(--ease);
}
.story li:hover img{ transform:scale(1.03); }
.story__n{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:var(--ink-3); margin-bottom:5px;
}
.story h3{
  font-family:var(--sans); font-weight:600; font-size:15px;
  margin-bottom:9px; padding-bottom:6px;
  border-bottom:2px solid var(--mark); display:inline-block;
}
.story li > p:last-child{ font-size:14px; color:var(--ink-2); line-height:1.75; }

.story__end{
  font-family:var(--serif);
  font-size:clamp(16px,1.6vw,21px); line-height:1.72;
  color:var(--ink);
  max-width:34em;
  margin:calc(-1 * clamp(14px,2vw,24px)) 0 clamp(34px,4.5vw,52px);
  padding-left:18px; border-left:2px solid var(--mark);
}

.story__label{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:var(--ink-3); margin-bottom:14px;
  padding-bottom:9px; border-bottom:1px solid var(--rule);
}

@media (max-width:700px){
  .story{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .story img{ aspect-ratio:16/10; }
}

/* 현장 사진 — 작은 썸네일 줄 */
.shots{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(8px,1.1vw,13px);
}
.shots img{
  width:100%; height:100%; object-fit:cover;
  aspect-ratio:1/1; border-radius:2px;
  filter:saturate(.95);
  transition:filter .3s var(--ease);
}
.shots li:hover img{ filter:saturate(1.05); }
.shots__note{
  margin-top:11px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:var(--ink-3);
}

/* 공지 안 포스터 이미지 */
.notice-item__img{
  margin:14px 0 0; max-width:300px;
  border:1px solid var(--rule); border-radius:2px; overflow:hidden;
}
.notice-item__img img{ width:100%; }
.notice-item__link{
  display:inline-block; margin-top:12px;
  font-size:13.5px; font-weight:600; text-decoration:none;
  border-bottom:2px solid var(--mark); padding-bottom:1px;
}

/* ── FAQ ───────────────────────────── */
.faq{ border-top:2px solid var(--ink); }
.qa{ border-bottom:1px solid var(--rule); }
.qa summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; gap:16px;
  padding:clamp(16px,2.2vw,22px) 0;
  font-family:var(--serif); font-weight:700;
  font-size:clamp(16px,1.7vw,20px); letter-spacing:-.01em;
  transition:color .2s;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::before{
  content:'Q'; flex:0 0 auto;
  font-family:var(--mono); font-weight:400; font-size:12px;
  color:var(--mark-deep); padding-top:.42em;
}
.qa summary::after{
  content:''; flex:0 0 auto; margin-left:auto; align-self:center;
  width:11px; height:11px;
  border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3);
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .25s var(--ease);
}
.qa[open] summary::after{ transform:rotate(-135deg) translate(-3px,-3px); }
.qa summary:hover{ color:var(--ink-2); }
.qa > p{
  padding:0 0 clamp(18px,2.4vw,24px) 28px;
  font-size:15px; color:var(--ink-2); max-width:56ch;
}


/* 어두운 배경 위 하이라이트 */
.mark-on-deep{
  background:none; color:var(--mark); font-weight:500;
  border-bottom:1px solid rgba(242,225,92,.45);
}

/* ── 문서 페이지 (개인정보 처리방침) ───────────────────────────── */
.doc{ padding-block:clamp(110px,14vh,160px) clamp(60px,8vw,100px); }
.doc__wrap{ max-width:820px; }
.doc__title{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(28px,4vw,46px); letter-spacing:-.02em;
  margin-bottom:clamp(16px,2.4vw,24px);
}
.doc__lead{
  font-size:clamp(15px,1.15vw,17px); color:var(--ink-2);
  padding-bottom:clamp(26px,3.4vw,38px); border-bottom:2px solid var(--ink);
}
.doc__sec{ padding-block:clamp(26px,3.4vw,38px); border-bottom:1px solid var(--rule); }
.doc__sec h2{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(18px,2.1vw,25px); letter-spacing:-.015em; margin-bottom:14px;
}
.doc__sec p{ font-size:15px; color:var(--ink-2); margin-bottom:12px; }
.doc__sec p:last-child{ margin-bottom:0; }
.doc__sec strong{ color:var(--ink); font-weight:600; }
.doc__sec a{ color:var(--ink); text-decoration:none; border-bottom:1.5px solid var(--mark); }
.doc__note{ font-size:13.5px !important; }
.doc__sub{ display:inline-block; font-size:12px; color:var(--ink3, #8C97A6); }

.doc__table{
  width:100%; border-collapse:collapse; margin:16px 0;
  font-size:14px; display:block; overflow-x:auto;
}
.doc__table th,.doc__table td{
  text-align:left; padding:11px 14px; border:1px solid var(--rule);
  vertical-align:top; white-space:nowrap;
}
.doc__table th{
  background:var(--paper-2); font-weight:600; font-size:12.5px;
  font-family:var(--mono); letter-spacing:.03em;
}
.doc__table td{ color:var(--ink-2); }

.doc__dl > div{
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px;
  padding:9px 0; border-bottom:1px solid var(--rule-soft);
}
.doc__dl dt{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); padding-top:.3em; }
.doc__dl dd{ font-size:14.5px; color:var(--ink-2); }
.doc__ver{ font-family:var(--mono); font-size:12px !important; color:var(--ink-3) !important; }
.doc__back{ margin-top:clamp(32px,4vw,48px); }

/* ── 반응형 보정 ───────────────────────────── */
@media (max-width:700px){
  /* 사람들이 두고 간 문장 — 긴 것 여섯 개만 */
  .notes li:not(.note--m){ display:none; }
  /* 현장 사진 — 2열에 딱 맞게 두 장만 */
  .shots li:nth-child(n+3){ display:none; }
}

@media (max-width:900px){
  .shots{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .awards li{ grid-template-columns:56px minmax(0,1fr); }
  .doc__dl > div{ grid-template-columns:minmax(0,1fr); gap:2px; }
  .ticker__more{ display:none; }
}

/* 공지 띠가 있을 때 히어로 높이 보정 */
.has-ticker .hero{ padding-top:clamp(150px,20vh,205px); }
.has-ticker--multi .hero{ padding-top:clamp(184px,23vh,238px); }

/* 카카오톡 ID 복사 버튼 */
.btn__id{
  font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  padding-bottom:1px; border-bottom:1px solid currentColor;
}
.btn--outline.is-copied{ border-color:var(--mark); color:var(--mark); }

/* 사진 아래 한 줄 설명이 붙는 경우 */
.prog__img--cap{ overflow:visible; }
.prog__img--cap picture{ display:block; overflow:hidden; border-radius:2px; }
.prog__img--cap figcaption{
  margin-top:10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--ink-3);
}

/* 과정 바로가기 칩 */
.chips{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:-.5em 0 clamp(38px,5vw,58px);
}
.chips a{
  display:inline-block; text-decoration:none;
  font-size:13px; font-weight:500; color:var(--ink-2);
  border:1px solid var(--rule); border-radius:999px;
  padding:7px 15px; background:var(--paper);
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.chips a:hover{ border-color:var(--ink); color:var(--ink); background:var(--mark); }

/* 상담 3단계 */
.flow{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.4vw,30px);
  margin-bottom:clamp(38px,5vw,56px);
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:clamp(22px,3vw,32px);
}
.flow__n{
  display:grid; place-items:center;
  width:26px; height:26px; margin-bottom:13px;
  font-family:var(--mono); font-size:12px;
  color:var(--ink); background:var(--mark); border-radius:999px;
}
.flow h3{
  font-family:var(--serif); font-weight:700; font-size:clamp(15.5px,1.5vw,18px);
  color:var(--paper); margin-bottom:7px; letter-spacing:-.01em;
}
.flow p{ font-size:13.5px; color:#9FB0C4; }

@media (max-width:700px){
  .flow{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .flow li{ display:grid; grid-template-columns:26px minmax(0,1fr); gap:0 14px; }
  .flow__n{ grid-row:span 2; margin-bottom:0; }
  .flow h3{ margin-bottom:4px; }
}

/* ═══════════════════════════════════════════
   문의 탭 + 기관·기업 출강 의뢰 폼
   ═══════════════════════════════════════════ */

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

/* ── 탭 ───────────────────────────── */
.tabs{
  display:flex; gap:0; margin-bottom:clamp(30px,4vw,44px);
  border-bottom:1px solid rgba(255,255,255,.18);
}
.tabs__btn{
  position:relative; border:0; background:none; cursor:pointer;
  font-family:var(--sans); font-size:clamp(13.5px,1.15vw,15px); font-weight:600;
  color:#7E90A6; padding:0 2px 14px; margin-right:clamp(20px,3vw,34px);
  transition:color .2s var(--ease);
}
.tabs__btn::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--mark); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.tabs__btn:hover{ color:#C3D0DE; }
.tabs__btn.is-on{ color:var(--paper); }
.tabs__btn.is-on::after{ transform:scaleX(1); }

.panel[hidden]{ display:none; }
.js .panel:not([hidden]){ animation:panelIn .32s var(--ease) both; }
@keyframes panelIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

.flow--corp{ border-top-color:rgba(255,255,255,.16); }

/* ── 기관 폼 — 그룹 구조 ───────────────────────────── */
.form--corp{ display:block; max-width:760px; }

.fset{
  border:0; padding:0; margin:0 0 clamp(26px,3.4vw,38px);
  border-top:1px solid rgba(255,255,255,.16); padding-top:clamp(18px,2.4vw,26px);
}
.fset__t{
  display:block;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  color:var(--mark); padding:0; margin:0 0 clamp(14px,2vw,20px);
}
.fset__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 26px; }
@media (max-width:640px){ .fset__grid{ grid-template-columns:minmax(0,1fr); } }

.req{
  color:var(--mark); font-weight:600; margin-left:3px;
  font-family:var(--sans); font-size:12px;
}

.grouplabel{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  color:#8FA0B4; margin-bottom:11px;
}
.grouplabel em{
  font-style:normal; font-family:var(--sans); font-size:11px;
  letter-spacing:0; color:#66788D;
  border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:2px 9px;
}

/* 날짜 */
.form--corp input[type="date"]{
  color-scheme:dark; cursor:pointer;
  font-family:var(--sans); max-width:260px;
}

/* 체크박스 · 라디오 — 선택하면 채워지는 알약 */
.checks,.radios{ display:flex; flex-wrap:wrap; gap:8px; }
.checks label,.radios label{
  display:inline-flex; align-items:center; cursor:pointer;
  border:1px solid rgba(255,255,255,.22); border-radius:999px;
  padding:9px 16px; transition:border-color .2s var(--ease), background .2s var(--ease);
}
.checks label:hover,.radios label:hover{ border-color:rgba(242,225,92,.55); }
.checks input,.radios input{ position:absolute; opacity:0; width:1px; height:1px; }
.checks span,.radios span{
  font-size:13.5px; font-weight:500; color:#C3D0DE; line-height:1.4;
  transition:color .2s var(--ease);
}
.checks label:has(:checked),.radios label:has(:checked){
  background:var(--mark); border-color:var(--mark);
}
.checks label:has(:checked) span,.radios label:has(:checked) span{ color:var(--ink); font-weight:600; }
.checks label:has(:focus-visible),.radios label:has(:focus-visible){
  outline:2px solid var(--mark); outline-offset:3px;
}

.etc-input{ margin-top:12px; }

/* 회차 추가 입력 */
.minicheck{
  display:inline-flex !important; align-items:center; gap:9px;
  margin-top:14px; cursor:pointer;
  font-family:var(--sans) !important; font-size:13px !important;
  letter-spacing:0 !important; color:#9FB0C4 !important;
}
.minicheck input{
  width:16px !important; height:16px; flex:0 0 16px;
  accent-color:var(--mark); cursor:pointer;
}
.reveal-box{ margin-top:14px; }
.reveal-box[hidden]{ display:none; }
.js .reveal-box:not([hidden]){ animation:panelIn .28s var(--ease) both; }

@media (max-width:560px){
  .tabs{ gap:0; }
  .tabs__btn{ margin-right:20px; font-size:13px; }
  .checks label,.radios label{ padding:8px 13px; }
  .checks span,.radios span{ font-size:12.5px; }
}

.modes__link{
  display:inline-block; margin-top:12px;
  font-size:13px; font-weight:600; text-decoration:none;
  padding-bottom:3px; border-bottom:1.5px solid var(--mark);
  transition:border-color .2s;
}
.modes__link:hover{ border-bottom-color:var(--ink); }

/* 강사 프로필 PDF 내려받기 */
.dl{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-bottom:clamp(30px,4vw,42px);
}
.dl__btn{
  display:inline-flex; align-items:center; gap:11px;
  text-decoration:none; font-size:14.5px; font-weight:600; color:var(--paper);
  border:1px solid rgba(255,255,255,.28); border-radius:999px;
  padding:12px 22px 12px 18px;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.dl__btn em{
  font-style:normal; font-family:var(--mono); font-weight:400;
  font-size:11px; letter-spacing:.06em; color:#7E90A6;
}
.dl__ico{
  width:15px; height:15px; flex:0 0 15px; position:relative;
}
.dl__ico::before{
  content:''; position:absolute; left:6px; top:0; width:2px; height:9px; background:var(--mark);
}
.dl__ico::after{
  content:''; position:absolute; left:2px; top:5px; width:9px; height:9px;
  border-left:2px solid var(--mark); border-bottom:2px solid var(--mark);
  transform:rotate(-45deg); transform-origin:center;
}
.dl__btn:hover{ background:var(--mark); border-color:var(--mark); color:var(--ink); }
.dl__btn:hover em{ color:var(--ink); opacity:.62; }
.dl__btn:hover .dl__ico::before{ background:var(--ink); }
.dl__btn:hover .dl__ico::after{ border-color:var(--ink); }
.dl__note{ font-size:13px; color:#7E90A6; }

@media (max-width:560px){
  .dl__btn{ width:100%; justify-content:center; }
  .dl__note{ font-size:12.5px; }
}


/* ── 세로가 짧은 화면(노트북)에서 히어로 한 화면에 담기 ───────────── */
@media (max-height:900px){
  .hero{ padding-block:88px 46px; }
  .hero__q{ font-size:clamp(30px,min(6.2vw,8.4vh),64px); margin-bottom:24px; }
  .prompt{ margin-bottom:24px; }
  .prompt__input{ font-size:clamp(16px,1.9vw,21px); padding:8px 2px 11px; }
  .prompt__label{ margin-bottom:8px; }
  .prompt__foot{ margin-top:9px; min-height:30px; }
  .hero__sub{ font-size:14.5px; margin-bottom:22px; max-width:52ch; }
  .hero__acts{ gap:10px; }
  .btn{ padding:11px 22px; }
  .hero__scroll{ height:32px; bottom:14px; }
  .eyebrow{ margin-bottom:18px; }
}
@media (max-height:660px){
  .hero{ padding-block:76px 32px; }
  .hero__q{ font-size:clamp(28px,min(5.8vw,8vh),56px); margin-bottom:18px; }
  .prompt{ margin-bottom:18px; }
  .prompt__foot{ margin-top:7px; min-height:26px; }
  .hero__sub{ font-size:13.5px; margin-bottom:16px; }
  .hero__scroll{ display:none; }
}

/* 아주 짧은 화면(작은 노트북·가로 태블릿) — 설명 문단을 접습니다 */
@media (max-height:600px){
  .hero{ padding-block:70px 26px; }
  .hero__q{ margin-bottom:16px; }
  .hero__sub{ display:none; }
  .prompt{ margin-bottom:16px; }
  .eyebrow{ margin-bottom:12px; font-size:11px; }
}