/* path: /api/app/static/css/main.css */

/* =========================================================
   Design Tokens
========================================================= */
:root{
  --color-page-bg:#ffffff;
  --color-page-text:#111111;
  --color-muted:#777777;
  --color-border-light:#e5e5e5;
  --color-border-strong:#cccccc;
  --color-accent:#b28b62;

  --layout-max-width:1240px;
  --layout-gutter:24px;

  --bg:var(--color-page-bg);
  --fg:var(--color-page-text);
  --muted:var(--color-muted);
  --line:var(--color-border-light);
  --line-strong:var(--color-border-strong);
  --card:#ffffff;
  --soft:#fafafa;
  --accent:var(--color-accent);

  --focus:#2563eb;
  --danger:#dc2626;

  --radius:0px;
  --shadow:none;

  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-8:2rem;

  --text-xs:.75rem;
  --text-sm:.8125rem;
  --text-md:.9rem;
  --text-lg:1.05rem;
  --text-xl:1.4rem;

  --lh:1.6;
  --font:-apple-system,BlinkMacSystemFont,"Noto Sans KR","Apple SD Gothic Neo","Segoe UI",sans-serif;
  --serif:ui-serif,"Times New Roman",Times,serif;
}

/* =========================================================
   Base / Reset
========================================================= */
*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  line-height:var(--lh);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{
  color:inherit;
  text-decoration:none;
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
}
a:hover{ text-decoration:underline; }

button{
  font:inherit;
  color:inherit;
  background:transparent;
  border:1px solid transparent;
  padding:0;
  cursor:pointer;
}

:focus-visible{
  outline:2px solid rgba(37,99,235,.35);
  outline-offset:2px;
}

[hidden]{ display:none !important; }

/* =========================================================
   Layout
========================================================= */
.layout-container,
.container{
  max-width:var(--layout-max-width);
  padding:0 var(--layout-gutter);
  margin:0 auto;
}

.site-main{ padding:0; }

.page{
  max-width:var(--layout-max-width);
  margin:0 auto;
  padding:32px var(--layout-gutter) 0;
}

/* 일부 템플릿이 .page를 쓰지 않는 경우 대비 */
.page-hero,
.artwork-toolbar,
.artwork-list,
.pagination{
  max-width:var(--layout-max-width);
  margin:0 auto;
  padding-left:var(--layout-gutter);
  padding-right:var(--layout-gutter);
}
.page-hero{ padding-top:32px; padding-bottom:8px; }

/* =========================================================
   A11y
========================================================= */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:var(--layout-gutter);
  top:12px;
  width:auto;
  height:auto;
  padding:.55rem 1rem;
  border:1px solid var(--line-strong);
  background:var(--fg);
  color:var(--bg);
  z-index:2000;
}

/* =========================================================
   Header
========================================================= */
.site-header{
  background:var(--bg);
  border-bottom:1px solid var(--line);
}

/* Utility bar */
.utility-bar{
  font-size:.6875rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  padding-top:10px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
}

.utility-bar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.utility-left,
.utility-center,
.utility-right{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.utility-center{
  justify-content:center;
  flex:1 1 auto;
  text-align:center;
}

.utility-copy{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.utility-nav{
  display:flex;
  align-items:center;
  gap:12px;
}
.utility-nav a{ display:inline-flex; align-items:center; }

/* cart link (label + badge) */
.cart-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0;
  border:0;
}
.cart-label{
  letter-spacing:.12em;
  text-transform:uppercase;
}
.cart-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
  height:16px;
  padding:0 5px;
  border-radius:999px;
  background:var(--fg);
  color:var(--bg);
  font-size:.62rem;
  letter-spacing:0;
}

/* Brand row (ornaments + centered brand) */
.brand-row{
  text-align:center;
  padding:22px 0 18px;
  border-bottom:1px solid var(--line);
}

.brand-row-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
}

.brand{
  display:flex;
  justify-content:center;
}

.brand-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.brand-logo{
  width:76px;
  height:auto;
  line-height:0;
}

.brand-wordmark{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.brand-wordmark-top{
  font-size:1rem;
  font-weight:600;
  line-height:1.05;
}
.brand-wordmark-bottom{
  font-size:.72rem;
  font-weight:600;
  line-height:1.05;
  opacity:.95;
}

.brand-ornament{
  display:flex;
  align-items:center;
  min-width:0;
  color:var(--fg);
}
.brand-ornament--left{ justify-content:flex-end; }
.brand-ornament--right{ justify-content:flex-start; }

.ornament-svg{
  width:220px;
  height:auto;
  opacity:.95;
}

/* Nav row */
.nav-row{ border-bottom:1px solid var(--line); }

.nav-row-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 0;
  position:relative;
}

.gnb{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:36px;
  min-width:0;
}
.gnb a{
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* desktop: hide toggles */
.nav-toggle,
.search-toggle{ display:none; }

/* =========================================================
   Footer
========================================================= */
.site-footer{
  margin-top:80px;
  border-top:1px solid var(--line);
  background:var(--soft);
}

.site-footer-inner{
  padding:32px var(--layout-gutter) 40px;
}

.footer-main{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:space-between;
  align-items:flex-start;
}

.footer-company{
  flex:2 1 260px;
  font-size:.75rem;
  line-height:1.8;
}
.footer-company strong{
  display:block;
  margin-bottom:4px;
  font-weight:600;
}

.footer-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  color:var(--muted);
}

.footer-sitemap{
  flex:3 1 320px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:24px;
  row-gap:10px;
  font-size:.75rem;
}

.footer-sitemap-title{
  font-weight:600;
  margin-bottom:6px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.footer-sitemap-list{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-sitemap-list li + li{ margin-top:4px; }

.footer-bottom{
  margin-top:24px;
  font-size:.6875rem;
  color:var(--muted);
  text-align:center;
}
.footer-bottom span + span::before{
  content:"·";
  display:inline-block;
  margin:0 4px;
}

/* =========================================================
   Common UI
========================================================= */
.divider{ border-top:1px solid var(--line); }

.section{ padding:48px 0; }

.section-header{
  text-align:center;
  margin-bottom:32px;
}

.section-title{
  font-size:1.25rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:0;
}

.section-lead{
  font-size:.8125rem;
  color:var(--muted);
  margin:8px auto 0;
  max-width:72ch;
  line-height:1.8;
}

.section-footer{
  margin-top:18px;
  text-align:center;
}

.grid{ display:grid; gap:16px; }
.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }

/* Buttons */
.btn,
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 20px;
  border:1px solid var(--line-strong);
  background:transparent;
  color:inherit;
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  min-height:38px;
}

.btn:hover,
.btn:focus-visible,
.button:hover,
.button:focus-visible{
  background:var(--fg);
  color:var(--bg);
  border-color:var(--fg);
  text-decoration:none;
}

.btn-primary{
  background:var(--fg);
  color:var(--bg);
  border-color:var(--fg);
}
.btn-primary:hover,
.btn-primary:focus-visible{
  background:#000;
  border-color:#000;
  color:#fff;
}

/* Cards */
.card{
  border:1px solid var(--line);
  background:var(--card);
  overflow:hidden;
}
.card-inner{ padding:22px 24px; }

.card-title{
  margin:0 0 8px;
  font-size:.9rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.card-actions{ margin-top:14px; }
.card-actions.row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.muted{ color:var(--muted); line-height:1.8; }

.chip{
  display:inline-block;
  padding:.15rem .6rem;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

.thumb{
  aspect-ratio:4/3;
  background:#f7f7f7;
  display:flex;
  align-items:center;
  justify-content:center;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =========================================================
   Home: Hero (base)
========================================================= */
.hero{ margin-top:0; padding:0; }

.hero-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  border:1px solid var(--line);
}

.hero-card{
  position:relative;
  overflow:hidden;
  background:#f7f7f7;
  min-height:clamp(360px, 55vh, 620px);
  text-decoration:none;
}
.hero-card + .hero-card{ border-left:1px solid var(--line); }

.hero-media{ position:absolute; inset:0; }
.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(15%);
}

/* 기본(하단 그라데이션 오버레이) */
.hero-body{
  position:absolute;
  inset-inline:0;
  bottom:0;
  padding:1.7rem 2.2rem 2.2rem;
  background:linear-gradient(
    to top,
    rgba(255,255,255,.98),
    rgba(255,255,255,.90),
    rgba(255,255,255,.15),
    transparent
  );
  text-align:center;
}

.hero-title{
  font-size:1.9rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 .8rem;
  line-height:1.15;
}
.hero-title--sm{ font-size:1.25rem; letter-spacing:.10em; }

.hero-copy{
  margin:0 auto 1.1rem;
  max-width:36rem;
  color:var(--muted);
  font-size:.85rem;
  letter-spacing:.02em;
  line-height:1.8;
}

.hero-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

/* =========================================================
   Booking steps (legacy)
========================================================= */
.steps{
  margin:14px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.step{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.step-num{
  flex:0 0 auto;
  width:26px;
  height:26px;
  border:1px solid var(--line-strong);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.75rem;
  letter-spacing:.12em;
}
.step-text{
  margin:0;
  color:var(--fg);
  font-size:.85rem;
  line-height:1.8;
}
.guide-text{ margin-top:10px; }

/* =========================================================
   Works (legacy grid)
========================================================= */
.works-grid{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
}

.work-tile{
  border:1px solid var(--line);
  background:var(--card);
}

.work-meta{ padding:10px 10px 12px; }

.work-title{
  margin:0;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.work-sub{
  margin:6px 0 0;
  font-size:.75rem;
  color:var(--muted);
}

/* =========================================================
   Home updates (Press/Notice lists)
========================================================= */
.updates-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}

.updates-col{
  border:1px solid var(--line);
  background:var(--card);
  padding:18px 18px 8px;
}

.updates-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
  margin-bottom:10px;
}

.updates-title{
  margin:0;
  font-size:.9rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.updates-more{
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}

.updates-list{
  list-style:none;
  padding:0;
  margin:0;
}

.updates-item{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid rgba(229,229,229,.65);
}
.updates-item:last-child{ border-bottom:0; }

.updates-item a{
  display:inline-block;
  max-width:calc(100% - 86px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.updates-date{
  flex:0 0 auto;
  font-size:.75rem;
  color:var(--muted);
}

/* =========================================================
   Page Header / Typography
========================================================= */
.page-header{
  padding:32px 0 18px;
  border-bottom:1px solid var(--line);
  margin-bottom:22px;
}
.page-header--split{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
.page-header-actions{ flex:0 0 auto; }

.page-title{
  margin:0;
  font-size:1.6rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.15;
}
.page-lead{
  margin:.6rem 0 0;
  max-width:72ch;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.9;
}
.page-subtitle{
  margin:.5rem 0 0;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.8;
}

.section-head{ margin:0 0 14px; }
.section-h{
  margin:0;
  font-size:.95rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.section-lead-sm{
  margin:.5rem 0 0;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.8;
}

/* Breadcrumb */
.breadcrumb{
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 10px;
}
.breadcrumb a{ color:inherit; }
.breadcrumb span{ margin:0 6px; }

/* =========================================================
   Toolbar / Filter
========================================================= */
.toolbar{
  padding:16px 0;
  border-bottom:1px solid var(--line);
  margin-bottom:18px;
}

.filter-form{ margin:0; }

.filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:flex-end;
}

.filter-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:180px;
}

.filter-field--grow{
  flex:1 1 260px;
  min-width:240px;
}

.filter-label{
  font-size:.78rem;
  color:var(--muted);
  letter-spacing:.06em;
}

.filter-input,
.filter-select{
  height:38px;
  padding:0 12px;
  border:1px solid var(--line-strong);
  background:#fff;
  border-radius:0;
}

.filter-actions{
  display:flex;
  gap:10px;
  margin-left:auto;
}

/* =========================================================
   Empty state / Callout
========================================================= */
.empty-state{
  padding:40px 0;
  text-align:center;
  border:1px solid var(--line);
  background:var(--card);
}
.empty-title{
  margin:0;
  font-size:1rem;
  letter-spacing:.08em;
}
.empty-desc{
  margin:10px 0 0;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.8;
}

.callout{
  margin-top:18px;
  border:1px solid var(--line);
  padding:16px 18px;
  background:var(--card);
}
.callout-title{
  margin:0 0 8px;
  font-size:.95rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.callout-desc{
  margin:0;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.9;
}

/* =========================================================
   About
========================================================= */
.about-section{
  padding:28px 0;
  border-bottom:1px solid var(--line);
}
.about-section:last-child{ border-bottom:0; }

.about-grid{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:26px;
  align-items:start;
}

.about-media{
  border:1px solid var(--line);
  background:var(--card);
}
.about-media img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}

.about-name{
  margin:0 0 10px;
  font-size:1rem;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.about-text{
  margin:0;
  color:var(--fg);
  font-size:.9rem;
  line-height:1.9;
}

.about-list{
  margin:14px 0 0;
  padding-left:18px;
  color:var(--muted);
  line-height:1.9;
}

.about-gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.about-gallery-item{
  border:1px solid var(--line);
  background:var(--card);
}
.about-gallery-item img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}

.about-dl{
  margin:0;
  border:1px solid var(--line);
  background:var(--card);
}
.about-dl-row{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:16px;
  padding:14px 16px;
  border-top:1px solid var(--line);
}
.about-dl-row:first-child{ border-top:0; }
.about-dl dt{
  color:var(--muted);
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:.78rem;
}
.about-dl dd{
  margin:0;
  font-size:.9rem;
  line-height:1.8;
}

/* =========================================================
   Artwork list
========================================================= */
.collection{ padding:10px 0 0; }

.artwork-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  padding:18px 0 10px;
}

.artwork-card{
  border:1px solid var(--line);
  background:var(--card);
  text-decoration:none;
  overflow:hidden;
}
.artwork-card:hover{
  text-decoration:none;
  border-color:var(--line-strong);
}

.artwork-thumb{
  aspect-ratio:4/3;
  background:#f7f7f7;
}
.artwork-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.artwork-thumb-placeholder{
  display:block;
  width:100%;
  height:100%;
}

.artwork-body{ padding:14px 14px 16px; }

.artwork-title{
  margin:0;
  font-size:.95rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  line-height:1.35;
}

.artwork-meta{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:.78rem;
  color:var(--muted);
  letter-spacing:.06em;
}

.artwork-subtitle{
  margin:10px 0 0;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.8;
}

.artwork-tags{
  margin:12px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.artwork-tag{
  border:1px solid var(--line);
  padding:2px 8px;
  font-size:.72rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--muted);
}

/* =========================================================
   Artwork detail
========================================================= */
.artwork-detail{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:22px;
  padding:18px 0 0;
}

.artwork-figure{
  margin:0;
  border:1px solid var(--line);
  background:var(--card);
}
.artwork-image{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
.artwork-caption{
  padding:10px 12px;
  border-top:1px solid var(--line);
  font-size:.78rem;
  color:var(--muted);
}

.artwork-detail-body{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.artwork-section{
  border:1px solid var(--line);
  background:var(--card);
  padding:16px;
}

/* =========================================================
   Classes list
========================================================= */
.subnav{ margin:0 0 18px; }

.subnav-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
  justify-content:center;
}

.subnav-link{
  display:inline-flex;
  padding:8px 10px;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid transparent;
}
.subnav-link[aria-current="page"]{
  color:var(--fg);
  border-bottom-color:var(--fg);
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.card--compact .card-title{
  margin:0;
  font-size:.9rem;
}

.card-meta{
  margin:12px 0 0;
  display:grid;
  gap:8px;
  color:var(--muted);
  font-size:.85rem;
}
.card-meta .meta-row{
  display:grid;
  grid-template-columns:74px 1fr;
  gap:10px;
}
.card-meta dt{
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:.72rem;
}
.card-meta dd{ margin:0; }

.card-desc{
  margin:12px 0 0;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.8;
}

/* =========================================================
   Class detail
========================================================= */
.class-layout{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:18px;
  padding-top:16px;
}

.class-card{
  border:1px solid var(--line);
  background:var(--card);
  padding:16px;
}

.class-card-header{
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  margin-bottom:12px;
}

.class-title{
  margin:0;
  font-size:1.1rem;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.class-subtitle{
  margin:8px 0 0;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.8;
}

.kv{
  margin:0;
  border:1px solid var(--line);
  background:var(--card);
}
.kv-row{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:14px;
  padding:12px 14px;
  border-top:1px solid var(--line);
}
.kv-row:first-child{ border-top:0; }
.kv dt{
  color:var(--muted);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.kv dd{ margin:0; }

.kv--wide{ border:0; background:transparent; }
.kv--wide .kv-row{
  border:0;
  border-top:1px solid rgba(229,229,229,.8);
  padding:10px 0;
}
.kv--wide .kv-row:first-child{ border-top:0; }

.class-description{
  margin-top:14px;
  color:var(--fg);
  font-size:.9rem;
  line-height:1.9;
}

.slot-list{
  list-style:none;
  padding:0;
  margin:12px 0 0;
  display:grid;
  gap:10px;
}
.slot-button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  background:#fff;
}
.slot-button:hover{ border-color:var(--line-strong); }

.policy-list{
  margin:12px 0 0;
  padding-left:18px;
  color:var(--muted);
  line-height:1.9;
}

.cta-card{
  border:1px solid var(--line);
  background:var(--card);
  padding:16px;
  position:sticky;
  top:18px;
}

.cta-title{
  letter-spacing:.12em;
  text-transform:uppercase;
}

.cta-desc{
  margin:10px 0 0;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.8;
}

.cta-actions{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cta-note{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.85rem;
}

/* Classes: empty state media */
.page-classes .empty-state--media{
  padding:0;
}

.page-classes .empty-state--media .empty-title{
  margin-bottom:14px;
}

.page-classes .empty-media{
  margin:0;
}

.page-classes .empty-media img{
  width:100%;
  height:auto;
  display:block;
  margin:0 auto;
  border:1px solid var(--line);
  background:#fff;
}

/* Mobile */
@media (max-width: 640px){
  .page-classes .empty-state--media{
    padding:18px 16px;
  }
}

/* =========================================================
   Goods list / detail
========================================================= */
.product-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  padding:18px 0 8px;
}

.product-card{
  border:1px solid var(--line);
  background:var(--card);
  overflow:hidden;
}

.product-thumb{
  display:block;
  aspect-ratio:4/3;
  background:#f7f7f7;
}
.product-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.product-body{
  padding:14px 14px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.product-title{
  margin:0;
  font-size:.95rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  line-height:1.35;
}

.product-desc{
  margin:0;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.8;
}

.product-meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
}
.product-price{
  font-weight:600;
  letter-spacing:.04em;
}

.product-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.goods-detail{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
  padding-top:16px;
}

.goods-gallery-main{
  border:1px solid var(--line);
  background:var(--card);
}
.goods-image-main{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}

.goods-gallery-thumbs{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.goods-thumb{
  border:1px solid var(--line);
  background:var(--card);
}
.goods-thumb img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}

.goods-info{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.goods-meta{
  border:1px solid var(--line);
  background:var(--card);
  padding:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  align-items:center;
  justify-content:space-between;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 10px;
  border:1px solid var(--line);
  font-size:.72rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--muted);
}
.badge-success{
  border-color:var(--fg);
  color:var(--fg);
}

.help-text{
  margin:8px 0 0;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.8;
}

.order-form{
  margin-top:12px;
  border:1px solid var(--line);
  background:var(--card);
  padding:16px;
}

.form-row{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:12px;
  align-items:center;
  padding:10px 0;
  border-top:1px solid rgba(229,229,229,.8);
}
.form-row:first-child{ border-top:0; padding-top:0; }

.form-label{
  font-size:.78rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--muted);
}

.form-input{
  height:38px;
  padding:0 12px;
  border:1px solid var(--line-strong);
  background:#fff;
  border-radius:0;
}

.form-fieldset{
  margin:14px 0 0;
  padding:12px 0 0;
  border:0;
  border-top:1px solid var(--line);
}
.form-legend{
  padding:0;
  margin:0 0 6px;
  font-size:.78rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--muted);
}

.form-actions{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
}

.notice{
  margin-top:14px;
  border:1px solid var(--line);
  background:var(--card);
  padding:14px 16px;
}
.notice-title{
  margin:0 0 10px;
  font-size:.9rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.notice-list{
  margin:0;
  padding-left:18px;
  color:var(--muted);
  line-height:1.9;
}

.order-status-panel{
  border:1px solid var(--line);
  background:var(--card);
  padding:16px;
}

.goods-policy{
  margin-top:22px;
  border-top:1px solid var(--line);
  padding-top:22px;
}

.policy-section{
  border:1px solid var(--line);
  background:var(--card);
  padding:14px 16px;
  margin-top:12px;
}
.policy-title{
  margin:0 0 10px;
  font-size:.9rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* =========================================================
   Home (legacy/reference layout)
   - 2분할 히어로 + 중앙 패널
   - 하단 3개 컬렉션 이미지 + 메타
   - Booking 안내(steps 재사용)
   - Students works: 카드형 그리드
========================================================= */

.page-home .home-section{ padding:34px 0; }

.home-main{ padding:0; }

/* 섹션 타이틀(센터, 영문/국문 2줄) */
.page-home .home-section-header{ margin:0 0 22px; text-align:center; }
.page-home .home-section-header--center .home-section-title-en{ margin-top:0; }

.home-section-title-kr{
  margin:0;
  font-size:.9rem;
  letter-spacing:.10em;
  color:rgba(0,0,0,.78);
}
.home-section-title-en{
  margin:6px 0 0;
  font-family:var(--serif);
  font-weight:400;
  font-size:1.25rem;
  letter-spacing:.06em;
  color:rgba(0,0,0,.92);
}

/* HERO: 2분할 */
.page-home .home-hero{ padding-top:0; }
.page-home .home-hero-primary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  border:1px solid var(--line);
}

.page-home .hero-feature{
  position:relative;
  overflow:hidden;
  background:#f7f7f7;
  min-height:clamp(280px, 42vh, 460px);
}
.page-home .hero-feature + .hero-feature{ border-left:1px solid var(--line); }

.page-home .hero-feature-link{
  display:block;
  height:100%;
  text-decoration:none;
  position:relative;
}
.page-home .hero-feature img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 중앙 패널 */
.page-home .hero-feature-overlay{
  position:absolute;
  left:50%;
  bottom:12%;
  transform:translateX(-50%);
  width:min(360px, calc(100% - 56px));
  padding:14px 14px 12px;
  background:rgba(245,245,245,.62);
  border:1px solid rgba(0,0,0,.28);
  text-align:center;
}

.page-home .hero-feature-title{
  margin:0 0 8px;
  font-family:var(--serif);
  font-weight:400;
  font-size:2.05rem;
  letter-spacing:.02em;
  line-height:1.05;
  text-transform:none;
}
.page-home .hero-feature-title--sm{
  font-size:1.35rem;
  letter-spacing:.02em;
}

.page-home .hero-feature-subtitle{
  margin:0 0 10px;
  color:rgba(0,0,0,.70);
  font-size:.82rem;
  line-height:1.6;
}

/* 히어로 버튼(얇은 테두리) */
.page-home .hero-feature-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:6px 16px;
  font-size:.72rem;
  letter-spacing:.10em;
  text-transform:none;
  background:transparent;
  color:var(--fg);
  border:1px solid rgba(0,0,0,.28);
}
.page-home .hero-feature-link:hover .hero-feature-button{
  border-color:rgba(0,0,0,.55);
}

/* HERO SECONDARY: 3장 이미지 + 메타 */
.page-home .home-hero-secondary{
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.page-home .hero-collection-card{
  border:1px solid var(--line);
  background:var(--card);
  overflow:hidden;
}
.page-home .hero-collection-card a{ display:block; }
.page-home .hero-collection-card img{
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  display:block;
}

.page-home .home-hero-collections-meta{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  text-align:center;
}
.page-home .collection-meta-title{
  margin:0;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-family:var(--serif);
}
.page-home .collection-meta-subtitle{
  margin:6px 0 0;
  font-size:.75rem;
  color:var(--muted);
  font-style:italic;
}

/* BOOKING */
.page-home .home-booking-inner{
  border:1px solid var(--line);
  background:var(--card);
  padding:22px 24px;
  display:grid;
  grid-template-columns:1fr 260px;
  gap:22px;
  align-items:start;
}
.page-home .home-booking-note{ margin:10px 0 0; font-size:.78rem; }

/* BOOKING: 1 | 2 | 3 구간 분리 */
.page-home .home-booking-inner.home-booking-inner--triptych{
  border:1px solid var(--line);
  background:var(--card);
  padding:0;                 /* 기존 padding 제거 */
  display:flex;
  align-items:stretch;
}

/* 공통 패널 */
.page-home .home-booking-pane{
  padding:22px 24px;
}


/* 1) 안내: 고정 폭 */
.page-home .home-booking-pane--intro{
  flex:0 0 320px;
}

/* 2) 스탭: 고정 폭 + 왼쪽에 더 붙게(좌측 패딩 축소) */
.page-home .home-booking-pane--steps{
  flex:0 0 520px;
  padding-left:18px;         /* 여기 줄이면 더 “왼쪽에 붙는” 느낌 */
  padding-right:22px;
}

/* steps 기본 margin이 있으면 위쪽만 정리 */
.page-home .home-booking-pane--steps .steps{
  margin-top:0;
}

/* 3) CTA: 구간 자체는 남는 폭을 먹고, 내용은 오른쪽에 고정 */
.page-home .home-booking-pane--cta{
  flex:1 1 auto;
  padding:0;                 /* 구간 여백은 inner에 줌 */
  display:flex;
  justify-content:flex-end;  /* 내용 오른쪽 고정 */
  align-items:flex-start;
}

.page-home .home-booking-cta-inner{
  width:260px;               /* 기존 CTA 폭 유지 */
  padding:22px 24px;
}

/* 모바일: 세로 스택 + 구분선은 위(border-top)로 */
@media (max-width: 960px){
  .page-home .home-booking-inner.home-booking-inner--triptych{
    flex-direction:column;
  }
  .page-home .home-booking-pane + .home-booking-pane{
    border-left:0;
    border-top:1px solid var(--line);
  }
  .page-home .home-booking-pane--intro,
  .page-home .home-booking-pane--steps{
    flex:0 0 auto;
  }
  .page-home .home-booking-pane--cta{
    justify-content:flex-start;
  }
  .page-home .home-booking-cta-inner{
    width:100%;
  }
}

/* 3구간 전체를 세로 가운데 정렬 */
.page-home .home-booking-inner.home-booking-inner--triptych{
  align-items:center;
}

/* 각 패널 내부 요소들이 margin 때문에 위로 튀는 것 방지(특히 p의 기본 margin) */
.page-home .home-booking-pane--intro p{
  margin:0;
}

/* steps도 위쪽 여백 제거(이미 margin-top:0 해뒀다면 유지) */
.page-home .home-booking-pane--steps .steps{
  margin:0;
}

/* (선택) CTA는 기존처럼 '위'에 고정하고 싶다면: 이 줄을 켜세요 */
.page-home .home-booking-pane--cta{
  align-items:flex-start;  /* CTA 영역만 위 정렬 */
}

/* (선택) CTA도 완전히 세로 가운데로 맞추고 싶다면: 위 줄 대신 이 줄 */
.page-home .home-booking-pane--cta{
  align-items:center;
}



/* STUDENT WORKS */
.page-home .home-section-header-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}
.page-home .home-section-arrow{
  width:34px;
  height:34px;
  border:1px solid var(--line-strong);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  line-height:1;
}
.page-home .home-section-arrow:hover{
  border-color:rgba(0,0,0,.55);
}

/* STUDENT WORKS: horizontal carousel track */
.page-home .home-student-grid{
  display:flex;
  flex-wrap:nowrap;
  gap:18px;

  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;

  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;

  padding-bottom:8px;
}

/* 카드가 줄바꿈되지 않게 폭을 고정(뷰포트에서 4장 기준) */
.page-home .home-student-grid .work-card{
  flex:0 0 calc((100% - 54px) / 4); /* gap 18px * 3 = 54px */
  scroll-snap-align:start;
}

.page-home .work-card{
  border:1px solid var(--line);
  background:var(--card);
  overflow:hidden;
}
.page-home .work-card-thumb{
  background:#f7f7f7;
  aspect-ratio:1/1;
  overflow:hidden;
}
.page-home .work-card-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.page-home .work-card-body{
  padding:14px 14px 16px;
}
.page-home .work-card-title{
  margin:0;
  font-size:.9rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  line-height:1.35;
}
.page-home .work-card-subtitle{
  margin:8px 0 0;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.8;
}
.page-home .work-card-price{
  margin:8px 0 0;
  font-weight:600;
  letter-spacing:.04em;
}
.page-home .work-card-actions{ margin-top:12px; }

.page-home .btn-quick-view{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 14px;
  border:1px solid var(--line-strong);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.page-home .btn-quick-view:hover{
  background:var(--fg);
  color:var(--bg);
  border-color:var(--fg);
  text-decoration:none;
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 960px){
  /* Utility */
  .utility-bar-inner{
    flex-direction:column;
    gap:6px;
    align-items:flex-start;
  }

  /* Mobile nav toggles */
  .nav-row-inner{
    justify-content:space-between;
    padding:12px var(--layout-gutter);
  }
  .nav-toggle,
  .search-toggle{
    display:inline-flex;
    font-size:.75rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    padding:6px 12px;
    border:1px solid var(--line-strong);
  }
  .gnb{
    display:none;
    flex-direction:column;
    gap:14px;
    padding:14px 0 0;
    width:100%;
    text-align:center;
  }
  .nav-toggle[aria-expanded="true"] ~ .gnb{ display:flex; }

  /* Brand ornaments off on narrow */
  .brand-row-inner{ grid-template-columns:1fr; }
  .brand-ornament{ display:none; }

  /* Hero stack */
  .hero-grid{ grid-template-columns:1fr; }
  .hero-card + .hero-card{
    border-left:none;
    border-top:1px solid var(--line);
  }
  .hero-body{
    position:static;
    padding:16px 20px 24px;
    background:rgba(255,255,255,.92);
  }

  /* Grids */
  .cols-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .works-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .updates-grid{ grid-template-columns:1fr; }
  .footer-sitemap{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* Home */
  .feature-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .home-works-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }

  /* Lists / detail layouts */
  .about-grid{ grid-template-columns:1fr; }
  .about-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .about-dl-row{ grid-template-columns:1fr; }

  .artwork-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .artwork-detail{ grid-template-columns:1fr; }

  .card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .class-layout{ grid-template-columns:1fr; }
  .cta-card{ position:static; }
  .kv-row{ grid-template-columns:1fr; }

  .product-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .goods-detail{ grid-template-columns:1fr; }
  .goods-gallery-thumbs{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .form-row{ grid-template-columns:1fr; }
  .filter-actions{ width:100%; margin-left:0; }
  .filter-field{ min-width:0; flex:1 1 180px; }

  .page-home .home-hero-primary{ grid-template-columns:1fr; }
  .page-home .hero-feature + .hero-feature{
    border-left:none;
    border-top:1px solid var(--line);
  }

  .page-home .hero-feature-overlay{
    bottom:10%;
    width:min(340px, calc(100% - 40px));
  }

  .page-home .home-hero-secondary{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .page-home .home-hero-collections-meta{ grid-template-columns:repeat(2, minmax(0,1fr)); }

  .page-home .home-booking-inner{
    grid-template-columns:1fr;
  }

  .page-home .home-student-grid .work-card{
    flex-basis:calc((100% - 18px) / 2); /* 2장 */
  }
}

@media (max-width: 640px){
  .layout-container,
  .container{ padding:0 16px; }

  .page{
    padding-left:16px;
    padding-right:16px;
  }
  .page-hero,
  .artwork-toolbar,
  .artwork-list,
  .pagination{
    padding-left:16px;
    padding-right:16px;
  }

  .brand-logo{ width:64px; }

  .cols-2,
  .cols-3{ grid-template-columns:1fr; }
  .works-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  .footer-main{ flex-direction:column; }
  .footer-sitemap{ grid-template-columns:1fr; }

  .artwork-grid{ grid-template-columns:1fr; }
  .card-grid{ grid-template-columns:1fr; }

  .product-grid{ grid-template-columns:1fr; }
  .goods-gallery-thumbs{ grid-template-columns:repeat(3,minmax(0,1fr)); }

  /* Home */
  .feature-grid{ grid-template-columns:1fr; }
  .home-works-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

  .page-home .hero-body.hero-panel{
    bottom:10%;
    width:min(340px, calc(100% - 40px));
  }

  .page-home .home-hero-secondary{ grid-template-columns:1fr; }
  .page-home .home-hero-collections-meta{ grid-template-columns:1fr; }

  .page-home .hero-feature-overlay{
    bottom:10%;
    width:min(340px, calc(100% - 32px));
  }
  .page-home .home-student-grid .work-card{
    flex-basis:78%; /* 한 장 중심 + 옆이 살짝 보이는 형태 */
  }
}


/* =========================================================
   About — reference mood (not a replica)
========================================================= */

.page-about{
  padding-top:32px;
}

/* 종이톤 + 얇은 라인 + 여백 (전체 톤과 연결) */
.page-about .about-panel{
  --about-paper:#fcfbf9;
  background:var(--about-paper);
  border:1px solid rgba(17,17,17,.07);
  padding:34px 40px;
  margin:0 0 22px;
}

/* 공통 헤더 */
.page-about .about-panel-head{
  margin:0 0 18px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(17,17,17,.10);
}
.page-about .about-panel-title{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:1.6rem;
  letter-spacing:.02em;
}
.page-about .about-panel-sub{
  margin:8px 0 0;
  color:rgba(0,0,0,.65);
  font-size:.85rem;
  line-height:1.8;
}

/* split header */
.page-about .about-panel-head--split{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
.page-about .about-panel-right{
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(0,0,0,.60);
}

/* COVER */
.page-about .about-cover-inner{
  text-align:center;
}
.page-about .about-eyebrow{
  margin:0;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(0,0,0,.60);
}
.page-about .about-cover-title{
  margin:12px 0 0;
  font-family:var(--serif);
  font-weight:400;
  font-size:3.2rem;
  letter-spacing:.02em;
  line-height:1.05;
}
.page-about .about-cover-sub{
  margin:10px auto 0;
  max-width:70ch;
  color:rgba(0,0,0,.68);
  font-size:.9rem;
  line-height:1.9;
}
.page-about .about-rule{
  height:1px;
  background:rgba(17,17,17,.12);
  margin:18px auto 14px;
  max-width:900px;
}
.page-about .about-meta-row{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  font-size:.75rem;
  letter-spacing:.10em;
  color:rgba(0,0,0,.62);
}
.page-about .about-band{
  margin-top:18px;
  border-top:1px solid rgba(17,17,17,.10);
  padding-top:14px;
}
.page-about .about-band img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 14 / 2;
  object-fit:cover;
  opacity:.72;
  filter:grayscale(100%);
}

/* CV (기존 구조 재사용 + 톤만 정리) */
.page-about .cv-grid{
  display:grid;
  grid-template-columns:420px 1fr;
  gap:26px;
  align-items:start;
}
.page-about .cv-photo{
  margin:0;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.35);
  padding:12px;
}
.page-about .cv-photo img{
  width:100%;
  object-fit:contain;
  display:block;
}
.page-about .cv-caption{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:10px;
  font-size:.72rem;
  letter-spacing:.12em;
  color:rgba(0,0,0,.70);
}
.page-about .cv-caption-en{ opacity:.9; letter-spacing:.08em; }

.page-about .cv-list{
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid rgba(0,0,0,.16);
}
.page-about .cv-item{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:16px;
  padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,.10);
  font-size:.85rem;
  line-height:1.8;
  color:rgba(0,0,0,.74);
}
.page-about .cv-date{
  font-size:.78rem;
  color:rgba(0,0,0,.55);
  white-space:nowrap;
}
.page-about .cv-divider{
  height:1px;
  background:rgba(0,0,0,.20);
  margin:18px 0;
}

/* STATEMENTS */
.page-about .statement-grid{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:26px;
  align-items:start;
}

.page-about .statement-text--pre{
  white-space: pre-line;
}

/* 이미지 위에 이름(오버레이) — ‘느낌만’ 살짝 */
.page-about .statement-illust--overlay{
  position:relative;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.30);
  padding:14px;
  max-width:340px;
  margin:10px auto 0;
}
.page-about .statement-illust--overlay img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

.page-about .statement-signature--on-image{
  position:absolute;
  left:14px;
  bottom:10px;             /* 이미지 ‘안쪽’에 얹히게(복제 느낌 과함 방지) */
  z-index:2;
  pointer-events:none;

  font-family:var(--serif);
  font-weight:400;
  letter-spacing:.02em;
  line-height:1;

  font-size:clamp(1.9rem, 3.2vw, 2.6rem);
  color:rgba(0,0,0,.82);
  opacity:.92;
}

/* 서명으로 인해 아래 레이아웃이 흔들리지 않게 */
.page-about .statement-left{ padding-bottom:10px; }

.page-about .statement-text{
  margin:0 0 14px;
  font-size:.9rem;
  line-height:2.0;
  color:rgba(0,0,0,.70);
}

/* 운영정보 dl은 기존 스타일을 종이톤에 맞게 */
.page-about .about-dl--sheet{
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.25);
}

/* Responsive */
@media (max-width: 960px){
  .page-about .about-panel{ padding:26px 20px; }
  .page-about .about-cover-title{ font-size:2.6rem; }

  .page-about .cv-grid{ grid-template-columns:1fr; }
  .page-about .statement-grid{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .page-about .statement-signature--on-image{
    left:12px;
    bottom:8px;
    font-size:clamp(1.6rem, 6vw, 2.1rem);
  }
}