/* 잔잔희 — 색과 글꼴은 design-direction.md 그대로 */
:root {
  /* 바탕색은 사진 속 석회벽 색(평균 #BEAB94)에 맞춰 살짝 따뜻하게 */
  --ground: #FBF5EF;
  --surface: #F2E9DF;
  --wine: #2A0C0A;
  --cream: #FFF3E7;
  --greige: #C4B6A3;   /* 로고 베이지 #BCB8AD를 사진 속 석회벽 쪽으로 옮긴 색 */
  --forest: #072203;
  --wgray: #635E58;
  --kakao: #FEE500;      /* 카카오톡 상담 버튼 (손님이 바로 알아보는 색) */
  --kakao-ink: #191919;
  --i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  --i-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  --i-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
  --i-pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E");
  --i-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='10 8 16 12 10 16 10 8' fill='black'/%3E%3C/svg%3E");
  --i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --i-route: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='3 11 22 2 13 21 11 13 3 11'/%3E%3C/svg%3E");
  --i-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4.5A1.5 1.5 0 0 1 3 13.5v-9A1.5 1.5 0 0 1 4.5 3h9A1.5 1.5 0 0 1 15 4.5V5'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-mp-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='black'/%3E%3C/svg%3E");
  --i-mp-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h3.5v14H7zM13.5 5H17v14h-3.5z' fill='black'/%3E%3C/svg%3E");
  --i-mp-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6v12l-9-6zM6 6h2v12H6z' fill='black'/%3E%3C/svg%3E");
  --i-mp-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6v12l9-6zM16 6h2v12h-2z' fill='black'/%3E%3C/svg%3E");
  --i-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-mp-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");

  --font: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", "Batang", serif;

  /* 다섯 단계 */
  --t-small: 0.875rem;                          /* 14px */
  --t-body: 1.0625rem;                          /* 17px */
  --t-lead: clamp(1.125rem, 1.1rem + 0.5vw, 1.5rem);
  --t-head: clamp(2rem, 1.2rem + 3.2vw, 4rem);
  --t-hero: clamp(2.5rem, 1rem + 5.6vw, 6rem);

  --gutter: clamp(16px, 2.2vw, 32px);
  --gap: 8px;
  --section: clamp(96px, 12vw, 200px);
  /* 머리 바 높이 = 로고 높이 + 위아래 14px (+ 휴대폰 위 안전 여백). 메뉴로 칸을 옮겨 가면 이 아래에 내려앉는다 */
  --bar-h: calc(env(safe-area-inset-top, 0px) + 28px + clamp(46px, 26px + 2.4vw, 60px));

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }   /* 부드러운 스크롤은 main.js가 링크마다 직접 (CSS로 켜 두면 다른 페이지 칸으로 들어올 때 자리가 어긋남, 2026-10-17) */
body {
  margin: 0;
  background: var(--ground);
  color: var(--wine);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--wine); color: var(--cream); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--wine); color: var(--cream); padding: 12px 16px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* 페이지 들어올 때 0.5초 페이드 */
.js body { animation: page-in 0.5s var(--ease) both; }
@keyframes page-in { from { opacity: 0; } }
body.is-leaving { opacity: 0; transition: opacity 0.5s var(--ease); }

/* ---------- 상단 바 ---------- */
/* 기본(스크립트 없이도): 밝은 바탕 + 와인 글자. 어디서든 읽힌다. */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--gutter) 14px;
  color: var(--wine);
}
.bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ground);
  transition: opacity 0.6s var(--ease);
}
/* 로고: 둘레 여백을 잘라 낸 파일(images/logo-bar-*.png)을 높이로 맞춰 크게 보이게 (대표 요청 2026-10-16 밤 '로고를 크게') */
.bar__logo { position: relative; display: block; flex: none; height: clamp(46px, 26px + 2.4vw, 60px); }
.bar__logo img { display: block; width: auto; max-width: none; height: 100%; transition: opacity 0.6s var(--ease); }
.bar__logo-cream { opacity: 0; }
.bar__logo-ink { position: absolute; left: 0; top: 0; }
.bar__nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); font-size: 0.9375rem; }
.bar__nav a { text-decoration: none; padding: 8px 0; transition: opacity 0.4s var(--ease); }
.bar__nav a:hover { opacity: 0.65; }
.bar__ask {
  padding: 8px 16px !important;
  background: var(--wine); color: var(--cream);
}
.bar__ask:hover { opacity: 0.85 !important; }
/* 스크립트가 있을 때: 첫 화면 사진 위에서는 바탕을 비워 사진이 보이게 한다.
   사진을 지나면(main.js가 is-solid를 붙이면) 위의 기본 모습으로 돌아온다.
   글자색은 사진 윗부분 밝기에 맞춘다. 데스크톱 사진은 위가 밝은 석회벽이라 와인 글자 그대로,
   휴대폰 사진은 위가 어두워 크림 글자 (첫 화면 사진을 바꾸면 다시 확인). */
.js .bar:not(.is-solid)::before { opacity: 0; }
@media (max-width: 699.98px) {
  .js .bar:not(.is-solid) { color: var(--cream); }
  .js .bar:not(.is-solid) .bar__logo-cream { opacity: 1; }
  .js .bar:not(.is-solid) .bar__logo-ink { opacity: 0; }
  .js .bar:not(.is-solid) .bar__ask { background: var(--cream); color: var(--wine); }
}

/* ---------- 1. 첫 화면 ---------- */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 520px; /* taste-skill-ignore: 100svh 미지원 브라우저용 대비값 */
  overflow: hidden; background: var(--wine);
}
.hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 55%;
}
.hero::after {           /* 글자 아래에만 옅은 검정 덮개 */
  content: ""; position: absolute; inset: 45% 0 0 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0)); /* taste-skill-ignore: 사진 위 글자 아래 덮개 (design-direction.md 허용) */
  pointer-events: none;
}
.hero::before {          /* 메뉴 글자 아래 덮개 — 크림 메뉴를 쓰는 휴대폰에서만 */
  content: none; position: absolute; z-index: 1; inset: 0 0 auto 0; height: 180px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0)); /* taste-skill-ignore: 사진 위 글자 아래 덮개 (design-direction.md 허용) */
  pointer-events: none;
}
@media (max-width: 699.98px) {
  .hero::before { content: ""; }
  .hero::after {         /* 휴대폰 사진은 아래쪽이 밝아 덮개를 조금 진하게 */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0)); /* taste-skill-ignore: 사진 위 글자 아래 덮개 (design-direction.md 허용) */
  }
}
.hero__text {
  position: absolute; z-index: 1;
  left: var(--gutter); right: var(--gutter);
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(28px, 6vh, 64px));
  color: var(--cream);
}
.hero h1 {
  font-size: var(--t-hero); font-weight: 400;
  line-height: 1.12; letter-spacing: -0.03em;
}
.hero__text p { margin-top: 18px; font-size: var(--t-small); letter-spacing: 0.01em; }

.js .hero__media img { animation: hero-light 1.5s var(--ease) both, hero-drift 20s linear 0s both; }
.js .hero__text > * { animation: rise 1.1s var(--ease) both; animation-delay: 0.3s; }
.js .hero__text p { animation-delay: 0.45s; }
@keyframes hero-light { from { opacity: 0; } }
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.05); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* ---------- 2. 작업 사진 격자 ---------- */
.work { padding-top: var(--section); }
.work__intro { padding: 0 var(--gutter) clamp(56px, 7vw, 104px); }
.statement {
  max-width: 21em; margin-left: clamp(0px, 25vw, 400px);
  font-size: clamp(1.375rem, 1rem + 1.2vw, 2.125rem);
  line-height: 1.5; letter-spacing: -0.01em;
}
.grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
  padding: 0 var(--gap);
}
/* 분야별 묶음 — 분야 안에서는 밝은 색 → 어두운 색 순서 */
.group + .group { margin-top: clamp(56px, 7vw, 112px); }
.group__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 0 var(--gutter) clamp(14px, 1.6vw, 22px);
}
.group__title { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
.group__more { font-size: var(--t-small); }
.tile {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  aspect-ratio: 4 / 5; overflow: hidden; cursor: zoom-in;
  background: var(--surface);
  -webkit-tap-highlight-color: transparent;
}
.tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease);
}
/* 마우스를 올리면 사진만 천천히 커진다. 사진 위에 색이나 글을 덮지 않는다
   (분야 이름은 묶음 제목에 이미 있다. 분야·지역·공간은 사진 보기 아래 띠에). */
@media (hover: hover) {
  .tile:hover img, .tile:focus-visible img { transform: scale(1.04); }
}
.tile:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
/* 누른 자리에서 번지는 크림색 물결 */
.ripple {
  position: absolute; z-index: 3; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%; background: var(--cream); pointer-events: none;
  animation: ripple 0.8s var(--ease) forwards;
}
@keyframes ripple { from { opacity: 0.3; transform: scale(0); } /* taste-skill-ignore: 누른 점에서 번지는 물결 */ to { opacity: 0; transform: scale(40); } }

/* ---------- 분야 색 영역 ---------- */
.field--wine   { background: var(--wine);   color: var(--cream); }
.field--greige {           /* 잔잔희 석회벽 사진에서 뽑은 옅은 미장 결 */
  background: var(--greige) url("../images/texture-plaster-beige.jpg") 0 0 / 960px 960px repeat;
  color: var(--wine);
}
.field--forest { background: var(--forest); color: var(--cream); }

.lead { font-size: var(--t-lead); line-height: 1.6; }
.textlink {
  display: inline-flex; gap: 0.5em; align-items: baseline;
  font-weight: 600; text-decoration: none;
  padding-block: 6px;
}
.textlink span { transition: transform 0.6s var(--ease); }
.textlink:hover span, .textlink:focus-visible span { transform: translateX(6px); }
.textlink:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* ---------- 3. 브랜드 소개 ---------- */
.brand { margin-top: var(--section); }
.brand__inner {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter);
  align-items: center;
  padding: clamp(56px, 8vw, 120px) var(--gutter);
}
.brand__logo { grid-column: 1 / span 5; width: 100%; max-width: 560px; }
.brand__text { grid-column: 7 / span 6; display: grid; gap: 28px; justify-items: start; }
.brand h2 { font-size: var(--t-head); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; }
.brand .lead { max-width: 34em; }
.facts { display: grid; gap: 14px; width: 100%; max-width: 34em; padding: 24px; background: rgba(255, 243, 231, 0.07); }
.facts div { display: grid; grid-template-columns: 6.5em 1fr; gap: 16px; }
.facts dt { font-size: var(--t-small); color: var(--greige); padding-top: 2px; }
.facts dd { font-size: var(--t-body); }

/* ---------- 4. 서비스 ---------- */
.services { margin-top: 0; }
.services__head {
  display: grid; gap: 20px; max-width: 46rem;
  padding: clamp(80px, 10vw, 160px) var(--gutter) clamp(48px, 6vw, 96px);
}
.services h2 { font-size: var(--t-head); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; }
.svc {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter);
  align-items: end;
  padding: 0 var(--gutter) clamp(80px, 9vw, 144px);
}
.field--forest .svc { padding-top: clamp(80px, 9vw, 144px); }
.svc__img { grid-column: 1 / span 5; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.svc__text { grid-column: 7 / span 5; display: grid; gap: 18px; justify-items: start; padding-bottom: 8px; }
.svc--flip .svc__img { grid-column: 8 / span 5; grid-row: 1; }
.svc--flip .svc__text { grid-column: 2 / span 5; grid-row: 1; }
.svc h3 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; }
.svc__alias { font-size: var(--t-lead); font-weight: 400; letter-spacing: 0; margin-left: 0.4em; }
.svc p { max-width: 30em; }
.svc__fit { font-size: var(--t-small); }

/* ---------- 5. 대표 현장 ---------- */
.sites { padding-top: var(--section); }
.sites__title {
  padding: 0 var(--gutter) clamp(40px, 5vw, 72px);
  font-size: var(--t-head); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em;
}
.site {
  position: sticky; top: 0;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter);
  align-items: center;
  height: 100vh; height: 100svh; min-height: 640px; /* taste-skill-ignore: 100svh 미지원 브라우저용 대비값 */
  padding: 72px var(--gutter) 40px;
  overflow: hidden;
}
.site__text { grid-column: 1 / span 4; display: grid; gap: 10px; align-self: center; }
.site h3 { font-size: var(--t-hero); font-weight: 400; line-height: 1.05; letter-spacing: -0.04em; }
.site__space { font-size: var(--t-lead); }
.site__tech { font-size: var(--t-body); font-weight: 600; }
.site__main {
  grid-column: 5 / span 5; grid-row: 1;
  justify-self: center;
  height: min(78svh, 900px); width: auto; aspect-ratio: 4 / 5; object-fit: cover;
}
.site__detail {
  grid-column: 10 / span 3; grid-row: 1; align-self: end;
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
}

/* ---------- 6. 문의 ---------- */
.ask {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 24px;
  padding: clamp(96px, 12vw, 180px) var(--gutter);
  padding-left: max(var(--gutter), calc(50vw - 23rem));
}
.ask h2 { font-size: var(--t-head); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; }
.ask .lead { max-width: 26em; }
/* 문의 띠 바로 아래 와인 바닥글이 오면 띠는 밝게 — 와인 두 덩어리가 붙지 않게 (홈 '상담 문의'와 같은 짝) */
.ask--soft { background: var(--surface); color: var(--wine); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 36px; margin-top: 12px;
  font-weight: 600; text-decoration: none;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.btn--cream { background: var(--cream); color: var(--wine); }
.btn--wine { background: var(--wine); color: var(--cream); }
.btn:hover { opacity: 0.88; }
.btn:active { transform: scale(0.98); }

/* ---------- 바닥글 ---------- */
.foot { background: var(--surface); color: var(--wine); padding: 56px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 32px); font-size: var(--t-small); }
/* 바닥글 두 칸 (2026-10-16 밤, 대표 요청): 상담 문의(전화·카톡 버튼은 칸 폭에 맞춘 같은 크기) · 사이트 메뉴(상단 메뉴와 같은 묶음).
   예전 맨 앞 이름 칸(작은 로고 · 이름 · 슬로건 · 전국 시공)은 뺐다. 큰 '잔잔희 潺潺煕'은 맨 위 오른쪽 끝 */
.foot__inner { display: grid; grid-template-columns: 18.5rem auto; justify-content: start; gap: 40px clamp(48px, 7vw, 120px); align-items: start; }
.foot__col { display: grid; gap: 4px; }
.foot__name { font-weight: 600; font-size: var(--t-body); }
.foot__soft { color: var(--wgray); }
.foot__head { margin-bottom: 10px; font-size: var(--t-small); color: var(--wgray); }
.foot__map { display: grid; grid-template-columns: repeat(3, auto); gap: 28px clamp(28px, 3.5vw, 56px); }
.foot__map ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.foot__map a { display: inline-block; padding: 5px 0; font-size: 0.9375rem; text-decoration: none; }
.foot__map a:hover, .foot__map a[aria-current] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.foot__legal { margin-top: 40px; color: var(--wgray); }

/* ---------- 서비스 페이지 ---------- */
/* 1. 분야 색 띠 — 페이지마다 한 곳. 시공 = 베이지, 플랜테리어 = 초록 */
.intro {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: clamp(36px, 4vw, 56px);
  align-items: start;
  padding: clamp(104px, 9vw, 132px) var(--gutter) clamp(56px, 7vw, 112px);
}
/* 제목 + 소개 글은 위쪽 한 줄 전체로 넓게 (대표 요청 2026-10-16 밤 '가시성 있게 글을 가로로 펴줘'),
   그 아래 왼쪽 '한눈에 보기 · 어울리는 공간 · 상담 버튼', 오른쪽 사진 */
.intro__head { grid-column: 1 / -1; grid-row: 1; display: grid; gap: 24px; justify-items: start; }
.intro__text { grid-column: 1 / span 5; grid-row: 2; display: grid; gap: 28px; justify-items: start; }
.intro h1 { font-size: var(--t-head); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; }
.intro .lead { max-width: 46em; }
.intro__fit { display: grid; gap: 10px; }
.intro__fit h2 { font-size: var(--t-body); font-weight: 600; }
.intro__fit ul { display: flex; flex-wrap: wrap; gap: 8px; }
.intro__fit li { padding: 6px 14px; font-size: var(--t-small); background: rgba(255, 243, 231, 0.42); }
.field--forest .intro__fit li { background: rgba(255, 243, 231, 0.1); }
.intro__img {
  grid-column: 7 / span 6; grid-row: 2; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  max-height: calc(100svh - 180px);
}
.js .intro__head > *, .js .intro__text > *, .js .intro__img { animation: rise 1.1s var(--ease) both; }
.js .intro__head > :nth-child(2) { animation-delay: 0.08s; }
.js .intro__text > :nth-child(2) { animation-delay: 0.08s; }
.js .intro__text > :nth-child(3) { animation-delay: 0.16s; }
.js .intro__text > :nth-child(4) { animation-delay: 0.24s; }
.js .intro__img { animation: hero-light 1.5s var(--ease) both; }

/* 2. 작업 사진 */
.work--svc { padding-top: clamp(80px, 9vw, 144px); }

/* 3. 자주 묻는 질문 — 선 없이 간격으로 나눈다 */
.qa {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter);
  padding: var(--section) var(--gutter) 0;
}
.qa > h2 {
  grid-column: 1 / span 4; align-self: start;
  font-size: clamp(1.375rem, 1rem + 1.2vw, 2.125rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.03em;
}
.qa__list { grid-column: 6 / span 6; display: grid; gap: clamp(40px, 4.5vw, 64px); justify-items: start; }
.qa__item { display: grid; gap: 12px; }
.qa__item h3 { font-size: var(--t-lead); font-weight: 600; line-height: 1.45; }
.qa__item p { max-width: 34em; }

/* 4. 다른 작업 */
.more { padding: var(--section) var(--gutter) var(--section); }
.more > h2 {
  margin-bottom: clamp(28px, 3.5vw, 48px);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em;
}
.more__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.more__link { display: grid; gap: 14px; text-decoration: none; }
.more__frame { display: block; overflow: hidden; background: var(--surface); }
.more__frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease); }
.more__name { display: inline-flex; gap: 0.5em; font-size: var(--t-lead); font-weight: 600; }
.more__name span { transition: transform 0.6s var(--ease); }
@media (hover: hover) {
  .more__link:hover img { transform: scale(1.04); }
  .more__link:hover .more__name span { transform: translateX(6px); }
}
.more__link:focus-visible { outline-offset: 6px; }

/* ---------- 사진 보기 ---------- */
.viewer { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 64px var(--gutter) 24px; }
.viewer__scrim { position: absolute; inset: 0; background: rgba(42, 12, 10, 0.94); transition: opacity 0.9s var(--ease); }
.viewer__frame { position: relative; display: grid; justify-items: center; max-width: 100%; }
.viewer__img {
  display: block; max-height: calc(100svh - 200px); width: auto; max-width: 100%;
  transform-origin: 0 0; will-change: transform;
}
.viewer__band {
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline;
  width: 100%; padding: 16px 20px;
  transition: opacity 0.6s var(--ease);
}
.viewer__band[data-tone="build"] { background: var(--greige); color: var(--wine); }
.viewer__band[data-tone="plant"] { background: var(--forest); color: var(--cream); }
.viewer__field { font-size: var(--t-lead); font-weight: 600; }
.viewer__meta { font-size: var(--t-small); }
.viewer__close {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); right: var(--gutter);
  min-height: 44px; padding: 0 20px; border: 0; cursor: pointer;
  background: var(--cream); color: var(--wine); font-weight: 600;
  transition: opacity 0.4s var(--ease);
}
.viewer__close:hover { opacity: 0.85; }
.viewer.is-opening .viewer__scrim, .viewer.is-closing .viewer__scrim { opacity: 0; }
.viewer.is-opening .viewer__band, .viewer.is-closing .viewer__band,
.viewer.is-opening .viewer__close, .viewer.is-closing .viewer__close { opacity: 0; }
body.is-locked { overflow: hidden; }

/* ---------- 포트폴리오 ---------- */
/* 틀: 큰 제목 + 현장 수 → 현장 카드 3열(번호·현장 이름·기법) → 누르면 그 현장 사진 넘겨보기 */
.bar__nav > a[aria-current] { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.work__more { padding: clamp(40px, 5vw, 72px) var(--gutter) 0; }

.page-portfolio main { padding-top: calc(env(safe-area-inset-top, 0px) + 88px); }
.phead {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter);
  align-items: end;
  padding: clamp(48px, 7vw, 120px) var(--gutter) clamp(40px, 5vw, 80px);
}
.phead__title {           /* DESIGN.md '첫 화면 문장' 크기 그대로 */
  grid-column: 1 / span 7;
  font-size: var(--t-hero); font-weight: 400;
  line-height: 1.12; letter-spacing: -0.03em;
}
.phead__side { grid-column: 9 / span 4; display: grid; gap: 6px; color: var(--wgray); }
.phead__hint { color: var(--wine); font-weight: 600; font-size: var(--t-small); margin-top: 6px; }

.works { padding: 0 var(--gutter) var(--section); }
.pgrid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(48px, 6vw, 88px) clamp(16px, 2.4vw, 36px);
}
.pcard {
  display: grid; width: 100%; padding: 0; border: 0; background: none;
  text-align: left; color: inherit; cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.pcard__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pcard__no { margin-top: 18px; font-size: var(--t-small); color: var(--wgray); font-variant-numeric: tabular-nums; }
.pcard__title { margin-top: 2px; font-size: clamp(1.125rem, 1rem + 0.45vw, 1.4rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.pcard__meta { margin-top: 6px; font-size: var(--t-small); color: var(--wgray); }
@media (hover: hover) {
  .pcard:hover .pcard__media img, .pcard:focus-visible .pcard__media img { transform: scale(1.04); }
  .pcard:hover .pcard__title { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
}
.pcard:focus-visible { outline: 2px solid var(--wine); outline-offset: 4px; }

/* 현장 사진 넘겨보기 */

@media (max-width: 1000px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phead__title { grid-column: 1 / -1; }
  .phead__side { grid-column: 1 / -1; margin-top: 28px; }
}
@media (max-width: 699.98px) {
  .page-portfolio main { padding-top: calc(env(safe-area-inset-top, 0px) + 64px); }
}
@media (max-width: 559.98px) {
  .pgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 홈 (2026-10 개편) ----------
   틀만 참고 사이트(classicplaster-daejeon.co.kr)에서 빌려 왔다: 왼쪽 글·오른쪽 대표 사진 첫 화면,
   번호 붙은 섹션, 기법 고르기, 서비스 탭, 4단계, 질문 목록, 사진과 문의.
   글·사진·로고·색·글꼴은 잔잔희 것만 쓴다. 얇은 선·영문 대문자 라벨·그림자는 쓰지 않는다(DESIGN.md). */
.page-home, .page-contact, .page-about, .page-faq, .page-academy { --side: max(var(--gutter), calc(50vw - 620px)); --sec: clamp(72px, 8vw, 128px); }
.page-home main, .page-contact main, .page-about main, .page-faq main, .page-academy main { padding-top: calc(env(safe-area-inset-top, 0px) + 88px); }
.eyebrow { font-size: var(--t-small); color: var(--wgray); }
.field--wine .eyebrow { color: var(--greige); }
.field--greige .eyebrow { color: var(--wine); }   /* 웜그레이는 베이지 위에서 3.2:1이라 와인으로 */
.btn span { margin-left: 0.6em; transition: transform 0.6s var(--ease); }
.btn:hover span { transform: translateX(4px); }

/* 1. 첫 화면 */
.hh {
  display: grid; grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
  min-height: min(calc(100vh - 88px), 780px);
  min-height: min(calc(100svh - 88px), 780px); /* taste-skill-ignore: 100svh 미지원 브라우저용 대비값 */
}
.hh__copy {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: clamp(48px, 6vw, 96px) clamp(24px, 4vw, 72px) clamp(48px, 6vw, 96px) var(--side);
}
/* 첫 화면 후킹 문구 (대표 문구 2026-10-16 밤): '상담의 80%는 "…"로 시작됩니다.' — 손님 말은 와인 큰 글자, 앞뒤는 회색 */
.hh__hook { font-size: var(--t-lead); line-height: 1.5; color: var(--wgray); }   /* 첫 화면 맨 위 (위의 '전국 시공 · 출장비 포함' 이름표는 대표 요청으로 뺌, 2026-10-16 밤) */
.hh__hook-lead { display: block; margin-bottom: 6px; }
.hh__hook-quote { quotes: "\201C" "\201D"; font-size: clamp(1.375rem, 1rem + 1vw, 2rem); line-height: 1.42; letter-spacing: -0.02em; color: var(--wine); text-wrap: balance; }
.hh__hook-tail { display: inline-block; margin-left: 2px; white-space: nowrap; }   /* '로 시작됩니다.'는 한 덩어리로 (줄이 모자라면 통째로 다음 줄) */
.hh__title { margin-top: clamp(26px, 2.6vw, 36px); }
.hh__services { display: block; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); font-weight: 600; line-height: 1.16; letter-spacing: -0.03em; }
.hh__desc { margin-top: 14px; max-width: 26em; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.6; }   /* 후킹 문구 바로 아래, 잔잔희의 답 (대표 요청 2026-10-16 밤) */
.hh__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 36px; }
.hh__actions .btn { margin-top: 0; }
.hh__visual { position: relative; overflow: hidden; min-height: 440px; background: var(--surface); }
/* 잔잔희 둥근 로고 (첫 화면 사진 오른쪽 위): 스크롤을 내리면 글자 고리와 궤도가 천천히 돈다 — home.js */
.emblem { position: absolute; z-index: 1; top: clamp(14px, 2.2vw, 34px); right: clamp(14px, 2.2vw, 34px); width: clamp(104px, 10vw, 156px); color: var(--wine); pointer-events: none; }
.emblem svg { display: block; width: 100%; height: auto; overflow: visible; }
.emblem__line { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.75; }
.emblem__dot { fill: currentColor; }
.emblem__disc { fill: var(--ground); }
.emblem__ring text { fill: currentColor; }
.emblem__seal rect { fill: var(--wine); }
.emblem__seal text { fill: var(--cream); }
/* 스크롤을 내려 첫 화면 사진을 지나면, 둥근 로고가 '무료 전화상담 · 무료 카톡상담' 버튼 위로 옮겨 붙어 따라온다
   (대표 요청 2026-10-16 밤 — home.js가 is-docked. 23:47부터 휴대폰도 따라옴). 첫 화면에서는 사진 위 원래 자리.
   바닥글이 보이거나 사진 창 · 메뉴 판이 열리면 버튼처럼 숨는다(main.js). */
.emblem.is-docked {
  position: fixed; z-index: 14; top: auto;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 62px);
  width: clamp(96px, 8vw, 124px);
  animation: emblem-in 0.6s var(--ease);
  transition: opacity 0.4s var(--ease), visibility 0s linear 0s;
}
.emblem.is-docked.is-away, body.is-locked .emblem.is-docked {
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}
@media (max-width: 699.98px) {
  .emblem.is-docked { width: 76px; bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 60px); }   /* 휴대폰: 상담 버튼 줄 바로 위 오른쪽 */
}
@keyframes emblem-in { from { opacity: 0; transform: translateY(10px) scale(0.92); } }
@media (prefers-reduced-motion: reduce) { .emblem.is-docked { animation: none; } }
.hh__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.9s var(--ease);
}
.hh__photo.is-active { opacity: 1; }
.hh__caption {
  position: absolute; z-index: 1; left: clamp(16px, 2vw, 32px); right: clamp(16px, 2vw, 32px); bottom: clamp(16px, 2vw, 32px);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 12px;
}
.hh__feature {
  display: grid; gap: 4px; justify-items: start; max-width: 100%;
  padding: 16px 20px; border: 0; background: var(--cream); color: var(--wine); text-align: left; cursor: pointer;
}
.hh__feature-label, .hh__feature-tech { font-size: var(--t-small); color: var(--wgray); }
.hh__feature-title { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.3; }
.hh__feature-title span { display: inline-block; transition: transform 0.6s var(--ease); }
.hh__feature:hover .hh__feature-title span { transform: translateX(6px); }
.hh__switch { display: flex; gap: 4px; }
.hh__switch button {
  min-height: 44px; padding: 0 14px; border: 0; cursor: pointer;
  background: var(--cream); color: var(--wine); font-size: var(--t-small);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.hh__switch button[aria-pressed="true"] { background: var(--wine); color: var(--cream); }
.hh__switch span { margin-right: 4px; }
.ribbon {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  padding: 18px var(--side); background: var(--surface); font-size: var(--t-small);
}
.ribbon .textlink { padding-block: 4px; }

/* 섹션 머리: 번호와 이름, 제목, 설명 (오른쪽에 링크) */
.shead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; }
.shead__main { display: grid; gap: 14px; max-width: 44rem; }
.shead h2, .hintro h2, .hsvc h2, .hask h2 {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); font-weight: 600; line-height: 1.18; letter-spacing: -0.03em;
}
.shead__desc { max-width: 24em; color: var(--wgray); }

/* 2. 브랜드 소개 (와인) */
.hintro {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px clamp(32px, 8vw, 128px);
  align-items: start; padding: var(--sec) var(--side);
}
.hintro__head { display: grid; gap: 16px; }
.hintro__body { display: grid; gap: 32px; justify-items: start; }
.hintro__text { display: grid; gap: 14px; max-width: 36em; }
.hfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.hfacts div { display: grid; align-content: start; gap: 10px; padding: 20px; background: rgba(255, 243, 231, 0.07); }
.hfacts dt { font-size: var(--t-small); color: var(--greige); }
.hfacts dt span { margin-right: 8px; }

/* 3. 시공 사례 */
.hworks { padding: var(--sec) var(--side); background: var(--surface); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px, 3vw, 44px); }
.chip {
  min-height: 44px; padding: 0 18px; border: 0; cursor: pointer;
  background: var(--ground); color: var(--wine); font-size: var(--t-small);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.chip:hover { background: var(--cream); }
.chip[aria-pressed="true"] { background: var(--wine); color: var(--cream); }
.hgrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 64px) clamp(16px, 2.8vw, 40px); margin-top: clamp(24px, 2.6vw, 36px);
}
.hcard {
  display: grid; gap: 8px; justify-items: start; width: 100%;
  padding: 0; border: 0; background: none; color: var(--wine); text-align: left; cursor: pointer;
}
.hcard__media { position: relative; display: block; width: 100%; aspect-ratio: 5 / 4; margin-bottom: 8px; overflow: hidden; background: var(--ground); }
.hcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
/* 현장 카드 사진 아래 한 줄 (대표 요청 2026-10-16 밤, 참고 'STUDIO , Gyeonggi | 스튜디오 경기'):
   영문 업종 , 영문 지역 | 한글 업종 한글 지역. 현장 이름은 사진 보기 창과 화면 읽기용 이름에 남긴다 */
.cap { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); font-weight: 600; line-height: 1.45; letter-spacing: 0; color: var(--wine); }   /* 진하게 (대표 요청 2026-10-17 0시) */
.cap i {   /* 구분 막대: 글자('|')는 아래로 길게 내려가 글자 줄 가운데에서 벗어나서, 같은 자리에 가는 선을 그려 글자 높이 가운데에 맞춘다
             (대표 요청 2026-10-17 0시 '중간정렬' — 영문 대문자·한글 높이의 가운데 = 기준선 위 0.38em) */
  display: inline-block; width: 1px; height: 0.8em; margin: 0 0.45em; overflow: hidden; vertical-align: -0.02em;
  font-style: normal; color: transparent; background: var(--wgray);
}
.cap__en, .cap__ko { white-space: nowrap; }   /* 영문 · 한글 덩어리는 각각 한 줄로 */
@media (hover: hover) {
  .hcard:hover .hcard__media img { transform: scale(1.04); }
  .hcard:hover .cap { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
}
.hcard:focus-visible { outline: 2px solid var(--wine); outline-offset: 6px; }
.hnote {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  margin-top: clamp(48px, 5vw, 72px); padding: clamp(24px, 3vw, 36px); background: var(--ground);
}
.hnote p { font-size: var(--t-lead); }
.hnote .btn { margin-top: 0; }
.hnote strong { margin-right: 12px; font-weight: 600; }

/* 4. '잔잔희가 하는 일' 목록 (홈 소개 안, 2026-10-16 밤부터. 예전 '시공 서비스' 칸·사진 탭은 뺐다) */
.hsvc__list { display: grid; gap: 8px; margin-top: clamp(32px, 4vw, 56px); }
.hsvc__list a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "no name arrow" "no desc arrow";
  gap: 4px 18px; align-items: baseline; padding: 18px 20px;
  background: rgba(255, 243, 231, 0.55); text-decoration: none;
  transition: background-color 0.4s var(--ease);
}
.hsvc__no { grid-area: no; font-size: var(--t-small); }
.hsvc__name { grid-area: name; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.3; }
.hsvc__desc { grid-area: desc; font-size: var(--t-small); }
.hsvc__arrow { grid-area: arrow; align-self: center; transition: transform 0.6s var(--ease); }
.hsvc__list a:hover { background: var(--cream); }
.hsvc__list a:hover .hsvc__arrow { transform: translateX(6px); }

/* 5. 함께 연출하는 순서 */
.hflow { padding: var(--sec) var(--side); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none; }
.steps li { display: grid; align-content: start; gap: 8px; padding: clamp(20px, 2.2vw, 32px); background: var(--surface); }
.steps__no { font-size: var(--t-small); color: var(--wgray); }
.steps h3 { margin-top: clamp(28px, 4vw, 56px); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.3; }
.steps__tech { font-size: var(--t-small); font-weight: 600; }
.steps li p:last-child { font-size: var(--t-small); line-height: 1.7; }

/* 6. 자주 묻는 질문 */
.hfaq { padding: var(--sec) var(--side); background: var(--surface); }
.hfaq__layout {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px clamp(24px, 5vw, 80px);
  align-items: start; margin-top: clamp(32px, 4vw, 56px);
}
.prep { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: start; padding: clamp(24px, 3vw, 40px); background: var(--ground); }
.prep__label { font-size: var(--t-small); color: var(--wgray); }
.prep h3 { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.35; }
.prep__list { display: grid; gap: 8px; width: 100%; margin: 0; padding: 0; list-style: none; }
.prep__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; padding: 14px 16px; background: var(--surface); }
.prep__list span { grid-row: span 2; padding-top: 2px; font-size: var(--t-small); color: var(--wgray); }
.prep__list strong { font-weight: 600; }
.prep__list em { font-style: normal; font-size: var(--t-small); color: var(--wgray); }
.prep .btn { margin-top: 6px; }
.qa2 { display: grid; gap: 8px; }
.qa2 details { background: var(--ground); }
.qa2 summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 24px;
  font-weight: 600; cursor: pointer; list-style: none;
}
.qa2 summary::-webkit-details-marker { display: none; }
.qa2 summary::after { content: "+"; flex: none; font-size: var(--t-lead); font-weight: 400; line-height: 1; transition: transform 0.5s var(--ease); }
.qa2 details[open] summary::after { transform: rotate(45deg); }
.qa2 summary:focus-visible { outline-offset: -4px; }
.qa2 details p { max-width: 40em; padding: 0 24px 24px; }
/* 질문 번호 (대표 요청 2026-10-16 밤 '질문을 Q1. 이렇게 시작해줘, 답변이랑 차이가 나게'):
   질문 앞에 Q1. — 홈·서비스 페이지는 목록마다 1부터, 자주 묻는 질문 페이지는 묶음을 넘어 이어서 센다(HTML은 그대로). */
.qa2, .qa__list, .faqs { counter-reset: faq; }
.faqs .qa2 { counter-reset: none; }
.qa2 summary { justify-content: flex-start; gap: 12px; }
.qa2 summary::after { margin-left: auto; }
.qa2 summary::before, .qa__item h3::before {
  counter-increment: faq; content: "Q" counter(faq) ".";
  flex: none; color: var(--wgray); font-weight: 600; font-variant-numeric: tabular-nums;
}
.qa__item h3::before { margin-right: 0.45em; }

/* 7. 상담 문의 */
/* 사진 + 둥근 설명 판 (대표 요청 2026-10-16 밤, 참고 화면: 사진 옆에 둥근 판으로 설명하는 줄):
   사진과 글을 나란히 두고, 글은 크림 베이지 둥근 판 안에 가운데로. 사진은 판 높이에 맞춰 채운다. 좁은 휴대폰에서만 위아래. */
.hask {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 2vw, 28px);
  align-items: stretch; padding: var(--sec) var(--side);
}
.hask__photo img { width: 100%; height: 100%; min-height: clamp(320px, 38vw, 560px); object-fit: cover; contain: size; }   /* 줄 높이는 글 판이 정하고 사진은 채운다 */
.hask__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: start; align-content: center; padding: clamp(28px, 4.5vw, 64px); background: var(--surface); border-radius: var(--round-panel); }
.hask__card { display: grid; gap: 6px; justify-items: start; width: 100%; margin-top: 16px; padding: clamp(24px, 3vw, 36px); background: var(--surface); }
.hask__name { font-size: var(--t-lead); font-weight: 600; }
.hask__soft { font-size: var(--t-small); color: var(--wgray); }
/* 전화·카카오톡 버튼 짝: 늘 같은 크기 — 넓으면 나란히, 좁으면 위아래로 같은 폭 (대표 요청 2026-10-16) */
.hask__actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; max-width: 30rem; margin-top: 18px; }
.hask__actions .btn { flex: 1 1 13rem; justify-content: center; }   /* 한 줄에 둘, 좁으면 위아래로 */
.hask__actions .btn { margin-top: 0; }
/* 전화번호: 크게, 누르면 전화 */
.tel { margin-top: 14px; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; text-decoration: none; }
.tel:hover { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
/* 잔잔희 채널 (인스타그램·유튜브 …) */
.sns { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 10px; }
.sns a { display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; font-size: var(--t-small); font-weight: 600; text-decoration: none; }
.sns a:hover { text-decoration: underline; text-underline-offset: 5px; }
.sns__id { font-weight: 400; color: var(--wgray); }

/* 빠른 상담: 화면 오른쪽 아래 고정. 바닥글이 보이거나(main.js) 사진 보기가 열리면 숨는다 */
.fab {
  position: fixed; z-index: 15; display: flex; gap: 4px;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0s;
}
.fab__btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px;
  border: 2px solid var(--wine); background: var(--wine); color: var(--cream);
  font-size: var(--t-small); font-weight: 600; text-decoration: none;
  transition: opacity 0.4s var(--ease);
}
.fab__btn--kakao { background: var(--cream); color: var(--wine); }
.fab__btn:hover { opacity: 0.88; }
.fab.is-away, body.is-locked .fab {
  opacity: 0; transform: translateY(8px); visibility: hidden;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0.4s;
}

/* 브랜드 소개·자주 묻는 질문 페이지 (2026-10-16, 사업 문서 바탕) */
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hnote .hask__actions { margin-top: 0; }
.hnote .btn--cream { background: var(--surface); }   /* 석회 화이트 카드 위에서도 버튼 면이 보이게 */
.hfaq > .hnote:first-child { margin-top: 0; }   /* 브랜드 소개 끝 상담 카드: 구역 여백만 쓰기 */
.proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: clamp(32px, 4vw, 56px); }
.proof div { display: grid; align-content: start; gap: 8px; padding: clamp(20px, 2.2vw, 32px); background: var(--ground); }
.proof dt { font-size: var(--t-small); color: var(--wgray); }
.proof dd { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.35; }
.sitelist { display: grid; gap: 8px; margin-top: 8px; }
.sitelist li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; padding: 18px 20px; background: var(--ground); }
.sitelist strong { font-size: var(--t-lead); font-weight: 600; }
.sitelist span { font-size: var(--t-small); color: var(--wgray); }
.aquote { display: grid; justify-items: center; gap: clamp(20px, 2.4vw, 32px); padding: var(--sec) var(--side); text-align: center; }
/* 이름의 뜻: 潺 흐를 잔 · 潺 고요할 잔 · 煕 빛날 희 */
.aquote .eyebrow { margin: 0; }
.aname { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(28px, 6vw, 96px); margin: 0; padding: 0; list-style: none; }
.aname li { display: grid; justify-items: center; gap: 10px; }
.aname__han { font-size: var(--t-head); font-weight: 400; line-height: 1; }
.aname__ko { font-size: var(--t-small); color: var(--wgray); letter-spacing: 0.06em; }
.aname__line { font-size: var(--t-lead); }
.aquote__big { margin-top: clamp(8px, 2.4vw, 32px); font-size: var(--t-hero); font-weight: 400; line-height: 1.2; letter-spacing: -0.03em; text-wrap: balance; }
.fhead { padding: var(--sec) var(--side) clamp(24px, 3vw, 40px); }
.fhead--end { padding: clamp(32px, 4vw, 56px) var(--side) var(--sec); }
.faqs { padding: 0 var(--side); }
.faqg { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px clamp(24px, 5vw, 80px); align-items: start; padding-block: clamp(28px, 3.5vw, 48px); }
.faqg__head { display: grid; gap: 8px; justify-items: start; }
.faqg h2 { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.3; }
.page-faq .qa2 details { background: var(--surface); }

/* 문의 페이지 */
.ctitle { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); font-weight: 600; line-height: 1.18; letter-spacing: -0.03em; }
.cprep {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px clamp(32px, 8vw, 128px);
  align-items: start; padding: var(--sec) var(--side); background: var(--surface);
}
.cprep__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cprep h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); font-weight: 600; line-height: 1.18; letter-spacing: -0.03em; }
.cprep .prep__list li { background: var(--ground); }

/* 바닥글 (와인) — 큰 이름 */
.foot--wine { background: var(--wine); color: var(--cream); padding-top: clamp(56px, 7vw, 104px); }
.foot--wine .foot__soft, .foot--wine .foot__legal, .foot--wine .foot__head { color: var(--greige); }
.page-home .foot, .page-contact .foot, .page-about .foot, .page-faq .foot, .page-academy .foot { padding-left: var(--side); padding-right: var(--side); }
/* 바닥글 상담 경로 (2026-10-16): 전화 버튼 — 카톡 버튼·채널 링크는 아래 '연락 경로' 블록 */
.foot__tel {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px;
  background: var(--wine); color: var(--cream);
  font-size: var(--t-body); font-weight: 600; text-decoration: none;
  transition: opacity 0.4s var(--ease);
}
.foot--wine .foot__tel { background: var(--cream); color: var(--wine); }
.foot__tel:hover { opacity: 0.88; }
.foot__tel:focus-visible, .foot__sns a:focus-visible, .foot__map a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.foot__mark { margin-bottom: clamp(40px, 5vw, 72px); font-size: var(--t-hero); font-weight: 400; line-height: 1; letter-spacing: -0.04em; text-align: right; }   /* 오른쪽 끝 (대표 요청 2026-10-16 밤) */
.foot__mark span { margin-left: 0.3em; font-size: var(--t-head); letter-spacing: 0; color: var(--greige); }

/* ===================================================================
   연락 경로 아이콘 · 카카오 버튼 · 상담 영역 · 오시는 길 · 포트폴리오 카드 · 배경음악
   (2026-10-16, 대표가 보낸 참고 화면 구조를 잔잔희 색·글꼴로)
   아이콘 모양: Feather Icons (MIT, Copyright (c) 2013-2017 Cole Bemis).
   회사 로고가 아니라 일반 기호만 쓴다: 전화기 · 말풍선 · 카메라 · 펜 · 재생 · 핀 · 길 화살표.
   =================================================================== */

/* 아이콘은 링크 주소로 정해진다 → 서비스 페이지도 HTML을 고치지 않고 같이 바뀐다 */
[href^="tel:"]             { --ico: var(--i-phone); }
[href*="open.kakao.com"]   { --ico: var(--i-chat); }
[href*="instagram.com"]    { --ico: var(--i-camera); }
[href*="blog.naver.com"]   { --ico: var(--i-pen); }
[href*="youtube.com"]      { --ico: var(--i-play); }
[href*="naver.me"]         { --ico: var(--i-pin); }
[href*="google.com/maps"]  { --ico: var(--i-route); }
:is(.fab__btn, .btn, .foot__tel, .foot__kakao, .sns a, .foot__sns a, .visit__btn):is([href^="tel:"], [href*="open.kakao.com"], [href*="instagram.com"], [href*="blog.naver.com"], [href*="youtube.com"], [href*="naver.me"], [href*="google.com/maps"])::before {
  content: ""; flex: none; width: 1.15em; height: 1.15em;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.btn, .fab__btn { gap: 10px; }
.fab__btn:not(.fab__btn--kakao) { border-color: rgba(255, 243, 231, 0.4); }   /* 와인 바탕 위에서도 전화 버튼 테두리가 보이게 (밝은 바탕에서는 거의 안 보임) */

/* 카카오톡 상담: 손님이 바로 알아보는 카카오 노랑 (참고 화면 '카톡' 버튼) */
a.btn[href*="open.kakao.com"], .fab__btn--kakao, .foot__kakao {
  background: var(--kakao); color: var(--kakao-ink); border-color: var(--kakao);
}

/* 큰 전화번호 뒤 전화기 아이콘은 대표 요청으로 뺐다 (2026-10-17 0시 '지우기') — 번호만 크게 */

/* 채널 링크: 아이콘 + 이름 + ↗ (바깥 링크) */
.sns { gap: 4px 28px; }
.sns a { gap: 8px; font-weight: 500; }
.sns a::after { content: "↗"; content: "↗" / ""; font-weight: 400; color: var(--wgray); }

/* 바닥글: 전화·카톡 버튼은 위아래로 같은 폭(상담 칸 18.5rem) + 채널 링크는 한 줄에 하나씩 */
.foot__cta { display: grid; gap: 8px; }
.foot__cta a { justify-content: center; }
.foot__kakao {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px;
  font-size: var(--t-body); font-weight: 600; text-decoration: none;
  transition: opacity 0.4s var(--ease);
}
.foot__tel { gap: 10px; }
.foot__kakao:hover { opacity: 0.88; }
.foot__sns { display: grid; justify-items: start; margin-top: 14px; }   /* 인스타그램 → 유튜브 → 네이버 블로그 (대표 요청 2026-10-16) */
.foot__sns a[href*="instagram.com"] { order: 1; }
.foot__sns a[href*="youtube.com"] { order: 2; }
.foot__sns a[href*="blog.naver.com"] { order: 3; }
.foot__sns a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
.foot__sns a::after { content: "↗"; content: "↗" / ""; color: var(--wgray); }
.foot--wine .foot__sns a::after { color: var(--greige); }
.foot__sns a:hover { text-decoration: underline; text-underline-offset: 5px; }
.foot__kakao:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* 상담 문의 (홈·문의 페이지): 사진 + 큰 제목 · 설명 · 이름 · 큰 전화번호 · 버튼 · 채널 */
.hask__photo { display: grid; grid-template-rows: minmax(0, 1fr); margin: 0; border-radius: var(--round-panel); overflow: hidden; }   /* 사진 아래 설명 띠는 뺐다 (대표 요청 2026-10-16 밤) */
.hask__title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); font-weight: 600; line-height: 1.18; letter-spacing: -0.03em; text-wrap: balance; }
.hask__desc { max-width: 30em; color: var(--wgray); line-height: 1.75; }
.hask__info { display: grid; gap: 4px; margin-top: 10px; padding-top: 22px; }
.hask__info .tel { margin-top: 12px; }
.hask__copy > .hask__actions { margin-top: 6px; }

/* 상담 준비 카드 안 버튼 */
.prep .hask__actions { justify-self: stretch; max-width: none; margin-top: 6px; }   /* 상담 준비 카드: 카드 폭 가득, 가운데 */
.prep .btn { padding: 0 20px; }
.prep__list em { display: block; }

/* 오시는 길 (문의 페이지) */
.visit {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  margin: 0 var(--side) var(--sec); background: var(--surface);
}
.visit__info { display: grid; align-content: center; justify-items: start; gap: 14px; padding: clamp(28px, 4vw, 56px); }
.visit__info h2 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.visit__addr { font-style: normal; color: var(--wgray); }
.visit__note { font-size: var(--t-small); color: var(--wgray); }
.visit__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.visit__btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px;
  font-size: var(--t-small); font-weight: 600; text-decoration: none;
  background: var(--ground); color: var(--wine); transition: opacity 0.4s var(--ease);
}
.visit__btn--main { background: var(--wine); color: var(--cream); }
.visit__btn:hover { opacity: 0.88; }
.visit__map { position: relative; min-height: 360px; background: var(--greige); }
.visit__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.visit__fallback { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; text-align: center; font-size: var(--t-small); color: var(--wine); }

/* 주소 복사 (대표 요청 2026-10-17 새벽): 주소 옆 동그란 아이콘 버튼 → 누르면 체크로 바뀌고 위에 '복사됐어요' 말풍선.
   말풍선은 겹쳐 띄워서 주소 줄이 밀리지 않는다. 스크립트가 있어야 동작하므로 .js일 때만 보인다 */
.visit__addrrow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.visit__addrrow .visit__addr { min-width: 0; }
.visit__addr span { white-space: nowrap; }   /* 두 줄이 되면 '대구광역시 수성구 / 들안로13길 83' */
.visit__copywrap { position: relative; flex: none; display: none; }
.js .visit__copywrap { display: inline-flex; }
.visit__copy {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: var(--ground); color: var(--wine); cursor: pointer;
  transition: opacity 0.4s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.visit__copy::before {
  content: ""; width: 19px; height: 19px; background: currentColor;
  -webkit-mask: var(--i-copy) center / contain no-repeat; mask: var(--i-copy) center / contain no-repeat;
}
.visit__copy.is-done { background: var(--wine); color: var(--cream); }
.visit__copy.is-done::before { -webkit-mask-image: var(--i-check); mask-image: var(--i-check); }
.visit__copy:hover { opacity: 0.88; }
.visit__copy:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
.visit__copied {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 2;
  padding: 7px 11px; border-radius: 10px; background: var(--wine); color: var(--cream);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.visit__copied:not(:empty) { opacity: 1; transform: none; }

/* 포트폴리오: 분야 탭 + 현장 카드 (사진 · 사진 수 · 기법 · 이름 · 지역 · 시공 내용) */
.wtabs { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-bottom: clamp(28px, 3vw, 44px); }
.wtab {
  position: relative; min-height: 48px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--t-body); font-weight: 500; color: var(--wgray);
}
.wtab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.wtab[aria-pressed="true"] { color: var(--wine); font-weight: 600; }
.wtab[aria-pressed="true"]::after { transform: none; }
.wtab:hover { color: var(--wine); }
.wtab:focus-visible { outline: 2px solid var(--wine); outline-offset: 4px; }
.wlist {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(56px, 6vw, 96px) clamp(16px, 3vw, 48px); margin: 0; padding: 0; list-style: none;
}
.wcard { display: grid; gap: 18px; }
.wcard__photo {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.wcard .pcard__media { aspect-ratio: 5 / 4; }
.wcard__body { display: grid; gap: 6px; }
.wcard__tech { font-size: var(--t-small); color: var(--wgray); }
.wcard__tech a { text-decoration: none; }
.wcard__tech a:hover { color: var(--wine); text-decoration: underline; text-underline-offset: 4px; }
.wcard__title { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.wcard__title button {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: zoom-in;
}
.wcard__title button span { flex: none; font-size: 0.7em; font-weight: 400; transition: transform 0.6s var(--ease); }
.wcard__place { color: var(--wgray); }
.wcard__rows { display: grid; gap: 10px; margin: 10px 0 0; padding: 18px 20px; background: var(--surface); }
.wcard__rows div { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 16px; }
.wcard__rows dt { font-weight: 600; }
.wcard__rows dd { margin: 0; }
.wcard__photo:focus-visible, .wcard__title button:focus-visible { outline: 2px solid var(--wine); outline-offset: 4px; }
@media (hover: hover) {
  .wcard__photo:hover .pcard__media img { transform: scale(1.04); }
  .wcard__title button:hover span, .wcard__photo:hover ~ .wcard__body .wcard__title span { transform: translate(4px, -4px); }
}
.wempty { display: grid; gap: 10px; justify-items: start; padding: clamp(28px, 4vw, 48px); background: var(--surface); }
.wempty strong { font-weight: 600; }

/* 손님 후기 (홈): 네이버 방문자 후기 원문이 오른쪽에서 왼쪽으로 천천히 흐른다 */
.hreview { display: grid; gap: clamp(28px, 3vw, 44px); justify-items: start; padding: var(--sec) var(--side); background: var(--surface); overflow: hidden; }
.hreview .shead { width: 100%; }
.hreview__side { display: grid; gap: 12px; justify-items: start; }
.rv__pause {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 0; background: var(--ground); color: var(--wine); font: inherit; font-size: var(--t-small); font-weight: 600; cursor: pointer;
}
.rv__pause::before { content: "❚❚"; content: "❚❚" / ""; font-size: 0.7em; letter-spacing: -0.1em; }
.rv__pause[aria-pressed="true"]::before { content: "▶"; content: "▶" / ""; letter-spacing: 0; }
.rv__pause:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
.rvmarquee { width: calc(100% + 2 * var(--side)); margin: 0 calc(-1 * var(--side)); overflow-x: auto; scrollbar-width: none; }
.rvmarquee::-webkit-scrollbar { display: none; }
.rvtrack { display: flex; gap: 16px; width: max-content; margin: 0; padding: 0 0 14px; list-style: none; }
.rvmarquee:not(.is-moving) .rvtrack { padding-inline: var(--side); }   /* 손으로 넘길 때는 양옆 여백 */
.rv { position: relative; flex: 0 0 clamp(264px, 24vw, 340px); display: grid; align-content: space-between; gap: 20px; margin: 0; padding: clamp(22px, 2.2vw, 30px); background: var(--ground); }
.rv::after {   /* 말풍선 꼬리 */
  content: ""; position: absolute; left: 28px; bottom: -12px;
  border-style: solid; border-width: 12px 14px 0 0; border-color: var(--ground) transparent transparent transparent;
}
.rv__quote { margin: 0; }
.rv__quote p { font-size: var(--t-body); line-height: 1.75; text-wrap: pretty; }
.rv__quote p::before { content: "“"; content: "“" / ""; }
.rv__quote p::after { content: "”"; content: "”" / ""; }
.rv__quote strong { font-weight: 600; }
.rv__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--t-small); color: var(--wgray); }
.rv__star { color: var(--wine); letter-spacing: 0.08em; }
.rv__half { position: relative; color: rgba(42, 12, 10, 0.22); }   /* 4.5점: 다섯째 별은 왼쪽 절반만 와인색 */
.rv__half::before { content: "★"; content: "★" / ""; position: absolute; left: 0; top: 0; width: 0.5em; overflow: hidden; color: var(--wine); }
/* 흐름 (main 쪽 home.js가 후기 줄을 한 벌 더 붙이고 is-moving을 켠다) */
.rvmarquee.is-moving { overflow: hidden; }
.rvmarquee.is-moving .rvtrack { animation: rv-flow var(--rv-dur, 150s) linear infinite; }
.rvmarquee.is-moving:hover .rvtrack, .rvmarquee.is-paused .rvtrack { animation-play-state: paused; }
@keyframes rv-flow { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } }
@media (prefers-reduced-motion: reduce) {
  .rvmarquee.is-moving .rvtrack { animation: none; }
}

/* 잔잔희 플레이리스트 (배경음악 다섯 곡): 화면 왼쪽 아래 작은 막대(표지 · 곡 이름 · 재생/멈춤).
   표지를 누르면 위로 목록이 열린다. 조금 내려가면 나타나고, 음악이 나오는 동안·목록이 열린 동안은 늘 보인다 */
.mp {
  position: fixed; z-index: 15;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  max-width: calc(100vw - 32px);
  color: var(--wine); font-size: var(--t-small); line-height: 1.5;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0.4s;
}
.mp.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0s; }
body.is-locked .mp { opacity: 0; visibility: hidden; }
:where(.mp) button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }   /* :where → 아래 칸별 여백이 이긴다 */
.mp button:focus-visible, .mp__seek:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
:where(.mp) img { display: block; object-fit: cover; }
:where(.mp) p { margin: 0; }

/* 아래 막대 */
.mp__bar { display: flex; align-items: stretch; border: 1px solid rgba(42, 12, 10, 0.18); background: var(--ground); }
.mp__open { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 6px; text-align: left; }
.mp__pic { position: relative; flex: none; }
.mp__thumb { width: 44px; height: 44px; }
.mp__label { display: grid; width: 9.5em; min-width: 0; padding-right: 4px; line-height: 1.35; }
.mp__btitle { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp__bsub { color: var(--wgray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp__open:hover .mp__btitle { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.mp__toggle { flex: none; display: grid; place-items: center; width: 48px; }
.mp__bar .mp__toggle { border-left: 1px solid rgba(42, 12, 10, 0.12); }
.mp__toggle::before, .mp__prev::before, .mp__next::before, .mp__close::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--i-mp-play) center / contain no-repeat; mask: var(--i-mp-play) center / contain no-repeat;
}
.mp__toggle.is-on::before { -webkit-mask-image: var(--i-mp-pause); mask-image: var(--i-mp-pause); }
.mp__prev::before { -webkit-mask-image: var(--i-mp-prev); mask-image: var(--i-mp-prev); }
.mp__next::before { -webkit-mask-image: var(--i-mp-next); mask-image: var(--i-mp-next); }
.mp__close::before { -webkit-mask-image: var(--i-mp-close); mask-image: var(--i-mp-close); }
.mp__toggle:hover, .mp__prev:hover, .mp__next:hover, .mp__close:hover { opacity: 0.7; }

/* 재생 중 표시: 표지 위 작은 막대 셋이 오르내린다 */
.mp__eq { position: absolute; left: 3px; bottom: 3px; display: none; align-items: flex-end; gap: 2px; height: 14px; padding: 2px 3px; background: rgba(42, 12, 10, 0.72); }
.mp__eq i { width: 2px; height: 100%; background: var(--cream); transform-origin: 50% 100%; animation: mp-eq 0.9s ease-in-out infinite alternate; }
.mp__eq i:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.3s; }
.mp__eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -0.6s; }
.mp.is-playing .mp__eq { display: flex; }
@keyframes mp-eq { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }

/* 펼친 목록: 지금 곡(표지 · 이름 · 재생 위치 · 이전/재생/다음) + 다섯 곡 */
.mp__panel { width: 22rem; max-width: 100%; max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(42, 12, 10, 0.18); background: var(--ground); }
.mp__panel[hidden] { display: none; }
.mp__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 4px 12px 20px; border-bottom: 1px solid rgba(42, 12, 10, 0.1); }
.mp__head > div { display: grid; gap: 2px; padding-top: 4px; }
.mp__name { font-weight: 600; }
.mp__motto { color: var(--wgray); letter-spacing: 0.02em; }   /* 이름의 뜻 순서: 흐르고 · 천천히 · 단단히 · 고요히 · 빛나다 */
.mp__close { display: grid; place-items: center; width: 44px; height: 44px; }
.mp__now { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 20px 12px; }
.mp__art { width: 96px; height: 96px; }
.mp__ttl { font-size: var(--t-body); font-weight: 600; line-height: 1.35; }
.mp__by { margin-top: 2px; color: var(--wgray); }
.mp__seek { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 20px; margin: 8px 0 0; padding: 0; background: transparent; cursor: pointer; }
.mp__seek::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--wine) var(--p, 0%), rgba(42, 12, 10, 0.2) var(--p, 0%)); }
.mp__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -4px; border: 0; background: var(--wine); }
.mp__seek::-moz-range-track { height: 2px; background: rgba(42, 12, 10, 0.2); }
.mp__seek::-moz-range-progress { height: 2px; background: var(--wine); }
.mp__seek::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 0; background: var(--wine); }
.mp__time { display: flex; justify-content: space-between; color: var(--wgray); font-variant-numeric: tabular-nums; }
.mp__ctrl { display: flex; align-items: center; gap: 2px; margin: 2px 0 0 -12px; }
.mp__ctrl button { display: grid; place-items: center; width: 44px; height: 44px; }
.mp__ctrl .mp__toggle::before { width: 22px; height: 22px; }
.mp__list { margin: 0; padding: 4px 0 8px; list-style: none; border-top: 1px solid rgba(42, 12, 10, 0.1); }
.mp__item { display: grid; grid-template-columns: 1.5em 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 20px; text-align: left; }
.mp__item img { width: 40px; height: 40px; }
.mp__ino, .mp__ilen { color: var(--wgray); font-variant-numeric: tabular-nums; }
.mp__iname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp__item:hover { background: var(--surface); }
.mp__item[aria-current="true"] { background: var(--surface); font-weight: 600; }
.mp__item[aria-current="true"] .mp__ino { color: var(--wine); }
.foot__legal { padding-bottom: 84px; }   /* 플레이리스트 막대와 겹치지 않게 */
.foot__credit { display: block; margin-top: 6px; }

/* ===================================================================
   포트폴리오 v3 (2026-10-16): 현장별 · 시공항목별 · 상업공간별 + 엽서 카드 + 사진 팝업
   =================================================================== */
.works { scroll-margin-top: calc(var(--bar-h) + 40px); }   /* #by-site · #by-tech · #by-space: 보는 방법 버튼이 머리 바 아래 40px */
.vtabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 40rem; margin-bottom: clamp(32px, 4vw, 56px); }
.vtab {
  min-height: 52px; padding: 0 12px; border: 1px solid rgba(42, 12, 10, 0.2); border-radius: var(--round);
  background: var(--ground); color: var(--wine); font: inherit; font-weight: 600; cursor: pointer;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.vtab[aria-selected="true"] { background: var(--wine); border-color: var(--wine); color: var(--cream); }
.vtab:hover { border-color: var(--wine); }
.vtab:focus-visible, .chip:focus-visible, .pc__card:focus-visible, .ptile:focus-visible, .srow__btn:focus-visible { outline: 2px solid var(--wine); outline-offset: 4px; }

/* 현장별: 엽서 카드 (종이 위 사진 + 현장 이름 · 지역 · 용도) */
.pclist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 5vw, 80px) clamp(16px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.pc { display: grid; gap: 0; align-content: start; }   /* 엽서 아래 '시공 범위 · 맡은 일' 줄은 엽서에 바로 붙인다 (대표 요청 2026-10-17 0시 '붙여줘') */
.pc__card {
  position: relative; display: grid; grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); grid-template-rows: auto minmax(0, 1fr);
  align-items: center; gap: clamp(10px, 1.6vw, 20px) clamp(14px, 2.2vw, 28px); width: 100%; aspect-ratio: 4 / 3;
  padding: clamp(16px, 2.4vw, 32px); border: 0; background: var(--surface) url("../images/paper/postcard.jpg") center / cover;
  color: var(--wine); font: inherit; text-align: left; cursor: zoom-in; -webkit-tap-highlight-color: transparent;
}
/* 엽서 맨 위 한 줄 'CAFE , Busan | 카페 부산' (예전 작은 로고 자리, 대표 요청 2026-10-16 밤) */
.pc__top { grid-column: 1 / -1; justify-self: center; text-align: center; }
.pc__photo { grid-row: 2; align-self: center; aspect-ratio: 5 / 4; }
.pc__info { grid-row: 2; align-self: end; display: grid; padding-bottom: 4%; font-size: var(--t-small); line-height: 1.4; }
.pc__name { padding-bottom: 8px; border-bottom: 1px solid rgba(42, 12, 10, 0.28); font-weight: 600; }
.pc__row { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 6px; padding: 6px 0; border-bottom: 1px solid rgba(42, 12, 10, 0.14); color: var(--wgray); }
.pc__row span { color: var(--wine); font-weight: 600; }
.pc__below { display: grid; gap: 6px; }
.pc__below .wcard__rows { margin: 0; padding: clamp(16px, 2.4vw, 32px); }   /* 엽서와 같은 안쪽 여백으로 한 장처럼 */
@media (hover: hover) {
  .pc__card:hover .pcard__media img { transform: scale(1.04); }
}

/* 현장 줄 (그 밖에 시공한 현장 · 상업공간별) */
.slist { display: grid; gap: 16px; margin-top: clamp(64px, 7vw, 112px); }
.slist__title, .sgroup__title { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
.srows { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(42, 12, 10, 0.2); }
.srow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 4px 24px; padding: 16px 4px; border-bottom: 1px solid rgba(42, 12, 10, 0.12); }
.srow__name { font-weight: 600; }
.srow__meta { font-size: var(--t-small); color: var(--wgray); }
.srow--photo { display: block; padding: 0; }
.srow__btn {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; gap: 4px 24px;
  width: 100%; padding: 12px 4px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: zoom-in;
}
.srow__thumb { width: 96px; aspect-ratio: 5 / 4; }
.srow__go { font-size: var(--t-small); font-weight: 600; white-space: nowrap; }
.srow__btn:hover .srow__name { text-decoration: underline; text-underline-offset: 5px; }
.sgroup { display: grid; gap: 14px; }
.sgroup + .sgroup { margin-top: clamp(40px, 5vw, 64px); }

/* 시공항목별: 항목 고르기 + 사진 칸 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 3vw, 40px); }
.chip {
  min-height: 44px; padding: 0 18px; border: 1px solid rgba(42, 12, 10, 0.2); border-radius: var(--round);
  background: var(--ground); color: var(--wine); font: inherit; font-size: var(--t-small); font-weight: 600; cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--wine); border-color: var(--wine); color: var(--cream); }
.chip[aria-pressed="true"] span { color: var(--greige); }
.tpane__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; color: var(--wgray); }
.tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px) clamp(10px, 1.4vw, 20px); margin: 0; padding: 0; list-style: none; }
.ptile { display: grid; gap: 10px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: zoom-in; }
/* 사진 아래 한 줄 'CAFE , Gyeongju | 카페 경주' — 엽서·홈 카드와 같은 형식 (대표 요청 2026-10-17 0시 '하단에 이렇게').
   현장 이름은 사진 설명과 버튼 이름에 남아 있다. 칸이 좁으면 영문 한 줄, 한글 한 줄로 */
.ptile { container-type: inline-size; }
.ptile__cap { display: block; }
.ptile__cap .cap { font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); }
@container (max-width: 260px) {
  .ptile__cap .cap i { display: none; }
  .ptile__cap .cap__ko { display: block; color: var(--wgray); }
}
@media (hover: hover) { .ptile:hover .pcard__media img, .srow__btn:hover .pcard__media img { transform: scale(1.04); } }
/* 같은 현장 사진이 여러 장이면: 뒤에 종이 한 장이 겹친 모양 (숫자 대신, 대표 요청 '같은 공간은 묶어줘' 2026-10-16 밤) */
.ptile--stack .pcard__media { box-shadow: 6px -6px 0 0 var(--surface), 6px -6px 0 1px rgba(42, 12, 10, 0.08); }

/* 사진 팝업 (portfolio.js): 가운데 창 — 위 이름 · 왼쪽 탭 · 사진 · 작은 사진 줄 · 오른쪽 현장 정보 */
.pop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: clamp(0px, 3vw, 40px); }
.pop[hidden] { display: none; }
.pop__scrim { position: absolute; inset: 0; background: rgba(42, 12, 10, 0.62); animation: pop-fade 0.3s ease-out both; }
.pop__panel {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(1120px, 100%); height: min(780px, 100%);
  border-radius: var(--round-panel); overflow: hidden; background: var(--ground); color: var(--wine);
  animation: pop-rise 0.42s var(--ease) both;
}
.pop.is-out .pop__scrim { animation: pop-fade 0.26s ease-in reverse both; }
.pop.is-out .pop__panel { animation: pop-sink 0.26s ease-in both; }
@keyframes pop-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-rise { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes pop-sink { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(0.99); } }
.pop__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 20px 16px 28px; border-bottom: 1px solid rgba(42, 12, 10, 0.12); }
.pop__heading { display: grid; gap: 4px; min-width: 0; }
.pop__title { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
.pop__sub { font-size: var(--t-small); color: var(--wgray); }
.pop__close, .pop__nav {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 1px solid rgba(42, 12, 10, 0.18); border-radius: var(--round); background: var(--ground); color: var(--wine); cursor: pointer;
}
.pop__close::before, .pop__nav::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--i-mp-close) center / contain no-repeat; mask: var(--i-mp-close) center / contain no-repeat; }
.pop__nav--prev::before, .pop__nav--next::before { -webkit-mask-image: var(--i-chev); mask-image: var(--i-chev); }
.pop__nav--next::before { transform: scaleX(-1); }
.pop__close:hover, .pop__nav:hover { border-color: var(--wine); }
.pop__close:focus-visible, .pop__nav:focus-visible, .pop__tab:focus-visible, .pop__thumb:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
.pop__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 0; }
.pop__main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 14px; min-height: 0; padding: 20px 28px 22px; background: var(--surface); }
.pop__tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.pop__main.is-one { grid-template-rows: minmax(0, 1fr) auto auto; }   /* 단계 버튼 줄이 없을 때 (사진이 모두 '시공 후') */
.pop__tab {
  min-height: 48px; padding: 0 12px; border: 1px solid rgba(42, 12, 10, 0.2); border-radius: var(--round);
  background: var(--ground); color: var(--wine); font: inherit; font-weight: 600; cursor: pointer;
}
.pop__tab[aria-selected="true"] { background: var(--wine); border-color: var(--wine); color: var(--cream); }
.pop__tab[aria-selected="true"] span { color: var(--greige); }
.pop__stage { position: relative; min-height: 0; overflow: hidden; touch-action: pan-y; }
.pop__img { position: absolute; inset: 0; display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; }   /* 사진 전체가 보이게 */
.pop__nav { position: absolute; top: 50%; margin-top: -24px; }
.pop__nav--prev { left: 6px; }
.pop__nav--next { right: 6px; }
.pop__count { text-align: center; font-size: var(--t-small); color: var(--wgray); font-variant-numeric: tabular-nums; }
.pop__thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding: 2px; }
.pop__thumb { flex: none; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; }
.pop__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pop__thumb[aria-current="true"] { border-color: var(--wine); }
.pop__side { display: grid; align-content: start; gap: 24px; padding: 24px 24px 28px; overflow-y: auto; border-left: 1px solid rgba(42, 12, 10, 0.12); }
.pop__info { display: grid; gap: 4px; margin: 0; }
.pop__info dt { margin-top: 12px; font-size: var(--t-small); color: var(--wgray); }
.pop__info dt:first-child { margin-top: 0; }
.pop__info dd { margin: 0; font-weight: 600; line-height: 1.5; }
.pop__links { display: grid; gap: 14px; justify-items: start; padding-top: 22px; border-top: 1px solid rgba(42, 12, 10, 0.12); }
.pop__links .btn { width: 100%; justify-content: center; padding: 0 20px; white-space: nowrap; }
.pop__jump { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }

@media (max-width: 1000px) {
  .tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pop__body { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .pop__main { min-height: min(72vh, 640px); }
  .pop__side { border-left: 0; border-top: 1px solid rgba(42, 12, 10, 0.12); overflow: visible; }
}
@media (max-width: 699.98px) {
  .pclist { grid-template-columns: minmax(0, 1fr); }
  .pc__card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; aspect-ratio: auto; }
  .pc__photo { grid-row: 2; }
  .pc__info { grid-row: 3; padding-bottom: 0; }
  .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .srow { grid-template-columns: minmax(0, 1fr); }
  .srow__btn { grid-template-columns: 76px minmax(0, 1fr); gap: 2px 14px; }
  .srow__thumb { grid-row: span 3; width: 76px; }
  .srow__go { justify-self: start; }
  .pop { padding: 0; }
  .pop__panel { width: 100%; height: 100%; border-radius: 0; }
  .pop__head { padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px 12px 18px; }
  .pop__main { padding: 14px 16px 16px; min-height: 70vh; }
  .pop__nav { display: none; }   /* 휴대폰은 밀어서 넘긴다 */
  .pop__side { padding: 20px 18px calc(env(safe-area-inset-bottom, 0px) + 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .pop__scrim, .pop__panel, .pop.is-out .pop__scrim, .pop.is-out .pop__panel { animation: none; }
}

/* 상단 메뉴 (main.js · 2026-10-16 저녁, 대표가 보낸 마이월랩 메뉴 참고)
   넓은 화면: 메뉴 이름 아래로 세부 메뉴 — 바 아래 끝에 붙고, 가운데 정렬 · 회색 글자, 열린 이름 밑에 줄.
   휴대폰: '메뉴' 버튼 하나 → 모든 묶음을 한 화면에 (전체 메뉴 판). */
.nav__item { position: relative; }
.nav__top {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer; transition: opacity 0.4s var(--ease);
}
.nav__top::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.4s var(--ease); opacity: 0.7;
}
.nav__item.is-open .nav__top::after { transform: translateY(3px) rotate(-135deg); }
.nav__top:hover { opacity: 0.65; }
.nav__item.is-open .nav__top { opacity: 1; }   /* 펼친 메뉴 이름은 진하게 */
.nav__top.is-current { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.nav__top:focus-visible { outline: 2px solid var(--wine); outline-offset: 4px; }
.nav__item::after {   /* 열린 메뉴 이름 밑 줄: 바 아래 끝, 펼친 판 윗선 위 */
  content: ""; position: absolute; z-index: 31; left: -12px; right: -12px; bottom: -14px; height: 2px;
  background: currentColor; transform: scaleX(0); transition: transform 0.4s var(--ease);
}
.nav__item.is-open::after { transform: scaleX(1); }
.nav__sub {
  position: absolute; z-index: 30; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  display: grid; min-width: 12.5rem; padding: 14px 0 18px; text-align: center;
  background: var(--ground); border: 1px solid rgba(42, 12, 10, 0.12);
  border-radius: 0 0 var(--round-panel) var(--round-panel);
  box-shadow: 0 28px 48px -32px rgba(42, 12, 10, 0.5);
}
.nav__sub[hidden] { display: none; }
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }   /* 마우스가 메뉴로 내려가는 길 */
.bar__nav .nav__sub a { display: block; padding: 9px 26px; white-space: nowrap; color: var(--wgray); transition: color 0.3s var(--ease); }
.bar__nav .nav__sub a:hover { opacity: 1; color: var(--wine); }
.bar__nav .nav__sub a[aria-current="page"] { color: var(--wine); font-weight: 600; text-decoration: none; }
.nav__sub a.is-out::after, .navsheet__links a.is-out::after { content: " ↗"; content: " ↗" / ""; }
.nav__sub a:focus-visible { outline: 2px solid var(--wine); outline-offset: -4px; }
/* 메뉴·바닥글로 칸을 옮겨 가면: 칸 머리(작은 이름표 + 제목)가 머리 바 아래 40px에 온다 (대표 요청 2026-10-17 0시 '글이 씹혀').
   링크는 제목이 아니라 이름표까지 감싼 칸 머리(#way · #record · #classes · #apply)를 가리킨다.
   오시는 길 카드(#visit)는 카드 윗변이 머리 바 바로 아래에 붙는다 (대표가 보낸 두 번째 화면 그대로) */
[id] { scroll-margin-top: calc(var(--bar-h) + 40px); }
.visit[id] { scroll-margin-top: var(--bar-h); }
@media (min-width: 700px) {
  /* 메뉴 칸을 바 높이만큼 늘려, 펼친 판이 바 아래 끝에 바로 붙게 */
  .bar__nav { align-self: stretch; align-items: stretch; }
  .bar__nav > a, .nav__item { display: flex; align-items: center; }
  .bar__nav > .bar__ask { align-self: center; }
}

/* 휴대폰 '메뉴' 버튼 + 전체 메뉴 판 */
.bar__menu { display: none; }
@media (max-width: 699.98px) {
  .js .bar__nav > .nav__item, .js .bar__nav > a:not(.bar__ask) { display: none; }
  .js .bar__menu {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px 0 4px;
    border: 0; background: none; font: inherit; font-size: var(--t-small); font-weight: 600; color: inherit; cursor: pointer;
  }
  .bar__menu-lines { position: relative; width: 18px; height: 12px; }
  .bar__menu-lines::before, .bar__menu-lines::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
    transition: transform 0.4s var(--ease), top 0.4s var(--ease);
  }
  .bar__menu-lines::before { top: 2px; }
  .bar__menu-lines::after { top: 8.5px; }
  .bar__menu[aria-expanded="true"] .bar__menu-lines::before { top: 5.25px; transform: rotate(45deg); }
  .bar__menu[aria-expanded="true"] .bar__menu-lines::after { top: 5.25px; transform: rotate(-45deg); }
  .bar__menu:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
  /* 판이 열리면 첫 화면 사진 위에서도 바를 밝게 */
  .js .bar.is-sheet::before { opacity: 1; }
  .js .bar.is-sheet { color: var(--wine); }
  .js .bar.is-sheet .bar__logo-cream { opacity: 0; }
  .js .bar.is-sheet .bar__logo-ink { opacity: 1; }
  .js .bar.is-sheet .bar__ask { background: var(--wine); color: var(--cream); }
}
.navsheet {
  position: fixed; inset: 0; z-index: 19; display: grid; align-content: start; gap: 28px;
  overflow-y: auto; overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top, 0px) + 84px) max(20px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 40px) max(20px, env(safe-area-inset-left, 0px));
  background: var(--ground); color: var(--wine);
}
.navsheet[hidden] { display: none; }
.navsheet__groups { display: grid; }
.navsheet__group { display: grid; gap: 4px; padding: 16px 0 10px; border-top: 1px solid rgba(42, 12, 10, 0.12); }
.navsheet__head { font-size: var(--t-small); font-weight: 600; color: var(--wgray); }
.navsheet__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.navsheet__links a { display: flex; align-items: center; min-height: 44px; font-size: var(--t-body); text-decoration: none; }
.navsheet__links a.is-wide { grid-column: 1 / -1; }
.navsheet__links a.is-out::after { margin-left: 6px; color: var(--wgray); }
.navsheet__links a[aria-current="page"] { font-weight: 600; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.navsheet__links a:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
.navsheet__cta { display: grid; gap: 8px; }
.navsheet__cta .btn { justify-content: center; margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .nav__top::after, .nav__item::after, .bar__menu-lines::before, .bar__menu-lines::after { transition: none; }
}

/* 둥근 버튼 (대표 요청 2026-10-16): 누르는 것은 각지지 않게 둥글게. 사진·카드는 그대로 */
:root { --round: 999px; --round-panel: 16px; }
.btn, .bar__ask, .fab__btn, .foot__tel, .foot__kakao, .rv__pause, .visit__btn, .hh__switch button { border-radius: var(--round); }
.mp__seek::-webkit-slider-thumb { border-radius: var(--round); }
.mp__bar { border-radius: var(--round-panel); overflow: hidden; }
.mp__panel { border-radius: var(--round-panel); }   /* 목록은 스크롤 그대로 */
.mp__thumb, .mp__art, .mp__item img { border-radius: 8px; }
.mp__eq { border-radius: 8px; }

@media (max-width: 1000px) {
  .visit { grid-template-columns: minmax(0, 1fr); }
  .visit__map { min-height: 300px; }
}
@media (max-width: 699.98px) {
  .wlist { grid-template-columns: minmax(0, 1fr); }
  .wtabs { gap: 0 20px; }
  .wcard__rows div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .mp__label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* 휴대폰: 표지 + 재생 버튼만 (이름은 화면 읽기용으로 남김) */
}
/* 좁은 휴대폰 (459px 이하): '무료 전화상담 · 무료 카톡상담'이 화면 아래 한 줄을 반씩 나눠 쓰고,
   플레이리스트 막대는 그 위로 올라가 서로 겹치지 않는다 (버튼 이름이 길어진 뒤, 2026-10-16 밤) */
@media (max-width: 459.98px) {
  .fab { left: max(16px, env(safe-area-inset-left, 0px)); }
  .fab__btn { flex: 1 1 0; justify-content: center; padding: 0 10px; white-space: nowrap; }
  .mp { bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 56px); }
  .mp__panel { max-height: calc(100vh - 168px); max-height: calc(100dvh - 168px); }
}

@media (prefers-reduced-motion: reduce) {
  .mp, .mp.is-shown, .wtab::after, .wcard__title button span { transition: none; transform: none; }
  .mp__eq i { animation: none; transform: scaleY(0.6); }
}

@media (max-width: 1000px) {
  .hh { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hh__copy { padding: clamp(40px, 6vw, 72px) var(--side) clamp(40px, 6vw, 64px); }
  .hh__visual { min-height: 0; aspect-ratio: 4 / 3; }
  .hintro { grid-template-columns: minmax(0, 1fr); }
  .hfaq__layout { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cprep { grid-template-columns: minmax(0, 1fr); }
  .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faqg { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699.98px) {
  .page-home main, .page-contact main, .page-about main, .page-faq main, .page-academy main { padding-top: calc(env(safe-area-inset-top, 0px) + 64px); }
  .hh__copy { padding-top: 20px; }   /* 휴대폰: 첫 화면 글을 머리 바 바로 아래로 (대표 요청 2026-10-16 밤 '이 부분 올리기') */
  .steps--3, .proof { grid-template-columns: minmax(0, 1fr); }
  .hh__visual { aspect-ratio: 4 / 5; }
  .hh__feature { padding: 12px 14px; }
  .hgrid, .hfacts, .steps { grid-template-columns: minmax(0, 1fr); }
  .shead { align-items: flex-start; }
  .qa2 summary { padding: 14px 18px; }
  .qa2 details p { padding: 0 18px 20px; }
}

/* ---------- 들어올 때 떠오르기 ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- 태블릿 ---------- */
@media (max-width: 1000px) {
  .brand__logo { grid-column: 1 / span 5; }
  .brand__text { grid-column: 6 / span 7; }
  .site__text { grid-column: 1 / span 12; grid-row: 1; align-self: start; }
  .site__main { grid-column: 1 / span 8; grid-row: 2; height: auto; width: 100%; max-height: 64svh; justify-self: start; }
  .site__detail { grid-column: 9 / span 4; grid-row: 2; }
  .site { align-content: center; row-gap: 24px; }
  .intro__text { grid-column: 1 / span 6; }
  .intro__img { grid-column: 7 / span 6; }
  .qa > h2 { grid-column: 1 / span 12; margin-bottom: 40px; }
  .qa__list { grid-column: 1 / span 12; }
}

/* ---------- 휴대폰 ---------- */
@media (max-width: 699.98px) {
  .hide-sm { display: none; }
  .bar__nav { gap: 18px; font-size: var(--t-small); }
  .statement { margin-left: 0; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .grid--3 > li:first-child { grid-column: 1 / -1; }          /* 세 장 묶음: 첫 장을 넓게 */
  .grid--3 > li:first-child .tile { aspect-ratio: 8 / 5; }
  .brand__inner, .svc { display: block; }
  .brand__logo { width: 72%; margin: 0 auto 24px; }
  .svc__img { width: 100%; margin-bottom: 28px; }
  .svc__text { padding: 0; }
  .site {
    position: relative; height: auto; min-height: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    padding: 56px var(--gutter);
  }
  .site__text { grid-column: 1 / -1; margin-bottom: 12px; }
  .site__main { grid-column: 1 / -1; grid-row: auto; max-height: none; }
  .site__detail { grid-column: 2; grid-row: auto; }
  .ask { padding-left: var(--gutter); }
  .btn { width: 100%; }
  .intro { display: block; padding-top: 104px; }
  .work--svc .group__head { display: grid; gap: 4px; }
  .intro__text { margin-top: 32px; }
  .intro__img { width: 100%; max-height: none; margin-top: 40px; }
  .intro__text .btn { margin-top: 0; }
  .qa { display: block; }
  .more__list { grid-template-columns: 1fr 1fr; gap: 24px var(--gap); }
  .more__list > li:first-child { grid-column: 1 / -1; }
  .more__list > li:first-child img { aspect-ratio: 8 / 5; }
  .more { padding-left: var(--gap); padding-right: var(--gap); }
  .more > h2 { padding: 0 calc(var(--gutter) - var(--gap)); }
  .more__name { padding: 0 calc(var(--gutter) - var(--gap)); font-size: var(--t-body); }
}

/* 바닥글: 태블릿은 두 칸, 휴대폰은 한 줄씩 */
@media (max-width: 1080px) {
  .foot__inner { grid-template-columns: 18.5rem minmax(0, 1fr); }
}
@media (max-width: 699.98px) {
  .foot__inner { grid-template-columns: minmax(0, 1fr); }
  .foot__contact { max-width: 22rem; }
  .foot__map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 아카데미 (2026-10-16 밤): 클래스 다섯 = 단계별(초급반 · 중급반 · 전문가반) 세 칸 + 원데이 · 출장 두 칸 */
.steps--class { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.steps--class > li { grid-column: span 2; }
.steps--class > li:nth-child(n + 4) { grid-column: span 3; }
@media (max-width: 1000px) {
  .steps--class { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps--class > li, .steps--class > li:nth-child(n + 4) { grid-column: auto; }
  .steps--class > li:last-child { grid-column: 1 / -1; }
}
@media (max-width: 699.98px) {
  .steps--class { grid-template-columns: minmax(0, 1fr); }
}

/* 사진 수채화 (main.js, 2026-10-16 저녁): 마우스를 올리면 미리 그린 수채화 판이 원본 위로 천천히 55%까지.
   사진과 같이 커지도록(1.04배) 같은 칸에 겹친다. 마우스가 없는 화면에서는 판을 만들지 않는다. */
.more__frame { position: relative; }
:is(.tile, .hcard__media, .pcard__media, .more__frame) > img.wc {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; pointer-events: none;
  transition: opacity 0.9s var(--ease), transform 1.2s var(--ease);
}
@media (hover: hover) {
  :is(.tile, .hcard, .pc__card, .ptile, .more__link):is(:hover, :focus-visible) img.wc { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.tile, .hcard__media, .pcard__media, .more__frame) > img.wc { transition: none; }
}

/* 붓 마우스 + 누른 자리 수채화 번짐 (대표 요청 2026-10-16 밤)
   마우스가 있는 화면에서만. 누를 수 있는 곳 위에서는 끝에 물감을 묻힌 붓. 붓 끝(왼쪽 아래 5,27)이 누르는 자리. */
@media (hover: hover) and (pointer: fine) {
  html { cursor: url("../images/cursor/brush.svg") 5 27, url("../images/cursor/brush.png") 5 27, auto; }
  :is(a[href], button, summary, label, select, [role="tab"], [role="button"], .tile, .ptile, .pc__card, .hcard) {
    cursor: url("../images/cursor/brush-dab.svg") 5 27, url("../images/cursor/brush-dab.png") 5 27, pointer;
  }
}
.bloom {
  position: fixed; z-index: 70; width: 200px; height: 200px; margin: -100px 0 0 -100px;
  pointer-events: none; background: center / contain no-repeat; mix-blend-mode: multiply;
  opacity: 0; transform: rotate(var(--r, 0deg)) scale(0.18);
  animation: bloom 2.6s linear forwards;   /* 처음엔 빨리 번지고, 천천히 옅어진다 */
}
.bloom--1 { background-image: url("../images/cursor/bloom-1.webp"); }
.bloom--2 { background-image: url("../images/cursor/bloom-2.webp"); }
.bloom--3 { background-image: url("../images/cursor/bloom-3.webp"); }
@keyframes bloom {
  0% { opacity: 0; transform: rotate(var(--r, 0deg)) scale(0.18); }
  10% { opacity: 0.72; transform: rotate(var(--r, 0deg)) scale(0.58); }
  35% { opacity: 0.6; transform: rotate(var(--r, 0deg)) scale(0.86); }
  70% { opacity: 0.3; transform: rotate(var(--r, 0deg)) scale(0.97); }
  100% { opacity: 0; transform: rotate(var(--r, 0deg)) scale(var(--s, 1)); }
}
@media (prefers-reduced-motion: reduce) { .bloom { display: none; } }

/* 사진 + 둥근 설명 판: 좁은 휴대폰에서만 위아래로 */
@media (max-width: 719.98px) {
  .hask { grid-template-columns: minmax(0, 1fr); }
  .hask__photo img { height: auto; min-height: 0; aspect-ratio: 4 / 3; contain: none; }
  .page-contact .hask__copy { order: -1; }   /* 문의 페이지는 휴대폰에서 전화번호가 먼저 */
}

/* ---------- 동작 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js body, .js .hero__media img, .js .hero__text > *,
  .js .intro__head > *, .js .intro__text > *, .js .intro__img { animation: none; }
  .more__frame img, .more__link:hover img { transform: none !important; transition: none; }
  .more__name span { transition: none; }
  .js .reveal { transform: none; transition: opacity 0.3s linear; }
  .tile img, .tile:hover img, .tile:focus-visible img { transform: none !important; transition: none; }
  .ripple { display: none; }
  .fab, .fab.is-away, body.is-locked .fab { transition: none; transform: none; }
  .hh__photo, .hh__switch button, .chip, .hsvc__list a { transition: none; }
  .hcard__media img, .hcard:hover .hcard__media img { transform: none !important; transition: none; }
  .btn span, .hsvc__arrow, .hh__feature-title span, .qa2 summary::after { transition: none; }
  .pcard__media img, .pcard:hover .pcard__media img { transform: none !important; transition: none; }
  .textlink span { transition: none; }
}

/* ===================================================================
   홈 순서 개편 (대표 요청 2026-10-16 밤)
   후킹 → 01 소개 → 02 후기 → 03 맡기기 전 걱정 → 04 어떻게요? → 05 브랜드 소개 → 06 포트폴리오
   → 07 예약·상담·피드백 → 08 상담 문의 → 09 진행 절차(시공/교육 버튼) → 10 자주 묻는 질문.
   분위기 '전문적이고 따뜻한 느낌': 번호 붙은 섹션과 같은 폭으로 정돈하고, 홈의 면·사진 모서리는 16px(안쪽 작은 칸 12px),
   손님 말은 말풍선처럼. 바탕은 섹션마다 번갈아(석회 화이트 ↔ 크림 베이지, 브랜드 말은 와인). 색 짝은 그대로.
   =================================================================== */
.page-home { --r-panel: 16px; --r-cell: 12px; }
.page-home main > section[id] { scroll-margin-top: 24px; }
.page-home :is(.prep, .qa2 details, .rv, .steps li) { border-radius: var(--r-panel); }
.page-home :is(.prep__list li, .hh__feature) { border-radius: var(--r-cell); }
.page-home .hcard__media { border-radius: var(--r-panel); }

/* 01 소개 (와인): 왼쪽 제목·한 마디·소개, 오른쪽 '잔잔희가 하는 일' 네 줄 + 기본 정보 세 칸 */
.hintro--home { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(32px, 6vw, 96px); }
.hintro--home .hintro__head { display: grid; gap: 18px; align-content: start; }
.hintro--home .hintro__text { display: block; max-width: 34em; color: var(--greige); }   /* 브랜드 소개 페이지의 .hintro__text(두 문단 묶음 grid)와 달리 한 문단 */
.hintro--home .hintro__body { display: grid; gap: 8px; justify-items: stretch; }
.hintro__label { margin-bottom: 4px; font-size: var(--t-small); font-weight: 400; color: var(--greige); }
.hintro--home .hsvc__list { margin-top: 0; }
.hintro--home .hsvc__list a { background: rgba(255, 243, 231, 0.07); color: var(--cream); border-radius: var(--r-cell); }
.hintro--home .hsvc__list a:hover { background: rgba(255, 243, 231, 0.14); }
.hintro--home :is(.hsvc__no, .hsvc__desc) { color: var(--greige); }
.hintro--home .hfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
.hintro--home .hfacts > div { padding: 18px 20px; border-radius: var(--r-cell); }
.hintro--home .hfacts dd { font-size: var(--t-small); line-height: 1.6; }

/* 03 맡기기 전 걱정: 손님 마음속 말 여섯 — 한쪽 모서리만 뾰족한 말풍선. 넓은 화면에서는 가운데 줄을 살짝 내려 리듬을 준다 */
.hworry { padding: var(--sec) var(--side); }
.worry, .how {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px);
  align-items: start; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none;
}
.worry__item {
  display: grid; align-content: start; gap: 14px; padding: clamp(24px, 2.6vw, 36px);
  background: var(--surface); border-radius: var(--r-panel) var(--r-panel) var(--r-panel) 4px;
}
.worry__no { font-size: var(--t-small); color: var(--wgray); font-variant-numeric: tabular-nums; }
.worry__text { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.55; letter-spacing: -0.01em; text-wrap: balance; }
.worry__text::before { content: "“"; content: "“" / ""; }
.worry__text::after { content: "”"; content: "”" / ""; }
@media (min-width: 1001px) {
  .worry__item:nth-child(3n + 2) { margin-top: 28px; }
}

/* 04 어떻게요? (와인): 위 걱정과 같은 번호의 답 여섯 */
.hhow { padding: var(--sec) var(--side); }
.hhow .shead__desc { color: var(--greige); }
.how { align-items: stretch; }
.how__item {
  display: grid; align-content: start; justify-items: start; gap: 12px; padding: clamp(24px, 2.6vw, 36px);
  background: rgba(255, 243, 231, 0.07); border-radius: var(--r-panel);
}
.how__q { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--t-small); color: var(--greige); }
.how__no { font-variant-numeric: tabular-nums; }
.how__a { margin-top: clamp(8px, 1.6vw, 24px); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
.how__body { font-size: var(--t-small); line-height: 1.75; color: rgba(255, 243, 231, 0.86); }
.how__item .textlink { font-size: var(--t-small); }

/* 05 브랜드 소개 · 07 예약·상담·피드백: 사진 옆 둥근 판 (상담 문의와 같은 틀). --flip은 사진이 오른쪽 */
.hrow {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 2vw, 28px);
  align-items: stretch; padding: var(--sec) var(--side);
}
.hrow--flip .hrow__media { order: 2; }
.hrow__media { display: grid; grid-template-rows: minmax(0, 1fr); margin: 0; overflow: hidden; border-radius: var(--r-panel); background: var(--surface); }   /* 줄 높이는 글 판이 정하고 사진은 채운다 */
.hrow__media img { width: 100%; height: 100%; min-height: clamp(320px, 38vw, 560px); object-fit: cover; contain: size; aspect-ratio: auto; }   /* 사진 비율(width·height 속성)이 줄 높이를 키우지 않게 */
.hrow__copy {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: start; align-content: center;
  padding: clamp(28px, 4.5vw, 64px); background: var(--surface); border-radius: var(--r-panel);
}
.hrow__copy h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); font-weight: 600; line-height: 1.18; letter-spacing: -0.03em; text-wrap: balance; }
.hrow__lead { font-size: var(--t-lead); }
.hrow__text { max-width: 30em; color: var(--wgray); line-height: 1.75; }
.hname { display: flex; flex-wrap: wrap; gap: 12px clamp(20px, 3vw, 36px); margin: 14px 0 6px; padding: 0; list-style: none; }
.hname li { display: grid; justify-items: center; gap: 8px; }
.hname__han { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1; }
.hname__ko { font-size: var(--t-small); color: var(--wgray); }
.csteps { display: grid; gap: 8px; width: 100%; margin: 6px 0 0; padding: 0; list-style: none; }
.csteps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; padding: 14px 18px; background: var(--ground); border-radius: var(--r-cell); }
.csteps span { grid-row: span 2; padding-top: 2px; font-size: var(--t-small); color: var(--wgray); font-variant-numeric: tabular-nums; }
.csteps strong { font-weight: 600; }
.csteps em { font-style: normal; font-size: var(--t-small); color: var(--wgray); }

/* 06 포트폴리오: 현장 넷을 한 줄에 (태블릿·휴대폰은 2열) */
.hgrid.hgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(12px, 1.6vw, 20px); margin-top: clamp(28px, 3vw, 44px); }

/* 08 상담 문의 (홈): 바로 앞 '예약·상담·피드백'과 같은 틀이라 바탕을 한 톤 바꾼다 */
.page-home .hask { background: var(--surface); }
.page-home .hask__copy { background: var(--ground); }

/* 09 진행 절차: '시공 절차' · '교육 절차' 둥근 버튼 둘 → 아래 네 단계 */
.hproc { padding: var(--sec) var(--side); }
.proc { display: grid; justify-items: start; gap: 24px; margin-top: clamp(28px, 3vw, 44px); }
.ptabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; background: var(--surface); border-radius: var(--round); }
.ptab {
  min-height: 52px; padding: 0 clamp(22px, 2.6vw, 34px); border: 0; border-radius: var(--round);
  background: transparent; color: var(--wine); font-size: var(--t-body); font-weight: 600; cursor: pointer;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.ptab:hover { background: var(--cream); }
.ptab[aria-selected="true"] { background: var(--wine); color: var(--cream); }
.ptab:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
.ppanel { display: grid; justify-items: start; gap: 20px; width: 100%; }
.ppanel .steps { width: 100%; margin-top: 0; }
.ppanel:focus-visible { outline: 2px solid var(--wine); outline-offset: 6px; border-radius: var(--r-panel); }

@media (max-width: 1000px) {
  .hintro--home { grid-template-columns: minmax(0, 1fr); }
  .worry, .how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hgrid.hgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719.98px) {
  .hrow { grid-template-columns: minmax(0, 1fr); }
  .hrow--flip .hrow__media { order: 0; }
  .hrow__media img { height: auto; min-height: 0; aspect-ratio: 4 / 3; contain: none; }
}
@media (max-width: 699.98px) {
  .worry, .how, .hintro--home .hfacts { grid-template-columns: minmax(0, 1fr); }
  .hgrid.hgrid--4 { gap: 28px 12px; }
  .hgrid--4 .cap { font-size: 0.9375rem; }
  .hgrid--4 .cap i { display: none; }
  .hgrid--4 .cap__ko { display: block; color: var(--wgray); }   /* 휴대폰 2열: 영문 한 줄, 한글 한 줄 */
  .ptabs { display: flex; width: 100%; }
  .ptab { flex: 1 1 0; padding: 0 12px; }
  .ppanel .steps h3 { margin-top: 14px; }   /* 휴대폰: 번호와 이름 사이를 줄여 한눈에 */
}

/* 스크롤 모션 (대표 요청 2026-10-16 밤 '스크롤 내릴 때 모션도') — design-direction.md '7. 움직임' 안에서만:
   제목은 줄마다 아래에서 차례로 올라오고(main.js가 <br> 기준으로 줄을 나눔), 사진은 1.06배에서 제자리로 천천히 놓이며,
   카드는 80ms씩 차례로 떠오른다. 크기·위치·투명도만, 0.8~1.2초, 한 번만. '동작 줄이기' 설정이면 모두 끈다. */
.js .ln { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.js .ln__in { display: block; transform: translateY(110%); transition: transform 1s var(--ease); text-wrap: balance; }
.js .is-in .ln__in { transform: none; }
.hask__photo img, .hrow__media img { transition: transform 1.2s var(--ease); }
.js .reveal:not(.is-in) .hcard__media img,
.js :is(.hrow__media, .hask__photo).reveal:not(.is-in) img { transform: scale(1.06); }
.js .proc.reveal .steps li { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .proc.reveal:not(.is-in) .steps li { opacity: 0; transform: translateY(16px); }
.js .proc.reveal .steps li:nth-child(2) { transition-delay: 0.08s; }
.js .proc.reveal .steps li:nth-child(3) { transition-delay: 0.16s; }
.js .proc.reveal .steps li:nth-child(4) { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .js .ln__in { transform: none; transition: none; }
  .js .reveal:not(.is-in) .hcard__media img,
  .js :is(.hrow__media, .hask__photo).reveal:not(.is-in) img { transform: none; }
  .hask__photo img, .hrow__media img { transition: none; }
  .js .proc.reveal:not(.is-in) .steps li { transform: none; }
  .js .proc.reveal .steps li { transition: opacity 0.3s linear; transition-delay: 0s; }
  .ptab { transition: none; }
}
.nobr { white-space: nowrap; }   /* '분수대·화단'처럼 가운뎃점에서 줄이 갈리지 않게 */

/* ===================================================================
   브랜드 소개 다듬기 (대표 요청 2026-10-17 0시 '글이 너무 많아. 가시성 직관적으로')
   순서를 메뉴와 맞춤: 잔잔희 이야기 → 이름의 뜻 → 일하는 방식 → 잔잔희의 기록 → 상담.
   하는 일은 누르면 그 시공 항목 페이지로 가는 버튼, 대표 현장은 글 목록 대신 사진 카드.
   바탕은 칸마다 번갈아: 첫 화면 · 와인 · 이름의 뜻(석회 화이트) · 일하는 방식(크림 베이지) · 기록(석회 화이트) · 상담(크림 베이지)
   =================================================================== */
.atags { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.atags a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--round);
  background: var(--ground); color: var(--wine); font-weight: 600; text-decoration: none;   /* 크림 베이지 카드 위의 석회 화이트 버튼 */
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.atags a:hover { background: var(--wine); color: var(--cream); }
.atags a:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
.page-about .hflow { background: var(--surface); }
.page-about .hflow .steps li { background: var(--ground); border-radius: 12px; }
.page-about .hworks { background: var(--ground); }
.hgrid.hgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(28px, 3vw, 44px); }
.page-about .hcard { text-decoration: none; }
.page-about .hcard__media { margin-bottom: 4px; border-radius: var(--round-panel); }
.hcard__meta { font-size: var(--t-small); color: var(--wgray); }
@media (max-width: 699.98px) {
  .hgrid.hgrid--3 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}