/* ==========================================================================
   앙파티 empathie — DESIGN LAYER (2026-10-14 디자인 시스템 반영)
   style.css 뒤에 불러와 토큰·형태·타이포를 새 브랜드 북 기준으로 덮어씁니다.
   원칙: 먹(ink) 한 색의 글자·선 / 4색은 도형·면·패턴에만 / 그림자·그라데이션·이모지 없음
         타원(7:10) 카드 · 흔들리는 손그림 선 프레임 · 망점 질감
   ========================================================================== */

/* ── 1. FONTS (Paperlogy: SIL OFL 1.1, 웹용 부분 서브셋) ── */
@font-face { font-family: "Paperlogy"; font-weight: 200; font-style: normal; font-display: swap; src: url("assets/fonts/Paperlogy-2ExtraLight.woff2") format("woff2"); }
@font-face { font-family: "Paperlogy"; font-weight: 300; font-style: normal; font-display: swap; src: url("assets/fonts/Paperlogy-3Light.woff2") format("woff2"); }
@font-face { font-family: "Paperlogy"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/Paperlogy-4Regular.woff2") format("woff2"); }
@font-face { font-family: "Paperlogy"; font-weight: 600; font-style: normal; font-display: swap; src: url("assets/fonts/Paperlogy-6SemiBold.woff2") format("woff2"); }

@font-face { font-family: "Lexend Exa"; font-weight: 300 400; font-style: normal; font-display: swap; src: url("assets/fonts/LexendExa-Light.woff2") format("woff2"); }

/* ── 2. TOKENS ── */
:root {
  /* brand book tokens */
  --ap-canvas: #f2f0eb;   /* Pantone 11-0602 TCX Snow White (디자이너 요청) */
  --ap-linen: #edecda;
  --ap-paper: #ffffff;
  --ap-card: #f4f3e8;     /* v2.1 canvas: 카드·박스 면. 흰색(paper)은 입력칸·활동지처럼 쓰고 그리는 면에만 */
  --ap-warm: #fef0cf;
  --ap-ink: #1d1d1b;
  --ap-ink-soft: #58595b;
  --ap-stone: #a7a5a6;
  --ap-olive: #9bb53a;
  --ap-orange: #f14c46;
  --ap-purple: #c8449b;
  --ap-olive-ink: #5f6f24;
  --ap-orange-ink: #c2302a;
  --ap-purple-ink: #a33079;
  --ap-line: var(--ap-ink);
  --ap-display: "Lexend Exa", Paperlogy, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --ap-sans: Paperlogy, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --ap-round: Orbit, Paperlogy, sans-serif;
  --ap-space-1: 4px; --ap-space-2: 8px; --ap-space-3: 16px; --ap-space-4: 24px; --ap-space-5: 40px; --ap-space-6: 72px;
  --ap-stroke: 1.33px;
  --ap-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1.2 1.8C25 0.9 50 2.3 75 1.1S98.6 1.7 98.8 1.4C99.3 25 98.4 50 99.1 75S98.6 97.9 98.9 98.6C75 99.4 50 98 25 99S1.6 98.3 1.1 98.8C1.7 75 0.7 50 1.5 25S1.1 3 1.2 1.8Z' fill='%23f4f3e8' stroke='%231d1d1b' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --ap-frame-alt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1.6 1.2C30 2.1 55 0.8 80 1.9S98.9 1.1 98.7 2C98.1 28 99.2 52 98.5 78S99.3 98.4 98.4 98.7C72 98.1 48 99.4 22 98.4S1.3 99 1.6 98C2.2 70 1.1 45 1.9 20S1.4 2.4 1.6 1.2Z' fill='%23f4f3e8' stroke='%231d1d1b' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --ap-frame-linen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1.6 1.2C30 2.1 55 0.8 80 1.9S98.9 1.1 98.7 2C98.1 28 99.2 52 98.5 78S99.3 98.4 98.4 98.7C72 98.1 48 99.4 22 98.4S1.3 99 1.6 98C2.2 70 1.1 45 1.9 20S1.4 2.4 1.6 1.2Z' fill='%23edecda' stroke='%231d1d1b' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");

  /* legacy variable remap (style.css는 변수로 색을 씁니다) */
  --c-white: var(--ap-paper);
  --c-bg-canvas: var(--ap-canvas);
  --c-bg-soft: var(--ap-canvas);
  --c-bg-gray: var(--ap-linen);
  --c-bg-beige: var(--ap-linen);
  --c-bg-beige-light: var(--ap-canvas);
  --c-card-bg: var(--ap-card);
  --c-ink: var(--ap-ink);
  --c-body: var(--ap-ink);
  --c-mute: var(--ap-ink-soft);
  --c-stone: rgba(29, 29, 27, 0.28);
  --c-hr: rgba(29, 29, 27, 0.16);
  --c-sage: var(--ap-olive-ink);
  --c-sage-soft: #e4e8c9;
  --c-ochre: var(--ap-orange-ink);
  --c-ochre-soft: #f4dfd5;
  --c-slate: var(--ap-purple-ink);
  --c-slate-soft: #efdedf;
  --c-dark: var(--ap-ink);
  --c-dark-soft: var(--ap-ink);
  --c-dark-text: var(--ap-paper);
  --c-dark-sub: #d7d5d6;
  --c-coral: var(--ap-orange-ink);
  --c-mau-red: var(--ap-orange-ink);
  --c-sale: var(--ap-orange-ink);
  --c-sale-bg: #f4dfd5;
  --f-art: var(--ap-display);
  --f-art-eng: var(--ap-display);
  --f-serif: var(--ap-sans);
  --f-sans: var(--ap-sans);
  --f-mono: var(--ap-sans);
  --r-sm: 0; --r-md: 0; --r-lg: 0;
  --r-brush-btn: 999px; --r-brush-btn-alt: 999px; --r-brush-badge: 999px;
  --r-brush-blob: 50%; --r-brush-card: 0;
  --sh-subtle: none; --sh-hover: none; --sh-float: none;
  --sp-sec: 72px;
}

/* ── 3. BASE ── */
html { background: var(--ap-canvas); }
body {
  background: var(--ap-canvas);
  color: var(--ap-ink);
  font-family: var(--ap-sans);
  font-weight: 300;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
/* 그림자·그라데이션 없음: 층은 canvas·linen·paper 명도 차와 손그림 선으로만 */
*, *::before, *::after { text-shadow: none !important; }
body :is(.btn, .card-item, .philo-card, .process-card, .prompt-card, .booklet-card, .master-sheet-card, .modal, .nav, .nav.scrolled,
  .raw-nav-card, .value-box, .contact-item, .tag-badge, .hero-video-card-wrap, .floating-quick-bar, .float-btn, .scroll-top,
  .director-img-frame, .view-archive-tag, .back-to-work, .footer, .admin-hub-card, .scene-block, .sns-badge, .mobile-bottom-tab) { box-shadow: none !important; }
::selection { background: var(--ap-ink); color: var(--ap-canvas); }
:focus-visible { outline: 2px solid var(--ap-ink); outline-offset: 2px; }

/* 종이 질감: 아주 옅은 거친 점 (리소 느낌) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .12 0 0 0 0 .12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, h5 { font-family: var(--ap-sans); color: var(--ap-ink); font-weight: 600; letter-spacing: -0.01em; }
p { color: var(--ap-ink); }
img { image-rendering: auto; }
a { color: inherit; }

/* ── 4. 영문 Display 라벨 (대문자·넓은 자간·Light) ── */
.ap-display, .art-title, .raw-art-work-hero__title, .logo__brand-art, .logo__brand-sub, .nav__link, .view-archive-tag, .back-to-work,
.hero-badge-pill, .raw-card-art, .raw-form-category-tag, .art-sub-guide, .tag-badge, .view-hero-badge,
.sec-head .art-title, .mobile-tab-btn__label, .btn-nav-user, .nav__actions .btn {
  font-family: var(--ap-display);
}
.art-title, .sec-head .art-title {
  font-weight: 300; font-size: clamp(30px, 5.4vw, 56px); letter-spacing: .12em; text-transform: uppercase; line-height: 1.15; color: var(--ap-ink);
}
.art-title::after { content: "!"; letter-spacing: 0; }          /* 장 제목: 대문자 + 느낌표 */
.art-title--sage { color: var(--ap-ink); }
.art-sub-guide { font-family: var(--ap-sans); font-weight: 200; font-size: 14.7px; letter-spacing: .02em; color: var(--ap-ink-soft); text-transform: none; }

/* ── 5. NAV ── */
.nav, .nav.scrolled {
  background: var(--ap-canvas) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-bottom: var(--ap-stroke) solid var(--ap-ink) !important;
}
.logo__img { height: 40px; width: auto; image-rendering: auto; }
.logo__brand-art { font-weight: 400; letter-spacing: .14em; color: var(--ap-ink); font-size: 15px; }
.logo__brand-sub { font-weight: 300; letter-spacing: .24em; color: var(--ap-ink-soft); font-size: 10px; }
.nav__link { font-weight: 300; font-size: 11.5px; letter-spacing: .14em; color: var(--ap-ink); }
.nav__link::after { height: 2px; background: var(--ap-ink); border-radius: 0; }
.nav__link.active { color: var(--ap-ink); font-weight: 400; }
.nav__link--store { color: var(--ap-ink); }
.nav__link--store::before, .nav__link--store .new-badge { background: var(--ap-orange-ink) !important; color: var(--ap-paper) !important; }
.sns-badge { background: transparent !important; border: var(--ap-stroke) solid var(--ap-ink) !important; color: var(--ap-ink) !important; }
.sns-badge:hover { background: var(--ap-ink) !important; color: var(--ap-canvas) !important; }

/* ── 6. BUTTONS / CHIPS ── */
.btn { font-family: var(--ap-sans); font-weight: 400; letter-spacing: .02em; border-radius: 999px !important; transition: background .2s, color .2s, transform .2s; }
.btn-primary, a.btn-primary, button.btn-primary {
  background: var(--ap-ink) !important; color: var(--ap-paper) !important; border: var(--ap-stroke) solid var(--ap-ink) !important;
}
.btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover { background: var(--ap-card) !important; color: var(--ap-ink) !important; transform: translateY(-1px); }
.btn-outline, a.btn-outline, button.btn-outline { background: transparent !important; color: var(--ap-ink) !important; border: var(--ap-stroke) solid var(--ap-ink) !important; }
.btn-outline:hover, a.btn-outline:hover, button.btn-outline:hover { background: var(--ap-ink) !important; color: var(--ap-canvas) !important; }
.btn-ghost { color: var(--ap-ink) !important; }
.btn-brush::after { display: none !important; }
.tag-badge, .hero-badge-pill, .raw-form-category-tag, .view-archive-tag, .back-to-work, .preset-chip {
  background: var(--ap-card) !important; color: var(--ap-ink) !important; border: var(--ap-stroke) solid var(--ap-ink) !important;
  border-radius: 999px !important; font-weight: 300; letter-spacing: .12em; text-transform: uppercase;
}
.tag-badge.sage, .tag-badge.ochre, .tag-badge.slate { background: var(--ap-card) !important; color: var(--ap-ink) !important; }
.view-archive-tag strong { color: var(--ap-ink); }
.back-to-work:hover { background: var(--ap-ink) !important; color: var(--ap-canvas) !important; }

/* ── 7. FORMS ── */
.form-input, input, select, textarea { font-family: var(--ap-sans); color: var(--ap-ink); }
.form-input { background: var(--ap-paper); border: var(--ap-stroke) solid var(--ap-ink); border-radius: 0; box-shadow: none; }
.form-input:focus { outline: 2px solid var(--ap-ink); outline-offset: 2px; border-color: var(--ap-ink); box-shadow: none; }

/* ── 8. 섹션·제목 영역 ── */
.section { background: var(--ap-canvas); padding-block: var(--ap-space-6); }
.section--gray, .section--beige { background: var(--ap-linen); }
.sec-head h2 { font-family: var(--ap-sans); font-weight: 600; letter-spacing: -0.015em; color: var(--ap-ink); }
.sec-head p { font-weight: 200; font-size: 15px; line-height: 2; color: var(--ap-ink-soft); }
.view-top-bar { border-bottom: var(--ap-stroke) solid var(--ap-ink); }
.view-stamp-img, .view-peek-girl-img { height: 64px; width: auto; }
.view-peek-girl-img:hover { transform: translateY(-4px) rotate(-3deg); }

/* ── 9. 손그림 프레임 카드 (반듯한 둥근 모서리 카드 대신) ── */
:is(.card-item, .philo-card, .process-card, .prompt-card, .booklet-card, .master-sheet-card, .contact-item, .value-box,
    .raw-nav-card, .hero-video-card-wrap, .admin-hub-card, .director-profile-wrap, .scene-block) {
  background: var(--ap-frame) center / 100% 100% no-repeat !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
:is(.philo-card, .booklet-card, .master-sheet-card, .value-box):nth-child(even) { background: var(--ap-frame-alt) center / 100% 100% no-repeat !important; }
:is(.card-item, .philo-card, .process-card, .booklet-card):hover { transform: translateY(-3px) rotate(-.4deg); }
:is(.philo-card__img-wrap, .process-card__img-wrap, .director-img-frame, .hero-video-box) { border-radius: 0 !important; overflow: hidden; }
:is(.philo-card__img-wrap, .process-card__img-wrap, .director-img-frame) > img { border-radius: 0 !important; }
.philo-card h3, .process-card h4, .card-item h3, .card-item h4 { font-weight: 600; }
.philo-num, .process-step-badge, .process-step-pill, .scene-step-badge { font-family: var(--ap-display); font-weight: 300; letter-spacing: .12em; background: var(--ap-ink) !important; color: var(--ap-canvas) !important; border-radius: 999px !important; }
.process-keyword { font-family: var(--ap-display); font-weight: 300; letter-spacing: .1em; }

/* ── 10. FOOTER ── */
.footer { background: var(--ap-linen); border-top: var(--ap-stroke) solid var(--ap-ink); }
.footer__email-text, .footer__copy-row, .footer__addr-row { font-family: var(--ap-sans); font-weight: 300; color: var(--ap-ink-soft); }
.footer__logo-img { height: 54px; width: auto; display: inline-block; }

/* ── 11. MODAL ── */
.modal-backdrop { background: rgba(29, 29, 27, .55) !important; backdrop-filter: none !important; }
.modal { background: var(--ap-frame) center / 100% 100% no-repeat !important; border: 0 !important; border-radius: 0 !important; }
.modal__close { border-radius: 999px; border: var(--ap-stroke) solid var(--ap-ink); background: var(--ap-card); color: var(--ap-ink); }

/* ── 12. 플로팅 버튼 ── */
.float-btn, .scroll-top { background: var(--ap-card) !important; color: var(--ap-ink) !important; border: var(--ap-stroke) solid var(--ap-ink) !important; border-radius: 999px !important; }
.float-btn--kakao { background: var(--ap-warm) !important; }

/* ==========================================================================
   13. HOME (view-work) — 앙파티 empathie
   ========================================================================== */
#view-work { background: var(--ap-canvas); }
.ap-wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }

/* HERO ────────────────────────────────────────────── */
.ap-hero { position: relative; padding: clamp(40px, 7vw, 88px) 0 clamp(32px, 5vw, 56px); overflow: hidden; }
.ap-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--ap-space-5); align-items: center; }
.ap-hero__kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 var(--ap-space-4); font-family: var(--ap-display); font-weight: 300; font-size: 12px; letter-spacing: .14em; text-transform: lowercase; }
.ap-hero__kicker b { font-weight: 300; padding: 0 .35em; color: var(--ap-orange-ink); }
.ap-hero__title { margin: 0; font-family: var(--ap-display); font-weight: 300; font-size: clamp(46px, 9.4vw, 128px); line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--ap-ink); }
.ap-hero__title small { display: block; margin-top: var(--ap-space-3); font-family: var(--ap-sans); font-weight: 200; font-size: clamp(16px, 2vw, 22px); letter-spacing: 0; text-transform: none; line-height: 1.7; }
.ap-hero__title em { font-style: normal; background: linear-gradient(transparent 62%, var(--ap-warm) 62%); }  /* 형광펜 띠 (warm-white 강조 면) */
.ap-hero__tag { margin: var(--ap-space-4) 0 var(--ap-space-4); font-family: var(--ap-display); font-weight: 400; font-size: 9.6px; letter-spacing: .1em; line-height: 1.7; text-transform: uppercase; color: var(--ap-ink-soft); }
.ap-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.ap-hero__cta .btn { min-height: 48px; padding-inline: 26px; }
.ap-stage { position: relative; min-height: clamp(360px, 46vw, 520px); }
.ap-stage__dots { position: absolute; inset: 6% 4% 4% 10%; border-radius: 50%; opacity: .9;
  background-image: radial-gradient(circle, var(--ap-orange) 0 1.1px, transparent 1.4px); background-size: 7px 7px; transform: rotate(-8deg); }
.ap-fan { position: absolute; inset: 0; }
.ap-fan__card { position: absolute; width: clamp(130px, 17vw, 210px); aspect-ratio: 7 / 10; transition: transform .45s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.ap-fan__card img { width: 100%; height: 100%; display: block; object-fit: contain; }
.ap-fan__card:nth-child(1) { left: 2%; top: 16%; transform: rotate(-12deg); }
.ap-fan__card:nth-child(2) { left: 30%; top: 2%; transform: rotate(3deg); z-index: 2; }
.ap-fan__card:nth-child(3) { right: 2%; top: 20%; transform: rotate(14deg); z-index: 1; }
.ap-fan:hover .ap-fan__card:nth-child(1) { transform: rotate(-17deg) translate(-10px, 4px); }
.ap-fan:hover .ap-fan__card:nth-child(2) { transform: rotate(0deg) translateY(-10px); }
.ap-fan:hover .ap-fan__card:nth-child(3) { transform: rotate(19deg) translate(10px, 4px); }
.ap-stage__peek { position: absolute; left: -2%; bottom: -3%; width: clamp(64px, 9vw, 110px); z-index: 3; }
.ap-stage__sticker { position: absolute; right: 0; bottom: 4%; width: clamp(120px, 15vw, 180px); z-index: 3; transform: rotate(-6deg); }

/* MARQUEE ─────────────────────────────────────────── */
.ap-marquee { border-block: var(--ap-stroke) solid var(--ap-ink); background: var(--ap-linen); overflow: hidden; }
.ap-marquee__track { display: flex; width: max-content; animation: ap-marquee 38s linear infinite; }
.ap-marquee__item { display: inline-flex; align-items: center; gap: 22px; padding: 14px 22px; font-family: var(--ap-display); font-weight: 300; font-size: clamp(14px, 1.8vw, 20px); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.ap-marquee__item img { height: 28px; width: auto; }
@keyframes ap-marquee { to { transform: translateX(-50%); } }

/* SECTION HEAD (장 제목 + 안내 두 줄 + 낙서) ─────────── */
.ap-block { padding: var(--ap-space-6) 0 0; }
.ap-head { display: grid; grid-template-columns: 1fr auto; gap: var(--ap-space-3); align-items: end; margin-bottom: var(--ap-space-5); }
.ap-head__title { margin: 0 0 14px; font-family: var(--ap-display); font-weight: 300; font-size: clamp(24px, 3.6vw, 40px); letter-spacing: .12em; line-height: 1.25; text-transform: uppercase; }
.ap-head__guide { margin: 0; max-width: 560px; font-weight: 200; font-size: 15px; line-height: 2; }
.ap-head__doodle { height: 44px; width: auto; }

/* VIDEO ──────────────────────────────────────────── */
.ap-video { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--ap-space-4); padding: var(--ap-space-4);
  background: var(--ap-frame) center / 100% 100% no-repeat; align-items: center; }
.ap-video__box { position: relative; background: var(--ap-linen); overflow: hidden; aspect-ratio: 16 / 10; }
.ap-video__box video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-video__copy { padding: var(--ap-space-3); }
.ap-video__copy h3 { margin: 12px 0 12px; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.4; font-weight: 600; }
.ap-video__copy p { margin: 0 0 var(--ap-space-4); font-weight: 200; font-size: 15px; line-height: 2; }
.ap-video__btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* KITS (기록=먹 1도 / 놀이=4색) ───────────────────── */
.ap-kits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ap-space-4); }
.ap-kit { position: relative; padding: var(--ap-space-5) var(--ap-space-4) var(--ap-space-4); display: flex; flex-direction: column; min-height: 420px; cursor: pointer;
  background: var(--ap-frame) center / 100% 100% no-repeat; transition: transform .3s; }
.ap-kit:nth-child(2) { background: var(--ap-frame-linen) center / 100% 100% no-repeat; }
.ap-kit:hover { transform: translateY(-4px) rotate(-.4deg); }
.ap-kit__no { font-family: var(--ap-display); font-weight: 300; font-size: 12px; letter-spacing: .14em; margin-bottom: 10px; }
.ap-kit__name { margin: 0 0 8px; font-family: var(--ap-display); font-weight: 300; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
.ap-kit__triad { font-family: var(--ap-display); font-weight: 300; font-size: 12px; letter-spacing: .14em; text-transform: lowercase; margin-bottom: var(--ap-space-3); }
.ap-kit__triad b { font-weight: 300; padding: 0 .5em; }
.ap-kit p { margin: 0 0 var(--ap-space-3); max-width: 420px; font-weight: 200; line-height: 2; font-size: 15px; }
.ap-kit__art { margin-top: auto; display: flex; align-items: flex-end; gap: 10px; min-height: 150px; }
.ap-kit__art img { height: 150px; width: auto; display: block; transition: transform .35s; }
.ap-kit:hover .ap-kit__art img:nth-child(odd) { transform: rotate(-4deg) translateY(-4px); }
.ap-kit:hover .ap-kit__art img:nth-child(even) { transform: rotate(4deg) translateY(-4px); }
.ap-kit__more { margin-top: var(--ap-space-3); font-family: var(--ap-display); font-weight: 300; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; border-bottom: var(--ap-stroke) solid var(--ap-ink); align-self: flex-start; padding-bottom: 3px; }

/* SHORTCUTS (낙서 아이콘 타일) ────────────────────── */
.ap-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ap-space-3); }
.ap-tile { padding: var(--ap-space-4) var(--ap-space-3); text-align: center; cursor: pointer; transition: transform .3s;
  background: var(--ap-frame) center / 100% 100% no-repeat; }
.ap-tile:nth-child(even) { background: var(--ap-frame-alt) center / 100% 100% no-repeat; }
.ap-tile:hover { transform: translateY(-4px) rotate(.5deg); }
.ap-tile img { height: 52px; width: auto; margin-bottom: 12px; display: inline-block; }
.ap-tile__en { display: block; font-family: var(--ap-display); font-weight: 300; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.ap-tile__ko { display: block; margin-top: 4px; font-weight: 200; font-size: 13px; color: var(--ap-ink-soft); }

/* CHAPTER INDEX (노트 목차처럼) ──────────────────── */
.ap-index { list-style: none; margin: 0; padding: 0; border-top: var(--ap-stroke) solid var(--ap-ink); }
.ap-index li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--ap-space-3); align-items: center; padding: 22px 6px; border-bottom: var(--ap-stroke) solid var(--ap-ink); cursor: pointer; transition: background .2s, padding .25s; }
.ap-index li:hover { background: var(--ap-warm); padding-inline: 18px; }
.ap-index__no { font-family: var(--ap-display); font-weight: 300; font-size: 13px; letter-spacing: .12em; }
.ap-index__title { font-family: var(--ap-display); font-weight: 300; font-size: clamp(18px, 2.6vw, 30px); letter-spacing: .12em; text-transform: uppercase; }
.ap-index__title small { display: block; margin-top: 4px; font-family: var(--ap-sans); font-weight: 200; font-size: 13.5px; letter-spacing: 0; text-transform: none; color: var(--ap-ink-soft); }
.ap-index__go { font-family: var(--ap-display); font-weight: 300; font-size: 12px; letter-spacing: .14em; }

/* CLOSING ─────────────────────────────────────────── */
.ap-closing { margin: var(--ap-space-6) 0 0; padding: var(--ap-space-5) 0 var(--ap-space-6); text-align: center; }
.ap-closing img { width: min(520px, 80%); height: auto; }
.ap-closing p { margin: var(--ap-space-3) 0 var(--ap-space-4); font-weight: 200; font-size: 16px; }

/* ── 반응형 ── */
@media (max-width: 900px) {
  .ap-hero__grid, .ap-video, .ap-kits { grid-template-columns: minmax(0, 1fr); }
  .ap-stage { min-height: 360px; }
  .ap-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-head { grid-template-columns: minmax(0, 1fr); }
  .ap-head__doodle { display: none; }
  .ap-index li { grid-template-columns: 40px minmax(0, 1fr); }
  .ap-index__go { display: none; }
}
@media (max-width: 520px) {
  .ap-wrap { width: calc(100% - 32px); }
  .ap-hero__title { font-size: clamp(38px, 13vw, 64px); }
  .ap-fan__card { width: 34vw; }
  .ap-kit { min-height: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-marquee__track { animation: none; }
  .ap-fan__card, .ap-kit, .ap-tile, .ap-index li, :is(.card-item, .philo-card, .process-card, .booklet-card) { transition: none; }
  body::before { display: none; }
}

/* ==========================================================================
   14. 이미지 틀 — 초안 일러스트를 걷어내고 카드·낙서 아이콘이 놓이는 면
   ========================================================================== */
:is(.philo-card__img-wrap, .process-card__img-wrap, .booklet-cover, .contact-studio-banner) {
  background-color: var(--ap-canvas);
  background-image: radial-gradient(circle, rgba(241, 76, 70, .55) 0 1px, transparent 1.3px);   /* 망점 */
  background-size: 7px 7px;
  border: 0 !important; border-bottom: var(--ap-stroke) solid var(--ap-ink) !important; border-radius: 0 !important;
  display: flex; align-items: center; justify-content: center;
}
.booklet-cover { border: var(--ap-stroke) solid var(--ap-ink) !important; }
:is(.philo-card__img-wrap, .process-card__img-wrap) > img,
.booklet-cover__img, .contact-studio-banner img {
  width: auto !important; height: 84% !important; max-width: 70%; object-fit: contain !important; padding: 0 !important;
  filter: none; transition: transform .45s cubic-bezier(.2, .8, .2, 1) !important;
}
.process-card__img-wrap > img { height: 70% !important; }
.contact-studio-banner img { width: 100% !important; height: auto !important; max-width: 100%; padding: 14px !important; }
.booklet-cover__gradient { display: none !important; }
.booklet-cover__art-text { color: var(--ap-ink) !important; font-family: var(--ap-display) !important; font-weight: 300 !important; letter-spacing: .1em; text-transform: uppercase; text-shadow: none !important; font-size: clamp(14px, 1.6vw, 18px) !important; }
.booklet-cover__tag { background: var(--ap-card) !important; border: var(--ap-stroke) solid var(--ap-ink); backdrop-filter: none !important; box-shadow: none !important; font-family: var(--ap-display); font-weight: 300; }
.philo-card:hover .philo-card__img-wrap > img, .process-card:hover .process-card__img-wrap > img, .booklet-card:hover .booklet-cover__img { transform: rotate(-4deg) translateY(-4px) scale(1.03) !important; }
.philo-img-badge { background: var(--ap-card) !important; color: var(--ap-ink) !important; border: var(--ap-stroke) solid var(--ap-ink); backdrop-filter: none !important; font-family: var(--ap-display); font-weight: 300; border-radius: 999px; }

/* 상단 SNS 원형 버튼 (전화 아이콘이 배경에 묻혀 빈 원으로 보이던 문제) */
.sns-badge svg { color: var(--ap-ink); }
.sns-badge--call, .sns-badge--call svg { color: var(--ap-ink) !important; }
.sns-badge--call:hover, .sns-badge--call:hover svg { color: var(--ap-canvas) !important; }

/* ==========================================================================
   15. 보정 (1차 화면 점검 결과)
   ========================================================================== */
/* 상단 메뉴: 새 서체의 넓은 자간으로 1280px에서 JOIN 버튼이 밀려나던 문제 */
.nav__links { gap: clamp(10px, 1.25vw, 20px) !important; }
.nav__link { letter-spacing: .08em; font-size: 11px; white-space: nowrap; }
.logo__brand-art { letter-spacing: .1em; font-size: 14px; }
.logo__img { height: 34px; }
.nav__right-group, .nav__actions { gap: 8px; }
@media (max-width: 1180px) { .nav__link { font-size: 10.5px; letter-spacing: .05em; } .nav__social-icons { display: none; } }

/* 히어로 제목이 두 줄로 깨지지 않도록 */
.ap-hero__title { font-size: clamp(40px, 6.6vw, 96px); letter-spacing: .03em; white-space: nowrap; }
.ap-hero__title small { white-space: normal; }

/* 타원 카드는 바탕(canvas)과 같은 색이라 먹 선으로 윤곽을 줍니다 */
:is(.ap-fan__card, .ap-kit__art) > img:not([style]),
.ap-fan__card img { filter: drop-shadow(1px 0 0 var(--ap-ink)) drop-shadow(-1px 0 0 var(--ap-ink)) drop-shadow(0 1px 0 var(--ap-ink)) drop-shadow(0 -1px 0 var(--ap-ink)); }
.ap-kit:nth-child(2) { background: var(--ap-frame-linen) center / 100% 100% no-repeat; }
.ap-kit__art img[src*="cards/"] { height: 170px; }

/* 영상이 아직 열리지 않을 때도 빈 상자로 보이지 않도록 */
.ap-video__box { background: var(--ap-linen) url("assets/illust-scene.png") center / contain no-repeat; }
.ap-video__box video { position: relative; background: transparent; }

/* 넓은 Display 서체(Lexend Exa)를 메뉴에서 쓰므로 크기·자간·여백을 줄여 한 줄에 맞춥니다 */
.nav__links { gap: clamp(2px, .5vw, 8px) !important; }
.nav__link { font-size: 10px; letter-spacing: .05em; padding: 4px 5px; }
.nav__actions .btn, .nav__actions a { font-family: var(--ap-sans); font-size: 12px; letter-spacing: 0; padding-inline: 14px; }
@media (max-width: 1180px) { .nav__link { font-size: 9.5px; letter-spacing: .03em; padding: 4px 4px; } }
.nav__link.nav__link--store, .nav__link--store { color: var(--ap-ink) !important; }

/* 히어로: 서체 글자 대신 공식 워드마크(로고는 변형·재작화 금지) */
.ap-hero__wordmark { display: block; width: min(560px, 100%); height: auto; margin: 0 0 var(--ap-space-3); }
.ap-hero__title { font-size: initial; line-height: 1; letter-spacing: 0; white-space: normal; }

/* 띠: 흐르는 방식은 좌우 끝에서 글자가 잘려 보여 가운데 정렬된 고정 줄로 변경 */
.ap-marquee__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 0; padding-inline: var(--ap-space-3); }
.ap-marquee__item { padding: 14px clamp(10px, 2vw, 26px); font-size: clamp(12px, 1.6vw, 18px); gap: clamp(8px, 1.4vw, 18px); }
.ap-marquee__item img { height: clamp(20px, 2.4vw, 28px); }

/* ==========================================================================
   16. 모바일 최적화 (360 / 390 / 430px 점검 결과)
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, svg { max-width: 100%; }

@media (max-width: 640px) {
  body { font-size: 15px; }
  /* 터치 영역 44px 기준 */
  .sns-badge { width: 40px !important; height: 40px !important; }
  .logo { min-height: 44px; }
  .btn, .btn-sm { min-height: 44px; }
  .story-cat-btn, .preset-chip { min-height: 40px; }
  .footer__phone-row a { display: inline-block; padding: 10px 4px; }
  .mobile-tab-btn { min-height: 52px; }
  /* 너무 작은 글자(9~10px) 상향 */
  .logo__brand-sub { font-size: 10px; }
  .mobile-tab-btn__label { font-size: 11px; }
  .view-archive-tag, .view-archive-tag strong { font-size: 11px; }
  .footer__copy-row, .footer__addr-row { font-size: 12px; }
  .tag-badge, .hero-badge-pill { font-size: 11px; }
  /* 홈 */
  .ap-kit__art { gap: 6px; flex-wrap: nowrap; min-height: 0; }
  .ap-kit__art img { height: auto !important; width: calc((100% - 12px) / 3); max-height: 150px; object-fit: contain; flex: 0 1 auto; min-width: 0; }
  .ap-kit__art img:first-child:not([src*="cards/"]) { width: 36%; }
  .ap-kit { min-height: 0; padding: var(--ap-space-4) var(--ap-space-3); }
  .ap-video { padding: var(--ap-space-3); }
  .ap-video__copy { padding: var(--ap-space-2) 0 0; }
  .ap-tile { padding: var(--ap-space-3) var(--ap-space-2); }
  .ap-tile img { height: 44px; }
  .ap-index li { padding: 18px 4px; }
  .ap-block { padding-top: var(--ap-space-5); }
  .ap-head { margin-bottom: var(--ap-space-4); }
  .ap-marquee__item { padding: 10px 12px; }
  /* 스토리(랄라) 말풍선·헤더 넘침 */
  .two-col__copy, .story-copy, .story-lalla-header, .story-lalla-character, .lalla-speech-bubble { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .story-lalla-header { flex-wrap: wrap; gap: 12px; }
  .lalla-avatar-img { max-width: 100%; height: auto; }
  .lalla-speech-bubble { white-space: normal; overflow-wrap: anywhere; }
  .section { padding-block: var(--ap-space-5); }
  .view-top-bar { flex-wrap: wrap; gap: 8px; }
  .art-title, .sec-head .art-title { font-size: clamp(26px, 8vw, 36px); letter-spacing: .1em; }
}
/* 터치 기기: 호버 전용 움직임 제거 (눌렀을 때 카드가 튀지 않게) */
@media (hover: none) {
  :is(.card-item, .philo-card, .process-card, .booklet-card, .ap-kit, .ap-tile, .ap-index li):hover { transform: none !important; }
  .ap-fan:hover .ap-fan__card:nth-child(n) { transform: revert; }
}

/* 모바일 메뉴 버튼·하단 탭을 새 스타일로 */
.hamburger { background: var(--ap-card) !important; border: var(--ap-stroke) solid var(--ap-ink) !important; border-radius: 999px !important; width: 44px; height: 44px; box-shadow: none !important; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; }
.hamburger span { background: var(--ap-ink) !important; height: 1.5px; width: 18px; border-radius: 0; display: block; }
.mobile-bottom-tab { background: var(--ap-canvas) !important; border-top: var(--ap-stroke) solid var(--ap-ink) !important; box-shadow: none !important; backdrop-filter: none !important; padding-bottom: env(safe-area-inset-bottom); }
.mobile-tab-btn { color: var(--ap-ink-soft) !important; font-family: var(--ap-sans); }
.mobile-tab-btn.active { color: var(--ap-ink) !important; font-weight: 600; }
.mobile-tab-btn.active::before, .mobile-tab-btn.active .mobile-tab-btn__icon { background: transparent !important; }
.mobile-tab-btn.active .mobile-tab-btn__icon svg { color: var(--ap-ink) !important; stroke: var(--ap-ink); }
body { padding-bottom: env(safe-area-inset-bottom); }

/* 모바일 히어로: 이미지가 한 화면을 다 차지하지 않도록 */
@media (max-width: 640px) {
  .ap-hero { padding: var(--ap-space-4) 0 var(--ap-space-4); }
  .ap-stage { min-height: 300px; margin-top: var(--ap-space-2); }
  .ap-fan__card { width: 31vw; }
  .ap-stage__peek { width: 56px; left: 0; }
  .ap-stage__sticker { width: 104px; }
  .ap-hero__wordmark { width: min(420px, 100%); }
}

@media (max-width: 640px) { .ap-head__guide, .ap-kit p, .ap-video__copy p { line-height: 1.85; } }

/* 스토어 주소가 아직 없을 때: 눌리지 않는 "오픈 예정" 상태 */
.is-soon, [aria-disabled="true"].smartstore-card-btn, [aria-disabled="true"].smartstore-main-btn { pointer-events: none; cursor: default; background: transparent !important; color: var(--ap-ink-soft) !important; border: var(--ap-stroke) dashed var(--ap-ink) !important; }

/* ==========================================================================
   17. 인스타그램 카드 (스토리 대표 플레이어)
   ========================================================================== */
.ig-card { width: 100%; max-width: 540px; margin: 0 auto; background: var(--ap-frame) center / 100% 100% no-repeat; padding: 14px; box-sizing: border-box; }
.ig-card__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 2px 4px 12px; }
.ig-card__acct { font-family: var(--ap-display); font-weight: 300; font-size: 11px; letter-spacing: .1em; }
.ig-card__open { font-family: var(--ap-sans); font-weight: 600; font-size: 12.5px; color: var(--ap-ink); border-bottom: var(--ap-stroke) solid var(--ap-ink); text-decoration: none; padding: 8px 0 2px; }
.ig-card__stage { position: relative; background: var(--ap-linen); overflow: hidden; }
.ig-card__poster { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ig-card__play { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); min-height: 44px; padding-inline: 26px; }
.ig-card__note { margin: 0; padding: 10px 12px; font-size: 12.5px; font-weight: 300; color: var(--ap-ink-soft); text-align: center; background: var(--ap-card); }

/* ==========================================================================
   18. 남은 옛 스타일 정리 (그림자·둥근 상자·그라데이션) — 화면 점검 결과
   ========================================================================== */
:is(.philo-img-badge, .booklet-cover, .store-item-card, .two-col, .story-two-col, .contact-studio-banner, .btn-insta, .lalla-speech-bubble,
    .story-featured-card, .cards-showcase-wrap, .story-cat-btn, .smartstore-main-btn, .smartstore-card-btn, .res-card, .gal-item, .tag-badge) { box-shadow: none !important; }
:is(.cards-showcase-wrap, .story-featured-card, .store-item-card, .res-card, .gal-item) {
  background: var(--ap-frame) center / 100% 100% no-repeat !important; border: 0 !important; border-radius: 0 !important;
}
:is(#view-process, #view-worksheet, #view-gallery, #view-store, #view-contact) img:not(.ig-card__poster) { border-radius: 0 !important; }
/* 인라인 style로 둥글게 만든 안내 상자 → 먹 선 상자 */
:is(#view-story .story-copy, #view-story .two-col__copy, #view-contact) div[style*="border-radius"] {
  border-radius: 0 !important; box-shadow: none !important; border: var(--ap-stroke) solid var(--ap-ink) !important; background: var(--ap-card) !important;
}
/* 어두운 상담 패널 안의 안내 상자: 흰 글씨 유지(위 규칙의 밝은 배경 덮어쓰기 방지) */
#view-contact .contact-action-panel div[style*="border-radius"] {
  background: transparent !important; border: var(--ap-stroke) solid var(--ap-canvas) !important;
}
#view-contact .contact-action-panel div[style*="border-radius"] * { color: var(--ap-canvas) !important; }
#view-contact .contact-action-panel div[style*="border-radius"] span:first-child:empty { display: none; }
/* 인스타 그라데이션 버튼 → 먹 윤곽 버튼 (4색 원칙·그라데이션 금지) */
.btn-insta, .btn-insta:hover { background: transparent !important; color: var(--ap-ink) !important; border: var(--ap-stroke) solid var(--ap-ink) !important; }
.btn-insta:hover { background: var(--ap-ink) !important; color: var(--ap-canvas) !important; }
.story-cat-btn { background: var(--ap-card) !important; color: var(--ap-ink) !important; border: var(--ap-stroke) solid var(--ap-ink) !important; }
.story-cat-btn.active { background: var(--ap-ink) !important; color: var(--ap-canvas) !important; }
.lalla-speech-bubble { background: var(--ap-card) !important; border: var(--ap-stroke) solid var(--ap-ink) !important; color: var(--ap-ink) !important; }

/* ==========================================================================
   19. 앙파티 스튜디오 · 디자인 제작 탭 (studio-design.js)
   ========================================================================== */
.apd-wrap { padding: var(--ap-space-3); }
.apd-head h3 { margin: 0 0 6px; font-family: var(--ap-display); font-weight: 300; letter-spacing: .12em; font-size: 20px; text-transform: uppercase; }
.apd-head p { margin: 0 0 var(--ap-space-3); font-weight: 200; font-size: 14px; }
.apd-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--ap-space-3); }
.apd-tab { min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--ap-card); color: var(--ap-ink); border: var(--ap-stroke) solid var(--ap-ink); font-family: var(--ap-sans); font-size: 13px; cursor: pointer; }
.apd-tab.is-on { background: var(--ap-ink); color: var(--ap-canvas); }
.apd-form { display: grid; gap: 12px; max-width: 760px; margin-bottom: var(--ap-space-4); }
.apd-form label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 400; color: var(--ap-ink-soft); }
.apd-grid { display: flex; flex-wrap: wrap; gap: var(--ap-space-3); align-items: flex-start; }
.apd-fig { margin: 0; display: grid; gap: 8px; justify-items: center; }
.apd-prev { position: relative; overflow: hidden; border: var(--ap-stroke) solid var(--ap-ink); background: var(--ap-canvas); }
.apd-prev .apd-board { position: absolute; left: 0; top: 0; transform-origin: top left; }
.apd-rule { margin-top: var(--ap-space-3); font-size: 12px; font-weight: 300; color: var(--ap-ink-soft); }

/* 작업 화면(1:1 크기) — 모든 값이 px 고정 */
.apd-board { position: relative; overflow: hidden; background: #f4f3e8; color: #1d1d1b; font-family: Paperlogy, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; box-sizing: border-box; }
.apd-board *, .apd-board *::before { box-sizing: border-box; }
.apd-pad { position: relative; padding: 90px 72px; z-index: 2; }
.apd-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 2; }
.apd-h1 { margin: 0; font-family: Paperlogy, sans-serif; font-weight: 600; line-height: 1.22; letter-spacing: -.01em; color: #1d1d1b; word-break: keep-all; }
.apd-p { margin: 0; font-weight: 300; color: #1d1d1b; word-break: keep-all; }
.apd-label { font-family: "Lexend Exa", Paperlogy, sans-serif; font-weight: 300; letter-spacing: .12em; text-transform: uppercase; color: #1d1d1b; }
.apd-pager { position: absolute; right: 56px; top: 56px; font-family: "Lexend Exa", Paperlogy, sans-serif; font-weight: 300; font-size: 24px; letter-spacing: .12em; z-index: 3; }
.apd-card { position: absolute; display: block; z-index: 1; }
.apd-peek { position: absolute; z-index: 3; }
.apd-dots { position: absolute; z-index: 0; display: block; }
.apd-hl { background-image: linear-gradient(transparent 62%, #fef0cf 62%); }
.apd-foot { position: absolute; left: 0; right: 0; bottom: 90px; text-align: center; z-index: 3; }
.apd-frame { position: relative; background: var(--ap-frame) center / 100% 100% no-repeat; }
.apd-checks { list-style: none; margin: 14px 0 0; padding: 0; font-weight: 200; font-size: 15px; }
.apd-checks li { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.apd-box { flex: none; width: 13px; height: 13px; border: 1.33px solid #1d1d1b; }
.apd-oval-blank { margin-top: 14px; width: 210px; aspect-ratio: 7 / 10; border-radius: 50%; border: 1.33px solid #1d1d1b; background: #fff; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 36px; }
.apd-note { position: absolute; left: 56px; right: 56px; top: 1040px; font-size: 12px !important; font-weight: 300; color: #58595b; border-top: .67px solid #1d1d1b; padding-top: 12px; }

/* 스토리가 비어 있을 때 안내 카드 */
.ig-card__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 36px 20px; min-height: 380px; background: var(--ap-linen); text-align: center; }
.ig-card__empty-card { width: 150px; height: auto; border: 2px solid var(--ap-ink); border-radius: 50%; }
.ig-card__empty p { margin: 0; font-weight: 300; font-size: 15px; line-height: 1.9; }

/* 갤러리: 인스타 대표 카드 · 등록 방식 버튼 */
.gal-item__img { position: relative; }
.gal-ig-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-ig-cover.is-placeholder { object-fit: contain; padding: 22px; background: var(--ap-linen); aspect-ratio: 4 / 5; }
.gal-ig-badge { position: absolute; left: 10px; top: 10px; background: var(--ap-card); color: var(--ap-ink); border: var(--ap-stroke) solid var(--ap-ink); border-radius: 999px; padding: 2px 10px; font-family: var(--ap-display); font-weight: 300; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.preset-chip.is-on { background: var(--ap-ink) !important; color: var(--ap-canvas) !important; }
.lightbox-img-wrap iframe { box-shadow: none !important; border-radius: 0 !important; }

/* 갤러리·스토어: 카드가 옆 카드 높이로 늘어나 프레임 아래가 비어 보이지 않게 */
.gallery-grid, .store-grid { align-items: start; }
.gal-item { align-self: start; }

/* 홈 키트 카드: 로고가 합성된 키트 연출컷 (4:3) */
.ap-kit__photo { display: block; width: 100%; height: auto; margin-top: auto; border: var(--ap-stroke) solid var(--ap-ink); aspect-ratio: 4 / 3; object-fit: cover; }
.ap-kit__photo + .ap-kit__more { margin-top: var(--ap-space-3); }

/* 히어로 문구 간격 */
.ap-hero__title small { margin-top: 28px; margin-bottom: 8px; }
.ap-hero__cta { margin-top: var(--ap-space-4); }

/* 스토어 제목·메뉴 링크: 인라인 연초록 글씨 → 먹색 (명암 대비 확보) */
#view-store .art-title, .mobile-menu__link[style*="smartstore"], .mobile-menu__link[style*="smartstore"] span { color: var(--ap-ink) !important; }

/* ==========================================================================
   20. 은은한 움직임 — 느리고 작게. 그림자·번쩍임 없음. 동작 줄이기 설정 시 모두 끔
   ========================================================================== */
.reveal-up { transform: translateY(14px); transition-duration: .9s; }
.reveal-up.is-visible { transform: none; }

@keyframes ap-float   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ap-wobble  { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(-3deg); } }
@keyframes ap-drift   { from { background-position: 0 0; } to { background-position: 14px 14px; } }
@keyframes ap-bob     { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(2deg); } }

.ap-stage__peek    { animation: ap-float 7s ease-in-out infinite; }
.ap-stage__sticker { animation: ap-wobble 9s ease-in-out infinite; }
.ap-stage__dots    { animation: ap-drift 30s linear infinite; }
.ap-head__doodle   { animation: ap-bob 8s ease-in-out infinite; }

/* 카드·타일: 마우스를 올리면 아주 살짝 들뜨고 기울어짐 */
@media (hover: hover) {
  .ap-tile, .ap-kit, :is(.res-card, .gal-item, .store-item-card, .card-item, .philo-card, .process-card, .booklet-card) {
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .ap-tile:hover, :is(.res-card, .gal-item, .store-item-card, .card-item, .philo-card, .process-card, .booklet-card):hover { transform: translateY(-4px) rotate(-.4deg); }
  .ap-kit:hover { transform: translateY(-3px); }
}
/* 버튼: 누르면 살짝 눌림 */
.btn:active, .ap-btn:active, .contact-btn-action:active { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .ap-stage__peek, .ap-stage__sticker, .ap-stage__dots, .ap-head__doodle { animation: none; }
  .reveal-up { transform: none; transition-duration: .01s; }
  .ap-tile:hover, .ap-kit:hover { transform: none; }
}
@media (max-width: 640px) {
  .ap-stage__dots, .ap-head__doodle { animation: none; }
}

/* 터치 영역: 모바일에서 닫기·비밀번호 보기 버튼은 최소 44px */
@media (max-width: 640px) {
  .modal__close, .pw-toggle-btn { min-width: 44px; min-height: 44px; }
}

/* 스토어 비어 있을 때 안내 */
.store-empty { grid-column: 1 / -1; padding: var(--ap-space-4, 40px) var(--ap-space-3, 24px); text-align: center; border: var(--ap-stroke) dashed var(--ap-ink); }
.store-empty strong { display: block; font-size: 18px; margin-bottom: 8px; }
.store-empty p { margin: 0; color: var(--ap-ink-soft); }

/* ==========================================================================
   21. 관리자 확장(문의 폼·이력·순서·하단 방침)
   ========================================================================== */
.inq-box { margin-top: var(--ap-space-3, 24px); padding: var(--ap-space-3, 24px); border: var(--ap-stroke) solid var(--ap-ink); background: var(--ap-card); }
.inq-box h3 { margin: 0 0 6px; font-weight: 600; }
.inq-note { margin: 0 0 14px; color: var(--ap-ink-soft); font-size: 14px; }
.inq-box form { display: grid; gap: 6px; }
.inq-box label { font-weight: 600; font-size: 13px; margin-top: 8px; }
.inq-box input:not([type=checkbox]), .inq-box textarea { width: 100%; padding: 10px 12px; border: var(--ap-stroke) solid var(--ap-ink); background: var(--ap-canvas); font: inherit; color: var(--ap-ink); border-radius: 0; }
.inq-box .inq-agree { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: 12.5px; line-height: 1.5; }
.inq-box .inq-agree input { margin-top: 3px; }
.inq-box button[type=submit] { margin-top: 12px; min-height: 48px; }
#inq-status { min-height: 1.4em; margin: 6px 0 0; font-size: 13px; }
.inq-row { border: 1px solid var(--ap-ink); padding: 12px 14px; margin-bottom: 10px; }
.inq-row.is-done { opacity: .6; }
.inq-row p { margin: 6px 0; font-size: 14px; }
.inq-time { font-size: 12px; color: var(--ap-ink-soft); }
.inq-actions { display: flex; gap: 8px; }
.hist-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--ap-ink); font-size: 13px; }
.ap-move { display: inline-flex; flex-direction: column; margin-right: 8px; }
.ap-move button { min-width: 32px; min-height: 22px; border: 1px solid var(--ap-ink); background: #fff; font-size: 10px; cursor: pointer; line-height: 1; }
#footer-legal { display: flex; justify-content: center; gap: 16px; margin-top: 12px; }
#footer-legal button { background: none; border: 0; border-bottom: 1px solid currentColor; padding: 4px 0; font: inherit; font-size: 13px; color: var(--ap-ink-soft); cursor: pointer; min-height: 32px; }
#biz-info-line { max-width: 720px; margin: 10px auto 0; font-size: 12px; line-height: 1.7; text-align: center; color: var(--ap-ink-soft); }
.legal-body h4 { margin: 16px 0 4px; } .legal-body p, .legal-body li { font-size: 14px; line-height: 1.7; }

/* ==========================================================================
   22. 갤러리 상단 흐르는 작품 띠
   ========================================================================== */
.gal-marquee { display: grid; gap: 12px; margin: var(--ap-space-3, 24px) 0 var(--ap-space-4, 40px); overflow: hidden; }
.gal-marquee__row { overflow: hidden; }
.gal-marquee__track { display: flex; gap: 12px; width: max-content; animation: gal-flow-l 80s linear infinite; }
.gal-marquee__row:hover .gal-marquee__track, .gal-marquee__row:focus-within .gal-marquee__track { animation-play-state: paused; }
.gal-marquee__tile { flex: 0 0 auto; height: clamp(120px, 20vw, 200px); aspect-ratio: 7 / 10; padding: 0; border: var(--ap-stroke) solid var(--ap-ink); background: var(--ap-card); cursor: pointer; overflow: hidden; }
.gal-marquee__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes gal-flow-l { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .gal-marquee__row { overflow-x: auto; }
  .gal-marquee__track { animation: none; }
}

/* ==========================================================================
   23. 랄라 말풍선: 줄바꿈 없이 한두 줄, 모바일은 캐릭터 옆에 가로 배치(오른쪽 빈 공간 제거)
   ========================================================================== */
.lalla-speech-bubble br { display: none !important; }
.lalla-speech-bubble { white-space: normal !important; max-width: none !important; width: max-content !important; line-height: 1.4 !important; }
#view-story .story-lalla-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; overflow: visible !important; }
#view-story .story-lalla-character { flex-direction: row !important; align-items: center !important; width: auto !important; max-width: 100% !important; gap: 12px; order: 2; }
#view-story .story-lalla-character .lalla-avatar-img { width: 72px !important; }
#view-story .story-lalla-character .lalla-speech-bubble { margin: 0 !important; font-size: 12.5px !important; padding: 8px 14px !important; max-width: calc(100vw - 150px) !important; width: auto !important; }
#view-story .story-lalla-character .lalla-speech-bubble::before, #view-story .story-lalla-character .lalla-speech-bubble::after { display: none; }
@media (min-width: 900px) {
  #view-story .story-lalla-header { flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; }
  #view-story .story-lalla-character { flex-direction: column !important; width: auto !important; order: 0; }
  #view-story .story-lalla-character .lalla-avatar-img { width: 105px !important; }
  #view-story .story-lalla-character .lalla-speech-bubble { max-width: 220px !important; }
}

/* 접근성: 본문 바로가기(키보드로 Tab을 누르면 나타남) */
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 10000; padding: 10px 16px; background: var(--ap-ink); color: var(--ap-canvas); text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 12px; }
[role="button"][tabindex]:focus-visible, .ap-tile:focus-visible, .ap-kit:focus-visible { outline: 3px solid var(--ap-ink); outline-offset: 3px; }
.apd-archive { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.apd-archive select { flex: 1 1 200px; min-width: 0; height: 36px; padding: 0 8px; }

/* ==========================================================================
   24. 모바일 레이아웃 정리 (상단 바 한 줄 · 히어로 가운데 정렬 · 철학 카드 여백 · 띠 2줄)
   ========================================================================== */
@media (max-width: 640px) {
  /* 상단 바: ← WORK 와 화면 이름을 한 줄에 */
  .view-top-bar { flex-wrap: nowrap !important; justify-content: space-between; align-items: center; gap: 8px !important; padding-block: 8px; }
  .back-to-work { flex: 0 0 auto; min-height: 40px; padding: 0 14px !important; font-size: 11px !important; letter-spacing: .1em; }
  .view-archive-tag { flex: 0 1 auto; min-width: 0; padding: 0 12px !important; min-height: 40px; display: inline-flex; align-items: center; font-size: 9.5px !important; letter-spacing: .06em !important; white-space: nowrap; overflow: hidden; }
  .view-archive-tag strong { font-size: 9.5px !important; letter-spacing: .06em !important; }

  /* 메인 소개: 가운데 정렬로 좌우 균형 */
  .ap-hero__copy, .ap-hero__grid > div:first-child { text-align: center; }
  .ap-hero__kicker { display: flex; justify-content: center; gap: 6px; margin: 0 auto var(--ap-space-3); font-size: 11px; letter-spacing: .08em; }
  .ap-hero__wordmark { margin-inline: auto; }
  .ap-hero__cta { justify-content: center; }
  .ap-hero__cta .btn { flex: 1 1 140px; max-width: 220px; }
  .ap-hero__title small, .ap-hero__tag { text-align: center; margin-inline: auto; }

  /* 철학·과정 카드: 글이 테두리에 붙지 않도록 안쪽 여백, 이미지 이름표는 왼쪽 아래 */
  .philo-card__body, .process-card__body { padding: 20px 22px 24px !important; }
  .philo-num { align-self: flex-start; padding: 6px 14px !important; margin-bottom: 12px; }
  .philo-card__img-wrap { justify-content: center; }
  .philo-img-badge { left: 12px !important; right: auto !important; bottom: 12px !important; }

  /* 흐르는 띠: 3개씩 2줄, 같은 간격으로 */
  .ap-marquee__track { display: grid !important; grid-template-columns: repeat(3, 1fr); width: 100% !important; padding-inline: 8px !important; row-gap: 0; }
  .ap-marquee__item { justify-content: center; padding: 12px 4px !important; gap: 6px !important; font-size: 11.5px !important; letter-spacing: .08em !important; }
  .ap-marquee__item img { height: 20px !important; }
}
.philo-img-badge img { width: 14px !important; height: 14px !important; max-width: none !important; padding: 0 !important; transform: none !important; }

/* ==========================================================================
   25. 모바일 카드 목록: 한 줄에 2개씩 촘촘하게 (워크시트·갤러리·스토어)
   ========================================================================== */
@media (max-width: 768px) {
  #view-worksheet .card-grid, #view-gallery .gallery-grid, #view-store .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  /* 카드 안쪽 여백·글자 줄이기 */
  :is(.res-card, .gal-item, .store-item-card) { padding: 8px !important; min-width: 0; }
  :is(.res-card__img, .store-item-card__img-wrap, .gal-item__img) { padding: 6px !important; aspect-ratio: 3 / 4 !important; }
  .res-card__img img { object-fit: contain; }
  :is(.res-card__body, .store-item-card__body, .gal-caption) { padding: 10px 6px 6px !important; gap: 6px; }
  :is(.res-card, .store-item-card, .gal-item) :is(h3, h4) { font-size: 13px !important; line-height: 1.35 !important; margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  :is(.res-card, .store-item-card, .gal-item) p { font-size: 11.5px !important; line-height: 1.45 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 !important; }
  .res-card .tag-badge, .gal-tag { font-size: 9.5px !important; padding: 3px 8px !important; letter-spacing: .04em; }
  .res-card__body > div:last-child, .res-card .price-box + * { font-size: 11px; }
  .res-card__body [style*="border-top"] { display: none; }              /* "A4 고화질 PDF" 안내 줄(버튼과 중복) */
  .res-card__foot { padding: 0 6px 6px !important; }
  .res-card__foot .btn, .smartstore-card-btn { min-height: 40px !important; padding: 0 8px !important; font-size: 12px !important; width: 100%; }
}

/* ==========================================================================
   26. 캐릭터의 은은한 움직임 (랄라·훔쳐보는 소녀·원장 일러스트). 그림자 없음, 동작 줄이기 설정 시 끔
   ========================================================================== */
@keyframes ap-peek    { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-1.2deg); } }
@keyframes ap-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }
@keyframes ap-hello   { 0%, 100% { transform: rotate(0); } 8% { transform: rotate(-3deg); } 16% { transform: rotate(2.5deg); } 24% { transform: rotate(-2deg); } 32% { transform: rotate(0); } }

.view-peek-girl-img { animation: ap-peek 6s ease-in-out infinite; transform-origin: 50% 100%; }
.director-img-frame > img { animation: ap-breathe 8s ease-in-out infinite; transform-origin: 50% 70%; }
.lalla-waving-img { filter: none !important; transform-origin: 50% 100%; animation: lallaWave 3.5s ease-in-out infinite, ap-hello 9s ease-in-out 2s infinite; }
.lalla-avatar-img { filter: none !important; }
@media (hover: hover) {
  .story-lalla-character:hover .lalla-avatar-img, .worksheet-lalla-badge:hover .lalla-waving-img { transform: scale(1.06) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .view-peek-girl-img, .director-img-frame > img, .lalla-waving-img, .lalla-avatar-img { animation: none !important; }
}
@media (max-width: 640px) { .director-img-frame > img { animation: none; } }


/* ==========================================================================
   27. 모바일 첫 화면: 로고 + 일러스트만 (소개 글·버튼·카드는 아래로 스크롤하면 보임)
   ========================================================================== */
.ap-cover { display: none; }
@media (max-width: 640px) {
  .ap-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
    min-height: calc(100vh - 140px); min-height: calc(100svh - 140px); padding: 24px 16px 40px; position: relative; }
  .ap-cover__logo { width: min(68vw, 280px); height: auto; display: block; }
  .ap-cover__art { height: min(52svh, 480px); max-height: 52vh; width: auto; display: block; }
  .ap-cover__more { position: absolute; bottom: 12px; left: 50%; margin-left: -12px; color: var(--ap-ink); animation: ap-nudge 2.4s ease-in-out infinite; }
  /* 위 로고와 겹치지 않도록 본문 쪽 워드마크·키커는 숨김(제목 글자는 접근성용으로 유지) */
  .ap-hero__wordmark { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .ap-hero { padding-top: var(--ap-space-3); }
  .ap-hero__kicker { margin-top: 0; }
}
@keyframes ap-nudge { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(6px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ap-cover__more { animation: none; } }

/* ==========================================================================
   28. 차분한 표지 스타일을 전체로: 넉넉한 여백 · 가운데 정렬 · 선 일러스트 한 점
   ========================================================================== */
/* 홈 표지: PC에서도 로고 + 가로 일러스트 */
@media (min-width: 641px) {
  .ap-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; min-height: calc(100vh - 90px); min-height: calc(100svh - 90px); padding: 32px 24px 56px; position: relative; }
  .ap-cover__logo { width: min(420px, 60vw); height: auto; display: block; }
  .ap-cover__art { width: min(760px, 78vw); max-height: 46vh; height: auto; object-fit: contain; display: block; }
  .ap-cover__more { position: absolute; bottom: 16px; left: 50%; margin-left: -12px; color: var(--ap-ink); animation: ap-nudge 2.4s ease-in-out infinite; }
  .ap-hero__wordmark { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
}

/* 각 화면 머리말: 위쪽 선 일러스트 한 점 + 넉넉한 숨 */
.sec-head.center { padding-top: clamp(24px, 5vw, 56px); padding-bottom: clamp(24px, 4vw, 48px); max-width: 720px; margin-inline: auto; }
.sec-head.center::before { content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 14px; background: center / contain no-repeat; opacity: .9; }
#view-about .sec-head.center::before   { background-image: url("assets/icons/icon-magnifier.png"); }
#view-process .sec-head.center::before { background-image: url("assets/icons/icon-crayon.png"); }
#view-program .sec-head.center::before { background-image: url("assets/icons/icon-frame.png"); }
#view-gallery .sec-head.center::before { background-image: url("assets/icons/icon-frame.png"); }
#view-store .sec-head.center::before   { background-image: url("assets/icons/icon-pin.png"); }
#view-contact .sec-head.center::before { background-image: url("assets/icons/icon-question.png"); }
#view-philosophy .sec-head.center::before, #view-worksheet .sec-head.center::before, #view-story .sec-head.center::before { display: none; }  /* 이미 캐릭터가 있음 */
.sec-head.center h2 { font-weight: 600; letter-spacing: -.01em; }
.sec-head.center p { color: var(--ap-ink-soft); }

@media (max-width: 640px) {
  .view-archive-tag { display: none !important; }                          /* 장식용 태그는 모바일에서 숨겨 한결 깔끔하게 */
  .view-top-bar { border-bottom: 0 !important; padding-block: 12px; }
  .back-to-work { border: 0 !important; background: transparent !important; padding: 0 !important; min-height: 44px; }
}

/* ==========================================================================
   29. 1단계 — 위계 정리·배경 통일·읽기 쉬운 글자 (전문 디자이너 점검 반영)
   ========================================================================== */
/* 화면마다 배경이 달라 보이던 것을 Snow White 하나로 */
.view-section, #view-gallery, #view-store, #view-contact, #view-worksheet, #view-story { background: var(--ap-canvas) !important; background-image: none !important; }

/* 머리말 단계 줄이기: 영문 제목 + 큰 제목 + 설명 한 줄 (작은 회색 부제는 숨김) */
.sec-head.center .art-sub-guide { display: none; }
.sec-head.center:has(.view-peek-girl-img)::before { display: none; }
.sec-head.center .art-title { font-size: clamp(34px, 6.4vw, 72px); letter-spacing: .1em; margin-bottom: 14px; }
.sec-head.center h2 { font-size: clamp(20px, 3.2vw, 30px); line-height: 1.4; margin: 0 0 10px; }
.sec-head.center p { font-size: clamp(14px, 1.7vw, 16px); line-height: 1.75; color: var(--ap-ink-soft); font-weight: 300; max-width: 34em; margin-inline: auto; }

/* 작은 영문 라벨: 최소 12px, 자간 줄이기 */
.tag-badge, .gal-tag, .view-archive-tag, .view-archive-tag strong, .philo-img-badge, .ap-marquee__item, .philo-num { font-size: max(12px, 1em); letter-spacing: .08em; }
@media (max-width: 640px) {
  .tag-badge, .gal-tag, .philo-img-badge { font-size: 12px !important; }
  .ap-marquee__item { font-size: 12px !important; }
  .res-card .tag-badge, .gal-tag { font-size: 11.5px !important; }
}

/* ==========================================================================
   30. 2단계 — 화면 머리말 스티커 원 · PC 메뉴 가독성 · 모바일 상담 탭 강조
   ========================================================================== */
/* 머리말의 작은 영문 알약(제목과 중복)은 숨김 */
.sec-head.center > .tag-badge, .sec-head.center > .hero-badge-pill, .sec-head.center > .badge-wrap { display: none; }

/* 선 아이콘을 색 원(스티커) 위에: 화면마다 대표색 1개 */
.sec-head.center::before { width: 88px; height: 88px; border-radius: 50%; background-size: 58% auto; background-position: center; background-repeat: no-repeat; background-color: var(--sec-c, var(--ap-olive)); margin-bottom: 18px; opacity: 1; }
#view-about    { --sec-c: var(--ap-olive); }
#view-process  { --sec-c: var(--ap-orange); }
#view-program  { --sec-c: var(--ap-purple); }
#view-gallery  { --sec-c: var(--ap-orange); }
#view-store    { --sec-c: var(--ap-olive); }
#view-contact  { --sec-c: var(--ap-purple); }
.sec-head.center::before { background-image: var(--sec-icon); }
#view-about    { --sec-icon: url("assets/icons/icon-magnifier.png"); }
#view-process  { --sec-icon: url("assets/icons/icon-crayon.png"); }
#view-program  { --sec-icon: url("assets/icons/icon-frame.png"); }
#view-gallery  { --sec-icon: url("assets/icons/icon-frame.png"); }
#view-store    { --sec-icon: url("assets/icons/icon-pin.png"); }
#view-contact  { --sec-icon: url("assets/icons/icon-question.png"); }

/* PC 메뉴: 글자를 키우고, 보조 아이콘 줄은 하단으로 */
@media (min-width: 993px) {
  .nav__social-icons { display: none !important; }
  .nav__link { font-size: 12.5px; letter-spacing: .1em; }
  .nav__links { gap: clamp(10px, 1.6vw, 26px); }
}

/* 모바일: 상담 예약 탭을 코랄 포인트로 */
#mtab-contact .mobile-tab-btn__icon { background: var(--ap-orange); border-radius: 999px; padding: 4px 14px; }
#mtab-contact .mobile-tab-btn__icon svg { color: var(--ap-ink); }
#mtab-contact .mobile-tab-btn__label { font-weight: 600; }

/* 머리말 정리 마무리: 이름표·작은 로고는 숨기고 색 원(스티커) 아이콘으로 통일 */
.sec-head.center .view-hero-badge:not(:has(.view-peek-girl-img)) { display: none; }

/* ==========================================================================
   31. 색을 한 톤 낮추기 — 스티커 원은 옅은 색 면, 상담 탭은 작은 점 포인트
   ========================================================================== */
.sec-head.center::before { width: 72px; height: 72px; background-size: 56% auto; background-color: color-mix(in srgb, var(--sec-c, var(--ap-olive)) 26%, var(--ap-canvas)); margin-bottom: 14px; }
#mtab-contact .mobile-tab-btn__icon { background: transparent; padding: 0; position: relative; }
#mtab-contact .mobile-tab-btn__icon::after { content: ""; position: absolute; top: -2px; right: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--ap-orange); }
#mtab-contact .mobile-tab-btn__label { font-weight: 500; }

/* ==========================================================================
   32. 랄라를 적당히: 상담(손 흔들기)·갤러리(책 읽기) 머리말 원 안에 넣고 살짝 움직임
   ========================================================================== */
#view-contact .sec-head.center::before { background-image: url("assets/lalla_waving_art.webp?v=20261015"); }
#view-gallery .sec-head.center::before { background-image: url("assets/lalla_story_reading.webp"); }
#view-contact .sec-head.center::before, #view-gallery .sec-head.center::before {
  background-size: auto 84%; background-position: 50% 62%; animation: lallaWave 3.5s ease-in-out infinite; transform-origin: 50% 100%;
}
@media (prefers-reduced-motion: reduce) { #view-contact .sec-head.center::before, #view-gallery .sec-head.center::before { animation: none; } }
#view-contact .sec-head.center::before, #view-gallery .sec-head.center::before { width: 88px; height: 88px; background-size: auto 88%; }

/* ==========================================================================
   33. 화면 편집 모드(관리자 전용)
   ========================================================================== */
#ap-edit-bar { position: fixed; left: 12px; bottom: 84px; z-index: 9400; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--ap-ink); color: var(--ap-canvas); border-radius: 999px; font-size: 13px; }
#ap-edit-bar button { min-height: 36px; padding: 0 14px; border: 1px solid var(--ap-canvas); border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
@media (min-width: 993px) { #ap-edit-bar { bottom: 20px; } }
.ap-edit-on .ap-editable { outline: 1.5px dashed var(--ap-orange); outline-offset: 3px; cursor: pointer; }
.ap-edit-on .ap-editable.is-edited { outline-color: var(--ap-olive); }
.ap-edit-on .ap-editable:hover { background: color-mix(in srgb, var(--ap-orange) 12%, transparent); }
#ap-edit-panel { position: fixed; inset: 0; z-index: 9900; display: flex; align-items: flex-end; justify-content: center; background: rgba(29, 29, 27,.35); }
@media (min-width: 641px) { #ap-edit-panel { align-items: center; } }
.ap-edit-card { position: relative; width: min(520px, 100%); max-height: 88vh; overflow: auto; padding: 22px 20px 20px; background: var(--ap-canvas); border: var(--ap-stroke, 1.5px) solid var(--ap-ink); }
.ap-edit-card h3 { margin: 0 0 12px; font-size: 17px; }
.ap-edit-card label { display: block; margin: 10px 0 0; font-size: 13px; font-weight: 600; }
.ap-edit-card textarea, .ap-edit-card input[type=url] { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--ap-ink); background: #fff; font: inherit; font-weight: 400; color: var(--ap-ink); border-radius: 0; }
.ap-edit-card .ap-edit-prev { max-width: 100%; max-height: 140px; margin-top: 10px; border: 1px solid var(--ap-ink); }
.ap-edit-note { margin: 6px 0 0; font-size: 12px; color: var(--ap-ink-soft); min-height: 1.2em; }
.ap-edit-x { position: absolute; top: 8px; right: 8px; min-width: 44px; min-height: 44px; border: 0; background: none; font-size: 18px; cursor: pointer; }
.ap-edit-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.ap-edit-actions button { min-height: 44px; padding: 0 20px; border: 1px solid var(--ap-ink); background: transparent; font: inherit; cursor: pointer; }
.ap-edit-actions .ap-edit-save { background: var(--ap-ink); color: var(--ap-canvas); font-weight: 700; }

/* 34. 스토어 빈 화면 Lalla */
.store-empty{text-align:center}
.store-empty__lalla{display:block;width:96px;height:auto;margin:0 auto 12px;animation:lallaWave 3.2s ease-in-out infinite;transform-origin:50% 90%}
@media (prefers-reduced-motion:reduce){.store-empty__lalla{animation:none}}

/* 35. 관리자 사진 미리보기 */
.ap-prevthumb{display:block;max-width:100%;max-height:96px;margin-top:8px;border:1.5px solid var(--ap-ink,#1d1d1b);border-radius:10px;object-fit:cover}
#ap-edit-panel .ap-edit-prev{max-height:96px;border-radius:10px}
.ap-media-prev{margin-top:8px}
.ap-media-note{font-size:12px;color:var(--ap-ink-soft,#58595b);margin:0 0 6px;line-height:1.5}
.ap-media-note a{color:var(--ap-ink,#1d1d1b);font-weight:600}
.ap-media-bad{color:var(--ap-orange,#f14c46)}
.ap-media-frame{display:block;width:100%;max-width:320px;height:380px;border:1.5px solid var(--ap-ink,#1d1d1b);border-radius:12px;background:var(--ap-card)}
.ap-media-prev .ap-prevthumb{max-height:150px}
.ap-media-warn{color:var(--ap-ink-soft,#58595b)}

/* 36. 작은 노트북·태블릿 가로(≤1180px): PC 메뉴가 넘치지 않도록 햄버거 메뉴 사용 */
@media (max-width: 1180px) {
  .nav__links, .nav__actions { display: none !important; }
  .hamburger { display: flex !important; }
}

/* 37. 수업 장면(일러스트) 영역 · 프로그램 펼치기 · AI 생성 표기 */
.ap-scenes { margin-top: 56px; }
.ap-scenes__head { text-align: center; margin-bottom: 24px; }
.ap-scenes__label { display: inline-block; font-family: 'Lexend Exa', 'Paperlogy', sans-serif; font-weight: 300; font-size: 12px; letter-spacing: .24em; color: var(--ap-ink, #1d1d1b); border: 1.5px solid var(--ap-ink, #1d1d1b); border-radius: 999px; padding: 4px 14px; }
.ap-scenes__head h3 { margin: 12px 0 4px; font-size: clamp(20px, 3vw, 26px); font-weight: 600; color: var(--ap-ink, #1d1d1b); }
.ap-scenes__head p { margin: 0; font-size: 14px; color: var(--ap-ink-soft, #58595b); }
.ap-scenes__grid { display: grid; gap: 16px; }
.ap-scenes--4 .ap-scenes__grid { grid-template-columns: repeat(4, 1fr); }
.ap-scenes--3 .ap-scenes__grid { grid-template-columns: repeat(3, 1fr); }
.ap-scene { margin: 0; }
.ap-scene img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--ap-card); border: 1.5px solid var(--ap-ink, #1d1d1b); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.ap-scene:hover img { transform: rotate(-1.2deg) translateY(-3px); }
.ap-scene figcaption { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.ap-scene figcaption b { font-size: 14px; font-weight: 600; color: var(--ap-ink, #1d1d1b); }
.ap-scene figcaption span { font-size: 13px; color: var(--ap-ink-soft, #58595b); }
@media (max-width: 900px) {
  .ap-scenes__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 0 20px 6px; margin: 0 -20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ap-scenes__grid::-webkit-scrollbar { display: none; }
  .ap-scene { flex: 0 0 78%; scroll-snap-align: center; }
}
.ap-scene-more { margin: 10px 0 12px; }
.ap-scene-more summary { cursor: pointer; display: inline-block; list-style: none; font-size: 13px; font-weight: 600; color: var(--ap-ink, #1d1d1b); border: 1.5px solid var(--ap-ink, #1d1d1b); border-radius: 999px; padding: 6px 14px; transition: background .2s, color .2s; }
.ap-scene-more summary::-webkit-details-marker { display: none; }
.ap-scene-more summary:hover { background: var(--ap-ink, #1d1d1b); color: #fff; }
.ap-scene-more[open] summary { background: var(--ap-ink, #1d1d1b); color: #fff; }
.ap-scene-more[open] summary::after { content: " ×"; }
.ap-scene-more img { display: block; width: 100%; height: auto; margin-top: 10px; border: 1.5px solid var(--ap-ink, #1d1d1b); animation: apSceneIn .5s ease both; }
@keyframes apSceneIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ap-scene img, .ap-scene-more img { transition: none; animation: none; } .ap-scene:hover img { transform: none; } }
.footer__ai-row { margin-top: 6px; font-size: 12px; color: var(--ap-ink-soft, #58595b); }
.ap-maplinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ap-maplinks a { font-size: 12px; font-weight: 600; color: var(--ap-ink, #1d1d1b); text-decoration: none; border: 1.5px solid var(--ap-ink, #1d1d1b); border-radius: 999px; padding: 4px 12px; transition: background .2s, color .2s; }
.ap-maplinks a:hover { background: var(--ap-ink, #1d1d1b); color: #fff; }

/* 36. 수업 영상 상자: 영상이 상자를 꽉 채우고(아래 띠·낙서 겹침 제거), 손그림 프레임 선처럼 살짝 불규칙한 둥근 모서리 */
.ap-video__box { background-image: none; border-radius: 26px 34px 24px 32px / 32px 24px 34px 26px; }
.ap-video__box video { height: 100%; border-radius: inherit; }

/* 37. 철학 카드: 이미지 위 중복 알약 숨김(아래 번호 알약과 같은 말) · 번호 알약은 글자 크기만큼만, 제목과 간격 확보 */
.philo-card .philo-img-badge { display: none !important; }
.philo-card .philo-card__body { padding-top: 22px; }
.philo-card .philo-num { align-self: flex-start; padding: 6px 14px !important; margin-bottom: 14px !important; line-height: 1.3; }
.philo-card h3 { margin-top: 0; margin-bottom: 10px; }

/* 38. 스토리 머리말: 두 칸 배치(≥993px)에서는 왼쪽 칸이 좁아 랄라·말풍선이 오른쪽 카드를 침범하므로, 제목 아래 한 줄(캐릭터 + 말풍선)로 내린다 */
#view-story .story-copy { min-width: 0; }
@media (min-width: 993px) {
  #view-story .story-lalla-header { flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 12px !important; max-width: 100%; }
  #view-story .story-lalla-header .story-copy-text { max-width: 100%; }
  #view-story .story-lalla-character { flex-direction: row !important; align-items: center !important; order: 2; max-width: 100% !important; }
  #view-story .story-lalla-character .lalla-avatar-img { width: 72px !important; flex: 0 0 auto; }
  #view-story .story-lalla-character .lalla-speech-bubble { flex: 1 1 auto; min-width: 0; max-width: calc(100% - 84px) !important; width: auto !important; }
}

/* 39. 수업 장면(SCENES): 모바일에서 옆으로 넘기며 끝이 잘려 보이던 방식 → 잘림 없는 배치(3장: 태블릿 3칸·모바일 1칸 / 4장: 2×2) */
@media (max-width: 900px) {
  .ap-scenes .ap-scenes__grid { display: grid; overflow: visible; scroll-snap-type: none; margin: 0; padding: 0; gap: 16px; }
  .ap-scenes .ap-scene { flex: none; min-width: 0; }
  .ap-scenes--3 .ap-scenes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ap-scenes--4 .ap-scenes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ap-scenes--3 .ap-scenes__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ap-scenes--3 .ap-scene img { aspect-ratio: 16 / 10; }
}

/* 40. 인스타그램 버튼 아이콘: 버튼 배경이 투명으로 바뀌면서 흰 선 아이콘이 보이지 않던 문제 → 글자색을 따라가게 */
.btn-insta svg { stroke: currentColor !important; }

/* 41. 연락처 카드: 지도 링크 알약이 손그림 프레임 아래 선에 닿아 잘려 보이던 문제 → 아래 여백 확대 / 문의 동의 체크박스: 모바일에서 누르기 쉽게 키움 */
.contact-item { padding: 14px 16px 22px !important; }
.contact-item .ap-maplinks { margin-top: 10px; margin-bottom: 2px; }
.inq-agree { display: flex !important; align-items: flex-start; gap: 10px; line-height: 1.6; }
.inq-agree input[type="checkbox"] { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ap-ink, #1d1d1b); cursor: pointer; }

/* 42. 모바일 입력칸 글자 16px: 16px 미만이면 iPhone이 칸을 누를 때 화면을 자동 확대해 레이아웃이 어긋남 / '← WORK' 돌아가기 버튼 터치 영역 확대 */
@media (max-width: 900px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea { font-size: 16px !important; }
  .back-to-work { min-height: 40px; display: inline-flex; align-items: center; }
}

/* 43. 연락처 지도 링크: 모바일에서 2개+1개로 꺾이던 것을 카드 폭 전체의 같은 폭 3칸 한 줄로(아이콘 칸 36px + 간격 14px 만큼 왼쪽으로 당겨 아이콘 아래부터 시작) */
@media (max-width: 640px) {
  .contact-item .ap-maplinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 2px -50px; }
  .contact-item .ap-maplinks a { text-align: center; white-space: nowrap; padding: 7px 4px; font-size: 12.5px; }
}

/* 44. 스토리 머리말의 랄라: 조금 키우고, 말풍선에 랄라 쪽 꼬리를 달아 '버튼'이 아니라 '랄라의 말'로 읽히게(세로 배치인 900~992px 구간은 제외) */
@media (max-width: 899px), (min-width: 993px) {
  #view-story .story-lalla-character { gap: 12px; }
  #view-story .story-lalla-character .lalla-avatar-img { width: 88px !important; }
  #view-story .story-lalla-character .lalla-speech-bubble { position: relative; margin-left: 10px !important; padding: 10px 16px !important; font-size: 13.5px !important; border-radius: 18px !important; }
  #view-story .story-lalla-character .lalla-speech-bubble::before,
  #view-story .story-lalla-character .lalla-speech-bubble::after { content: ""; display: block; position: absolute; top: 50%; width: 0; height: 0; border-style: solid; border-color: transparent; }
  #view-story .story-lalla-character .lalla-speech-bubble::before { left: -11px; margin-top: -8px; border-width: 8px 11px 8px 0; border-right-color: var(--ap-ink); }
  #view-story .story-lalla-character .lalla-speech-bubble::after { left: -8px; margin-top: -6.5px; border-width: 6.5px 9px 6.5px 0; border-right-color: var(--ap-paper); }
}

/* ==========================================================================
   45. 마우스를 올렸을 때(호버): 한 버튼에 올려도 옆 버튼이 같이 같은 모양이 되지 않도록 서로 다른 반응
   - 기본(검은) 버튼: 올리면 먹색에서 한 톤 옅은 먹색(#58595b)으로 · 윤곽선 버튼: 올리면 리넨색 면으로
   - 푸터 SNS 아이콘: 올리면 바탕이 먹색이 되므로 아이콘 선은 밝은 색으로(이전에는 먹색 그대로라 안 보였다)
   ========================================================================== */
.btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover,
.res-card__foot .btn-primary:hover, .res-card__foot a.btn-primary:hover {
  background: var(--ap-ink-soft) !important; background-color: var(--ap-ink-soft) !important; color: var(--ap-canvas) !important; transform: translateY(-1px);
}
.btn-outline:hover, a.btn-outline:hover, button.btn-outline:hover,
.res-card__foot .btn-outline:hover, .btn-insta:hover {
  background: var(--ap-linen) !important; background-color: var(--ap-linen) !important; color: var(--ap-ink) !important; border-color: var(--ap-ink) !important; transform: translateY(-1px);
}
.sns-badge:hover svg, .sns-badge:focus-visible svg, .sns-badge:hover { color: var(--ap-canvas) !important; }
.sns-badge:focus-visible { background: var(--ap-ink) !important; }

/* ==========================================================================
   46. 워크시트 카드: 미리보기를 크게(세로 A4에 맞춘 세로형 영역) + 이미지 영역 아래 구분선
   ========================================================================== */
.res-card__img { aspect-ratio: 5 / 6; padding: 14px; border-bottom: var(--ap-stroke) solid var(--ap-ink); }
.res-card__img img { border-radius: 0; }
.store-item-card__img-wrap { border-bottom: var(--ap-stroke) solid var(--ap-ink); }

/* ==========================================================================
   47. 랄라 손 흔들기(워크시트 머리말): 손+손목 부분만 따로 떼어 손목을 축으로 좌우로 흔든다. 몸은 천천히 위아래로 숨 쉬듯
   (그림 360×536px 기준: 손 영역 x 40~112, y 28~92, 손목 중심 ≈ (94, 88))
   ========================================================================== */
@keyframes ap-hand-wave {
  0%, 56%, 100% { transform: rotate(0deg); }
  8%  { transform: rotate(-17deg); }
  16% { transform: rotate(15deg); }
  24% { transform: rotate(-17deg); }
  32% { transform: rotate(15deg); }
  40% { transform: rotate(-12deg); }
  48% { transform: rotate(6deg); }
}
@keyframes ap-lalla-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(.6deg); } }
.lalla-wave { position: relative; display: block; width: 95px; max-width: 100%; line-height: 0; transform-origin: 50% 100%; animation: ap-lalla-bob 4.8s ease-in-out infinite; }
.lalla-wave img { display: block; width: 100%; height: auto; max-width: 100%; filter: none; }
/* 몸: 손 부분을 오려 낸 모양(evenodd) / 손: 오려 낸 손 부분만 보이고 손목 중심으로 회전 */
.lalla-wave__body { clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 21.67% 17.16%, 30% 16.04%, 31.11% 11.19%, 31.11% 5.22%, 11.11% 5.22%, 11.11% 17.16%, 21.67% 17.16%); }
.lalla-wave__hand { position: absolute; left: 0; top: 0; clip-path: polygon(21.67% 17.16%, 30% 16.04%, 31.11% 11.19%, 31.11% 5.22%, 11.11% 5.22%, 11.11% 17.16%); transform-origin: 26.1% 16.4%; animation: ap-hand-wave 3.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .lalla-wave, .lalla-wave__hand { animation: none; } .lalla-wave__body { clip-path: none; } .lalla-wave__hand { display: none; } }

/* ==========================================================================
   48. 메인 첫 화면: 로고가 먼저 떠오르고, 일러스트가 뒤따라 나타난 뒤 천천히 떠 있는 듯 움직임(동작 줄이기 설정 시 끔)
   ========================================================================== */
@keyframes ap-rise  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ap-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-7px) rotate(.5deg); } }
.ap-cover__logo { animation: ap-rise .9s cubic-bezier(.2, .8, .2, 1) both; }
.ap-cover__art { animation: ap-rise 1.1s .25s cubic-bezier(.2, .8, .2, 1) both, ap-float 7.5s 1.5s ease-in-out infinite; transform-origin: 50% 90%; }
@media (prefers-reduced-motion: reduce) { .ap-cover__logo, .ap-cover__art { animation: none; opacity: 1; } }

/* ==========================================================================
   49. 스토리 머리말의 랄라: 줄 오른쪽 끝에 두고 말풍선은 왼쪽에서 랄라를 향하게(말풍선 꼬리도 오른쪽)
   ========================================================================== */
@media (max-width: 899px), (min-width: 993px) {
  #view-story .story-lalla-character { flex-direction: row-reverse !important; justify-content: flex-start !important; width: 100% !important; }
  #view-story .story-lalla-character .lalla-speech-bubble { margin-left: 0 !important; margin-right: 12px !important; }
  #view-story .story-lalla-character .lalla-speech-bubble::before { left: auto; right: -11px; border-width: 8px 0 8px 11px; border-right-color: transparent; border-left-color: var(--ap-ink); }
  #view-story .story-lalla-character .lalla-speech-bubble::after { left: auto; right: -8px; border-width: 6.5px 0 6.5px 9px; border-right-color: transparent; border-left-color: var(--ap-paper); }
}
/* 49-2. 말풍선은 글자 길이만큼만 차지하고 가운데 정렬(칸 전체로 늘어나지 않게) */
@media (max-width: 899px), (min-width: 993px) {
  #view-story .story-lalla-character .lalla-speech-bubble { flex: 0 1 auto !important; width: auto !important; text-align: center; }
}
/* 50. 스토리 머리말의 랄라: 말풍선은 2줄, 랄라와 말풍선을 칸 가운데에 함께 배치 */
@media (max-width: 899px), (min-width: 993px) {
  #view-story .story-lalla-character { justify-content: center !important; margin-top: 6px; }
  #view-story .story-lalla-character .lalla-speech-bubble { white-space: nowrap; line-height: 1.5; padding: 10px 18px !important; }
}

/* 51. 갤러리 크게 보기: 이전/다음 버튼과 번호 */
.lightbox-nav { position: absolute; top: 40%; width: 44px; height: 44px; border-radius: 50%; border: var(--ap-stroke, 1.33px) solid var(--ap-ink); background: var(--ap-card); color: var(--ap-ink); font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; padding: 0 0 3px; }
.lightbox-nav--prev { left: 10px; }
.lightbox-nav--next { right: 10px; }
.lightbox-nav:hover { background: var(--ap-linen, #edecda); }
.lightbox-count { display: block; margin-top: 10px; font-size: 12px; color: var(--ap-ink-soft); }
/* 50-2. 스토리 말풍선은 줄바꿈(2줄)을 살린다 */
#view-story .story-lalla-character .lalla-speech-bubble br { display: inline !important; }
#view-story .story-lalla-character .lalla-speech-bubble { white-space: nowrap !important; width: max-content !important; text-align: center; }

/* 52. 인스타 임베드는 최소 폭(326px) 아래로 줄면 오른쪽(좌우 넘김 화살표)이 잘리므로, 좁을 땐 칸 안에서 가로로 밀어 볼 수 있게 한다 */
.ig-card__stage { overflow-x: auto; overflow-y: hidden; }
.ig-card__stage iframe { min-width: 326px; }

/* 53. 인스타 임베드가 불러와지는 동안(또는 막혔을 때) 안내를 보여 준다 */
.ig-card__stage { min-height: 360px; }
.ig-card__loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: var(--ap-linen); }
.ig-card__loading img { width: 96px; height: auto; border: 2px solid var(--ap-ink); border-radius: 50%; }
.ig-card__loading p { margin: 0; font-size: 13.5px; font-weight: 300; line-height: 1.8; color: var(--ap-ink-soft); }
.ig-card__stage iframe { position: relative; z-index: 1; }

/* 54. (2026-10-29 v2.1) 철학 머리 배지는 납품 로고 B 원본을 그대로 보여 준다. 로고는 기울이거나 움직이지 않는다 */
.view-badge-logo, .view-badge-logo:hover { animation: none !important; transform: none !important; height: 72px; }

/* 55. (2026-10-29) SNS·전화 아이콘은 직접 그린 선 도형(외부 아이콘 세트 미사용). 전화 아이콘도 선으로 */
.sns-badge--call svg { fill: none; }

/* 56. (2026-10-29 v2.1) 흰 바탕 정리: 카드·상자·버튼 면은 canvas(--ap-card #f4f3e8), 흰색(paper)은 입력칸·활동지처럼 쓰고 그리는 면에만 */
:is(.story-two-col, .story-featured-media-box, .story-featured-info, .gal-caption, .btn-download, .contact-btn-action--call) { background: var(--ap-card) !important; }
.btn-download:hover { background: var(--ap-ink) !important; color: var(--ap-canvas) !important; }
#view-worksheet .btn.btn-download { background: var(--ap-card) !important; }
#view-worksheet .btn.btn-download:hover { background: var(--ap-ink) !important; color: var(--ap-canvas) !important; }

/* 57. (2026-10-29 점검) 디자인 규칙 정리: 그림자·그라데이션 없음, 글자는 먹 한 가지(먹 면 위는 paper) */
.process-step-badge, .contact-studio-badge, .contact-item-icon { box-shadow: none !important; }
.contact-item-icon { background: var(--ap-linen) !important; color: var(--ap-ink); }
#view-story p, .contact-btn-action span { color: var(--ap-ink) !important; }
#view-contact [style*="rgba(255,255,255"], #view-contact [style*="rgba(255, 255, 255"] { color: var(--ap-paper) !important; }
@media (max-width: 480px) { .contact-btn-action { white-space: nowrap; font-size: clamp(12px, 3.5vw, 15px) !important; } }

/* ==========================================================================
   58. (2026-10-29 전반 점검 2) 임시 도형 자리를 직접 만든 그림으로
   - 교육 철학·수업 과정·프로그램 카드: 수업 장면 그림을 칸 가득(망점 바탕·기울기 효과 끔)
   - 장 머리말 원: 작은 도형 아이콘 대신 리소 그림(assets/riso, 사용자 AI 그림)
   - 첫 화면 카드 부채·키트: 리소 그림을 7:10 타원·4:3 칸에 맞춤
   ========================================================================== */
:is(.philo-card__img-wrap, .process-card__img-wrap):has(> img[src*="philo_"], > img[src*="process_step"]) {
  background-image: none; background-color: var(--ap-card); padding: 0 !important; aspect-ratio: 4 / 3; height: auto !important;
}
:is(.philo-card__img-wrap, .process-card__img-wrap) > img:is([src*="philo_"], [src*="process_step"]) {
  width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; display: block;
}
.philo-card:hover .philo-card__img-wrap > img, .process-card:hover .process-card__img-wrap > img { transform: none !important; }
.booklet-cover:has(> .booklet-cover__img--scene) { background-image: none; background-color: var(--ap-card); padding: 0 !important; }
.booklet-cover__img.booklet-cover__img--scene { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; }
.booklet-card:hover .booklet-cover__img--scene { transform: none !important; }
.booklet-cover:has(> .booklet-cover__img--scene) .booklet-cover__art-text { background: var(--ap-card); padding: 4px 10px; }

:is(#view-about, #view-process, #view-program, #view-store) .sec-head.center::before {
  background-size: cover; background-position: center; background-color: var(--ap-canvas); border: var(--ap-stroke) solid var(--ap-ink);
}

.ap-fan__card img:is([src*="riso/"],[src*="motif/"]) { object-fit: cover; border-radius: 50%; border: var(--ap-stroke) solid var(--ap-ink); background: var(--ap-card); }
.ap-kit__photo[src*="riso/"] { object-fit: contain; background: var(--ap-card); padding: 12px 0; }

.ig-card__empty-card { width: min(100%, 360px); aspect-ratio: 1; object-fit: cover; border-radius: 0; }
.ig-card__loading img { width: 120px; aspect-ratio: 1; object-fit: cover; border-radius: 0; }

/* 상담 화면: 공간 그림 위 망점 끄기, 먹 패널 위 빈 공간 줄이기 */
.contact-studio-banner { background-image: none; background-color: var(--ap-card); }
.contact-action-panel { align-self: start; }

/* 59. 첫 화면: 카드 부채 이름표 + 띠 글자 흐름 (10-30) */
.ap-fan__label { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); background: var(--ap-canvas); border: var(--ap-stroke) solid var(--ap-ink); border-radius: 999px; padding: 4px 14px; font-family: var(--ap-display); font-weight: 400; font-size: clamp(12px, 1.2vw, 15px); letter-spacing: .08em; color: var(--ap-ink); white-space: nowrap; z-index: 3; }
.ap-marquee__track, .ap-marquee__track[class] { display: flex !important; flex-wrap: nowrap !important; width: max-content !important; padding-inline: 0 !important; animation: ap-marquee 42s linear infinite !important; }
.ap-marquee__set { display: flex; flex: 0 0 auto; }
.ap-marquee:hover .ap-marquee__track { animation-play-state: paused !important; }
@media (max-width: 640px) { .ap-marquee__track[class] { animation-duration: 30s !important; } .ap-marquee__item { padding: 10px 14px !important; } }
@media (prefers-reduced-motion: reduce) { .ap-marquee__track[class] { animation: none !important; } .ap-marquee__set[aria-hidden] { display: none; } .ap-marquee__track[class] { width: auto !important; flex-wrap: wrap !important; justify-content: center; } }

/* 60. 알림 문구(showToast): 스타일이 없어 페이지 맨 아래에 묻히던 문제 → 화면 아래 가운데에 고정 (10-30) */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 2147483000;
  transform: translate(-50%, 12px); opacity: 0;
  max-width: min(560px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 12px 20px; border: var(--ap-stroke) solid var(--ap-ink); border-radius: 999px;
  background: var(--ap-canvas); color: var(--ap-ink);
  font-family: var(--ap-sans); font-size: 14px; font-weight: 500; line-height: 1.5; text-align: center;
  box-shadow: none; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 900px) { .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); border-radius: 16px; font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* 61. 스토리 카드: 인스타 게시물 미리보기(임베드) + 글 표지, 개수 표시 (10-30) */
.story-ig-thumb { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ap-canvas); }
.story-ig-thumb__cover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 22px; border-bottom: var(--ap-stroke) solid var(--ap-ink); color: var(--ap-ink); font-family: var(--ap-sans); }
.story-ig-thumb__cover strong { font-size: 17px; line-height: 1.45; font-weight: 600; word-break: keep-all; }
.story-ig-thumb__acct { font-size: 12px; letter-spacing: .04em; }
.story-ig-thumb__play { align-self: flex-start; border: var(--ap-stroke) solid var(--ap-ink); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; }
/* 임베드 위쪽 계정 줄(약 54px)을 잘라 게시물 그림부터 보이게 한다. 누르는 동작은 카드가 받는다 */
.story-ig-thumb__frame { position: absolute; left: 0; top: -54px; width: 100%; height: calc(100% + 260px); border: 0; background: transparent; pointer-events: none; }
.story-ig-thumb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-video-card__media.is-ig, .story-video-card__media.is-ig[class] { aspect-ratio: 4 / 5 !important; height: auto !important; background: var(--ap-canvas) !important; display: block !important; }
.story-video-card__media.is-ig .story-ig-thumb { position: absolute !important; inset: 0 !important; aspect-ratio: auto; width: 100%; height: 100%; }

/* 62. 메일 안내 창(비밀번호 재설정·관리자 인증) (10-30) */
.ap-mail-guide { max-width: 440px; width: calc(100vw - 32px); padding: 26px 24px 22px; text-align: left; box-shadow: none; }
.ap-mail-guide h3 { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: var(--ap-ink); }
.ap-mail-guide__to { margin: 0 0 14px; font-size: 13px; word-break: break-all; color: var(--ap-ink); }
.ap-mail-guide ol { margin: 0 0 14px; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--ap-ink); }
.ap-mail-guide ol li + li { margin-top: 4px; }
.ap-mail-guide__mail { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 12px 14px; border: var(--ap-stroke) solid var(--ap-ink); border-radius: 12px; font-size: 12.5px; color: var(--ap-ink); word-break: break-all; margin-bottom: 10px; }
.ap-mail-guide__mail b { font-weight: 600; }
.ap-mail-guide__note { margin: 0 0 16px; font-size: 12.5px; line-height: 1.5; color: var(--ap-ink); }

/* 63. 모바일 관리자: 메뉴를 열면 "화면 편집" 버튼이 메뉴 위에 겹치던 문제 + 관리자 허브 카드가 오른쪽으로 넘치던 문제 (10-30) */
body:has(.mobile-menu.open) #ap-edit-bar { display: none; }
.admin-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.admin-hub-card { min-width: 0; }
.admin-hub-card, .admin-hub-card * { overflow-wrap: anywhere; word-break: keep-all; }
.admin-hub-info { min-width: 0; }

/* 64. 푸터 아래쪽 정리: 사업자 정보는 접기 버튼 안으로, 저작권·AI 표기는 작은 글씨로 가운데 정렬 (10-31) */
#biz-info-line { max-width: 360px; margin: 14px auto 0; text-align: center; }
.biz-info summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 2px; font-size: 13px; color: var(--ap-ink-soft); cursor: pointer; list-style: none; }
.biz-info summary::-webkit-details-marker { display: none; }
.biz-info summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.biz-info[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.biz-info dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0 0; padding: 12px 14px; text-align: left; font-size: 12px; line-height: 1.55; color: var(--ap-ink-soft); border-top: 1px solid var(--ap-ink-soft); }
.biz-info dt { font-weight: 500; white-space: nowrap; }
.biz-info dd { margin: 0; word-break: keep-all; overflow-wrap: anywhere; }
.footer__bottom-copy { margin-top: 14px; text-align: center; }
.footer__copy-row, .footer__ai-row { font-size: 11.5px !important; line-height: 1.6; color: var(--ap-ink-soft); }
.footer__ai-row { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .biz-info summary::after { transition: none; } }