/*
  [생성일] 2026-08-02
  [경위] 예담 전체 페이지 시안 v2 공통 스타일 — 한방 아포테카리 방향의 개선판
         (송명체 제목 · 낙관 도장 · 세로 라벨 · 한자 과정 번호 · 힉스필드 실사 이미지)
  [변경이력]
    - 2026-08-02: 최초 생성
  [아임웹 이식 메모]
    - 이 파일 전체를 "환경설정 > 코드 삽입 > 헤더"에 <style>로 1회 넣으면 모든 위젯이 공유합니다.
    - 표준 CSS만 사용 (writing-mode, aspect-ratio, grid — 아임웹에서 그대로 동작).
    - 클래스는 전부 yd- 접두사 격리. 전역 선택자는 body 폰트 지정 1곳뿐(시안 전용, 이식 시 제거).
*/

/* ===== 토큰 ===== */
:root{
  --yd-ink:       #2B1D13;   /* 진액 브라운 */
  --yd-ink-soft:  #6B5747;
  --yd-paper:     #FBF7EF;   /* 한지 크림 */
  --yd-hanji:     #F0E7D6;
  --yd-amber:     #A6702F;   /* 진액 호박색 */
  --yd-herb:      #4C5B3D;
  --yd-deep:      #1C1410;
  --yd-seal:      #B23A2A;   /* 낙관 인주색 — 도장·아주 작은 강조에만 */
  --yd-line:      rgba(43,29,19,.16);
  --yd-frame:     rgba(43,29,19,.38);
  --yd-serif: "Song Myung", "Nanum Myeongjo", "Malgun Gothic", serif;   /* 제목: 활판 명조 */
  --yd-quote: "Gowun Batang", "Nanum Myeongjo", serif;                  /* 인용: 부드러운 바탕 */
  --yd-sans: "Pretendard Variable", "Pretendard", -apple-system, "Malgun Gothic", sans-serif;
  --yd-pad: clamp(20px, 5vw, 64px);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--yd-sans); background:var(--yd-paper); color:var(--yd-ink);
  line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  word-break:keep-all; overflow-wrap:break-word;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--yd-amber); outline-offset:3px; }

/* ===== 공통 유틸 ===== */
.yd-container{ max-width:1240px; margin:0 auto; padding-left:var(--yd-pad); padding-right:var(--yd-pad); }
.yd-eyebrow{
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--yd-amber); font-weight:700; display:block; margin-bottom:16px;
}
.yd-h2{ font-family:var(--yd-serif); font-weight:400; font-size:clamp(25px,3.1vw,38px); line-height:1.42; letter-spacing:.01em; }
.yd-section-head{ padding:clamp(76px,9vw,120px) 0 clamp(32px,4vw,48px); }
.yd-section-note{ margin-top:14px; color:var(--yd-ink-soft); font-size:15px; max-width:54ch; }

/* 세로쓰기 라벨 — 약방 문서의 세로 괘 */
.yd-vlabel{
  writing-mode:vertical-rl; font-size:11px; letter-spacing:.4em;
  color:var(--yd-amber); font-weight:700;
}

/* 낙관 도장 — 시그니처, 히어로·푸터에만 */
.yd-stamp{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; flex:none;
  background:var(--yd-seal); color:#FBF7EF; border-radius:5px;
  font-family:var(--yd-serif); font-size:15px; letter-spacing:.18em;
  writing-mode:vertical-rl; text-orientation:upright;
  box-shadow:inset 0 0 0 2px rgba(251,247,239,.28), 0 2px 8px rgba(43,29,19,.18);
}

/* 이중 괘선 액자 — 사진 프레임 (전통 문서 테두리) */
.yd-frame{ border:1px solid var(--yd-frame); padding:8px; background:var(--yd-paper); }
.yd-frame-inner{ border:1px solid var(--yd-line); overflow:hidden; position:relative; }
.yd-frame-inner img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.yd-frame:hover .yd-frame-inner img{ transform:scale(1.025); }
.yd-frame--dark{ background:transparent; border-color:rgba(251,247,239,.3); }
.yd-frame--dark .yd-frame-inner{ border-color:rgba(251,247,239,.16); }
.yd-photo-note{ font-size:12px; color:var(--yd-ink-soft); margin-top:10px; letter-spacing:.02em; }

/* 버튼 */
.yd-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:700; padding:15px 30px; border-radius:999px;
  border:1px solid var(--yd-ink); transition:transform .2s var(--ease-out), background .2s, color .2s;
}
.yd-btn:hover{ transform:translateY(-2px); }
.yd-btn:active{ transform:scale(.97); }
.yd-btn--solid{ background:var(--yd-ink); color:var(--yd-paper); }
.yd-btn--solid:hover{ background:#3E2B1D; }
.yd-btn--ghost{ background:transparent; color:var(--yd-ink); }
.yd-btn--ghost:hover{ background:rgba(43,29,19,.06); }
.yd-btn--paper{ background:var(--yd-paper); color:var(--yd-ink); border-color:var(--yd-paper); }
.yd-btn--amber{ background:var(--yd-amber); color:#fff; border-color:var(--yd-amber); }
.yd-btn svg{ flex:none; }

/* 자료 필요 칩 */
.yd-chip{ font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; border:1px dashed var(--yd-amber); color:var(--yd-amber); white-space:nowrap; }

/* ===== 헤더 ===== */
/* [아임웹] 시안 전용 헤더 — 실제 적용 시 아임웹 기본 헤더(메뉴 설정)로 대체 */
.yd-header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--yd-pad);
  background:rgba(251,247,239,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--yd-line);
}
.yd-logo{ display:flex; align-items:center; gap:12px; line-height:1.1; }
.yd-logo strong{ font-family:var(--yd-serif); font-size:23px; font-weight:400; letter-spacing:.3em; }
.yd-logo span{ font-size:9px; letter-spacing:.3em; color:var(--yd-amber); text-transform:uppercase; font-weight:700; margin-top:5px; }
.yd-nav{ display:flex; gap:26px; align-items:center; }
.yd-nav a{ font-size:14px; color:var(--yd-ink-soft); transition:color .15s; }
.yd-nav a:hover, .yd-nav a[aria-current="page"]{ color:var(--yd-ink); }
.yd-header-tel{
  font-size:13.5px; font-weight:700; padding:9px 18px;
  border:1px solid var(--yd-ink); border-radius:999px; transition:background .2s, color .2s;
  display:inline-flex; align-items:center; gap:7px;
}
.yd-header-tel:hover{ background:var(--yd-ink); color:var(--yd-paper); }
.yd-burger{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.yd-burger span{ display:block; width:22px; height:1.5px; background:var(--yd-ink); margin:5px 0; }
.yd-mobile-menu{
  position:fixed; inset:0; z-index:40; background:var(--yd-paper);
  display:none; flex-direction:column; justify-content:center; padding:0 var(--yd-pad);
}
.yd-mobile-menu.is-open{ display:flex; }
.yd-mobile-menu a{ font-family:var(--yd-serif); font-size:24px; padding:13px 0; border-bottom:1px solid var(--yd-line); }
.yd-mobile-close{ position:absolute; top:18px; right:var(--yd-pad); background:none; border:none; font-size:15px; cursor:pointer; letter-spacing:.1em; color:var(--yd-ink-soft); }

/* ===== 푸터 ===== */
.yd-footer{ border-top:1px solid var(--yd-line); padding:40px var(--yd-pad) 48px; background:var(--yd-hanji); }
.yd-footer-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; max-width:1240px; margin:0 auto; }
.yd-footer-info{ font-size:13px; color:var(--yd-ink-soft); line-height:1.9; }
.yd-footer-note{ font-size:12.5px; color:var(--yd-ink-soft); margin-top:20px; padding-top:16px; border-top:1px solid var(--yd-line); max-width:1240px; margin-left:auto; margin-right:auto; }

/* 전화 플로팅 (모바일) */
.yd-tel-fab{
  position:fixed; right:18px; bottom:18px; z-index:30; display:none;
  align-items:center; gap:9px; padding:14px 20px; border-radius:999px;
  background:var(--yd-ink); color:var(--yd-paper); font-size:14.5px; font-weight:700;
  box-shadow:0 8px 22px rgba(43,29,19,.3);
}

/* ===== 등장 모션 — JS가 있을 때만 숨겼다가 띄움 (JS 실패 시 항상 보임) ===== */
.js-on .yd-reveal{ opacity:0; transform:translateY(18px); transition:opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.js-on .yd-reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js-on .yd-reveal{ opacity:1; transform:none; transition:none; }
  .yd-btn:hover, .yd-frame:hover .yd-frame-inner img{ transform:none; }
}

/* ===== 반응형 공통 ===== */
@media (max-width: 1023px){
  .yd-nav{ display:none; }
  .yd-burger{ display:block; }
  .yd-header-tel{ display:none; }
  .yd-tel-fab{ display:inline-flex; }
}