/* ═══════════════════════════════════════════════════
   욕실인테리어자재 · 에이지벤처스
   Editorial / architecture-studio 시스템 — 라운드·그림자·세리프·
   아이콘 불렛 카드 그리드를 전부 배제. 하드코너, 헤어라인 룰,
   전체 산세리프, 넘버링 인덱스 리스트(프로젝트 인덱스 페이지 문법)로 구성.
   포인트 컬러(틸)는 넘버·라벨 라인에 반복 사용해 리듬을 준다.
   형제 사이트(ta.megabondworld.com)의 코발트블루+모노 스펙시트 룩과도 분리.
   ═══════════════════════════════════════════════════ */

:root{
  --paper:#FFFFFF;
  --panel:#F4F3F0;       /* 아주 옅은 웜그레이 — 섹션 구분용, 카드 없음 */
  --ink:#121210;
  --ink-2:#48473f;
  --muted:#8a897e;
  --line:rgba(18,18,16,.16);   /* 헤어라인 */
  --line-strong:var(--ink);
  --teal:#0e6b62;        /* 포인트 컬러 — 넘버·라벨·인터랙션에 반복 사용 */
  --teal-tint:#eef4f2;
  --r:0px;                /* 라운드 전면 제거 */
  --wrap:1180px;
  --sans:'Pretendard Variable','Pretendard','Apple SD Gothic Neo',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:16.5px;
  line-height:1.68;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  word-break:keep-all;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.img-fallback{background:repeating-linear-gradient(45deg,#EDECE7 0 12px,#F4F3F0 12px 24px)}
svg.ic{width:1.1em;height:1.1em;flex:none;vertical-align:middle}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}
.wrap--narrow{max-width:760px}

/* 라벨 — 대문자 트래킹, 포인트 컬러 밑줄로 장식 */
.mono{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--teal)}

/* buttons — 각진 아웃라인/채움, 무장식 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:15.5px;
  letter-spacing:.01em;padding:15px 26px;border:1px solid var(--ink);cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;white-space:nowrap}
.btn .ic{width:16px;height:16px}
.btn--cta{background:var(--ink);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--lg{padding:17px 30px;font-size:16.5px}
.btn--block{display:flex;width:100%}
.btn--on-dark.btn--cta{background:#fff;color:var(--ink)}
.btn--on-dark.btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)}

/* ── topbar ── */
.topbar{border-bottom:1px solid var(--line);background:var(--paper)}
.topbar__in{display:flex;justify-content:space-between;align-items:center;height:40px;font-size:13px;color:var(--ink-2);letter-spacing:.01em}
.topbar__badge{font-weight:600}
.topbar__tel{display:flex;align-items:center;gap:6px}
.topbar__num{color:var(--teal);font-weight:700}

/* ── header ── */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.site-header__in{display:flex;align-items:center;gap:32px;height:80px}
.brand{display:flex;flex-direction:column;line-height:1.1}
.brand__logo{font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.brand__logo b{color:var(--teal);font-weight:800}
.brand__txt{font-size:11.5px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin-top:2px}
.gnb{display:flex;gap:30px;margin-left:auto;font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--ink-2)}
.gnb a{position:relative;padding:4px 0}
.gnb a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--teal);transition:right .22s ease}
.gnb__cta{margin-left:4px}
.gnb__toggle{display:none;background:none;border:1px solid var(--line);padding:7px;margin-left:auto;color:var(--ink)}
.gnb__toggle .ic{width:20px;height:20px}

/* ── hero (좌측 정렬, 대형 산세리프 헤드라인) ── */
.hero-copy{padding:100px 0 64px;border-bottom:1px solid var(--line)}
.hero-copy__in{max-width:920px}
.hero__h1{font-size:clamp(2.9rem,7.2vw,5.8rem);font-weight:800;line-height:.98;letter-spacing:-.035em;margin:22px 0 20px;color:var(--ink)}
.hero__sub{font-size:clamp(1.25rem,2.3vw,1.55rem);font-weight:600;letter-spacing:-.005em;color:var(--ink-2);margin-bottom:26px}
.hero__sub em{font-style:normal;color:var(--teal)}
.hero__lead{font-size:18px;color:var(--ink-2);max-width:42em;margin-bottom:34px}
.hero__lead b{color:var(--ink);font-weight:700}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}
.specrow{display:none}

/* ── 브랜드 영상 (앰비언트 자동재생, 컨트롤 숨김 — 클릭 상호작용 없음) ── */
.videoband{border-bottom:1px solid var(--line)}
.videoblock{position:relative;width:100%;height:clamp(320px,58vw,720px);background:var(--ink);overflow:hidden}
.videoblock__poster{width:100%;height:100%;object-fit:cover}
.videoblock iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}

/* ── 시그니처: MEGA G2 25색 — 끊김 없는 한 줄 마퀴(고아 스와치 방지, 절대 두 줄로 안 꺾임) ── */
.swatchband{padding:28px 0 0;border-bottom:1px solid var(--line)}
.swatchband__label{font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--teal);text-transform:uppercase;text-align:center;margin-bottom:22px}
.marquee{overflow:hidden;border-top:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.swatch{flex:0 0 auto;width:76px;display:flex;flex-direction:column;align-items:center;padding:18px 0;border-right:1px solid var(--line)}
.swatch__chip{width:36px;height:36px;border-radius:0}
.swatch__name{font-size:11px;color:var(--muted);text-align:center;padding-top:9px;letter-spacing:0;white-space:nowrap}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (hover:hover) and (pointer:fine){.marquee:hover .marquee__track{animation-play-state:paused}}
@media(prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ── standards strip ── */
.stdstrip{border-bottom:1px solid var(--line);background:var(--panel)}
.stdstrip__in{display:flex;align-items:center;gap:14px 36px;flex-wrap:wrap;padding:18px 28px;font-size:13.5px;color:var(--ink-2)}
.stdstrip__in b{color:var(--ink);font-weight:700}
.stdstrip__lead{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700;color:var(--teal)}

/* ── section ── */
.section{padding:104px 0}
.section--alt{background:var(--panel)}
.section--tint{background:var(--teal-tint)}
.section__head{max-width:640px;margin-bottom:56px;display:flex;flex-direction:column;gap:14px}
.section__head--center{margin-left:auto;margin-right:auto;text-align:center;align-items:center}
.section__head h2{font-size:clamp(2rem,3.4vw,2.7rem);font-weight:800;letter-spacing:-.025em;line-height:1.16}
.section__head p{color:var(--ink-2);font-size:17.5px}
.section__note{margin-top:0;padding-top:28px;border-top:1px solid var(--line);color:var(--ink-2);font-size:16px}
.section__note b{color:var(--ink)}
.inline-link{color:var(--teal);font-weight:700;border-bottom:1px solid var(--teal)}

/* ── 인덱스 리스트 (솔루션·가이드 공용) — 카드그리드 대신 프로젝트 인덱스 문법 ── */
.idxlist{border-top:1px solid var(--ink)}
.idxrow{display:grid;grid-template-columns:148px 40px 1fr 1.15fr 1.5fr auto;gap:26px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--line);transition:background .15s ease}
.idxrow__photo{width:148px;height:148px;display:flex;align-items:center;justify-content:center;
  background:var(--paper);border:1px solid var(--line)}
.idxrow__photo img{width:100%;height:100%;object-fit:contain;padding:16px}
.idxrow__no{font-size:14px;font-weight:800;color:var(--teal)}
.idxrow__name{font-size:21px;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.idxrow__meta{font-size:14.5px;color:var(--teal);font-weight:600;letter-spacing:.005em}
.idxrow__desc{font-size:16px;color:var(--ink-2)}
.idxrow__arrow{font-size:14.5px;font-weight:700;color:var(--ink);white-space:nowrap;display:flex;align-items:center;gap:6px;justify-self:end}
.idxrow__arrow .ic{width:14px;height:14px;transition:transform .18s ease}
a.idxrow{cursor:pointer}

/* 가이드 인덱스 — 키워드 태그가 붙어 폭이 다름 */
.idxrow--guide{grid-template-columns:64px 1fr 1fr 1.6fr}
.idxrow--guide .idxrow__no{color:var(--teal)}
.idxrow__tags{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:14.5px;color:var(--ink-2)}
.idxrow__tags span:not(:last-child)::after{content:"·";margin-left:10px;color:var(--muted)}
.idxrow__tags a{color:var(--teal);font-weight:700;border-bottom:1px solid var(--teal)}

/* ── process (넘버 리스트, 박스 카드 제거) ── */
.stepgrid{border-top:1px solid var(--ink)}
.step{position:relative;display:grid;grid-template-columns:64px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line)}
.step__no{font-size:14px;font-weight:800;color:var(--teal)}
.step h3{font-size:19px;font-weight:800;margin-bottom:6px;letter-spacing:-.01em}
.step p{font-size:16px;color:var(--ink-2)}

/* ── faq ── */
.faq{border-top:1px solid var(--ink)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:16px;
  padding:24px 0;font-weight:700;font-size:18px;cursor:pointer;list-style:none;letter-spacing:-.005em}
.faq__item summary::-webkit-details-marker{display:none}
.faq__q{font-size:14px;font-weight:800;color:var(--teal)}
.faq__item summary::after{content:"+";font-size:22px;font-weight:300;color:var(--teal);justify-self:end}
.faq__item[open] summary::after{content:"−"}
.faq__a{padding:0 0 26px 60px;color:var(--ink-2);font-size:16px;max-width:56em}

/* ── company ── */
.company{display:grid;grid-template-columns:1.3fr .8fr;gap:56px;align-items:start}
.company h2{font-size:clamp(1.85rem,2.8vw,2.3rem);font-weight:800;letter-spacing:-.02em;margin-bottom:18px}
.company__txt p{color:var(--ink-2);margin-bottom:24px;font-size:17px}
.company__facts{list-style:none;display:grid;gap:0;border-top:1px solid var(--ink)}
.company__facts li{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.company__facts b{min-width:96px;font-size:12.5px;letter-spacing:.03em;color:var(--teal);font-weight:700;text-transform:uppercase;padding-top:2px}
.company__cta{border:1px solid var(--ink);padding:34px}
.company__cta h3{font-size:19.5px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
.company__cta p{color:var(--ink-2);font-size:15.5px;margin-bottom:22px}

/* ── cta band ── */
.cta-band{background:var(--teal);color:#fff}
.cta-band__in{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:64px 28px;flex-wrap:wrap}
.cta-band .eyebrow{color:#d3ece8}
.cta-band .eyebrow::before{background:#d3ece8}
.cta-band__lead{font-size:clamp(1.6rem,2.8vw,2.3rem);font-weight:800;letter-spacing:-.02em;margin:14px 0 8px}
.cta-band__sub{color:#d9efec;font-size:16px}
.cta-band__act{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.cta-band__hours{font-size:12.5px;color:#c3e4de;letter-spacing:.02em}

/* ── footer ── */
.site-footer{background:var(--paper);border-top:1px solid var(--ink);padding:56px 0 36px}
.footmap{display:grid;grid-template-columns:160px 1fr;gap:24px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.footmap h3{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.footmap ul{list-style:none;display:grid;gap:9px}
.footmap__col{min-width:0}
.footmap__col--cats ul{grid-template-columns:1fr 1fr;gap:9px 20px}
.footmap a{font-size:15px;color:var(--ink-2)}
.bizinfo{padding-top:26px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.bizinfo__co{font-weight:800;font-size:16px;margin-bottom:8px}
.bizinfo p{font-size:13.5px;color:var(--muted);line-height:1.8}
.bizinfo a{color:var(--ink-2)}
.bizinfo__copy{font-size:12px;color:var(--muted);text-align:right}

/* ── floating call ── */
.floating-call{display:none;position:fixed;left:16px;right:16px;bottom:16px;z-index:60;
  background:var(--teal);color:#fff;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:16px;padding:16px;border:1px solid var(--teal)}
.floating-call .ic{width:18px;height:18px}

/* ── breadcrumb ── */
.crumb{border-bottom:1px solid var(--line)}
.crumb .wrap{padding-top:14px;padding-bottom:14px;font-size:13px;color:var(--muted)}
.crumb b{color:var(--ink);font-weight:600}

/* ── article ── */
.article{padding:56px 0 80px}
.article__head{padding-bottom:30px;border-bottom:1px solid var(--ink);margin-bottom:40px}
.article__tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.article__cat{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--teal);
  padding:5px 12px;border:1px solid var(--teal)}
.article__head h1{font-size:clamp(2.2rem,3.9vw,3.1rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:18px}
.article__sub{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:600;color:var(--ink-2);letter-spacing:-.005em;line-height:1.35;margin-bottom:14px}
.article__lead{font-size:18px;color:var(--ink-2)}

/* consult card */
.consult-card{border:1px solid var(--ink);padding:36px;margin:30px 0;text-align:center}
.consult-card__label{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.consult-card__tel{display:inline-flex;align-items:center;gap:12px;margin:14px 0 6px;font-size:clamp(1.9rem,4.3vw,2.7rem);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.consult-card__tel .ic{width:.75em;height:.75em;color:var(--teal)}
.consult-card__hours{font-size:13px;color:var(--muted)}
.consult-card__actions{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}

.article__sec{margin:40px 0}
.article__sec h2{font-size:24px;font-weight:800;letter-spacing:-.01em;margin-bottom:16px}
.article__sec p{margin-bottom:12px;color:var(--ink-2)}
.article__sec ul{margin:14px 0;list-style:none;display:grid;gap:10px;border-top:1px solid var(--line)}
.article__sec li{padding:10px 0 10px 22px;position:relative;color:var(--ink-2);border-bottom:1px solid var(--line)}
.article__sec li::before{content:"—";position:absolute;left:0;color:var(--teal)}
.article__sec b{color:var(--ink);font-weight:700}

/* data table */
.tablewrap{overflow-x:auto;margin:28px 0;border:1px solid var(--ink)}
.datatable{width:100%;border-collapse:collapse;font-size:15.5px}
.datatable caption{text-align:left;font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--muted);padding:16px 18px 0;text-transform:uppercase}
.datatable th,.datatable td{padding:18px 20px;text-align:left;border-bottom:1px solid var(--line)}
.datatable thead th{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--teal);font-weight:700;border-bottom:1px solid var(--ink)}
.datatable tbody tr:last-child td{border-bottom:0}
.datatable tbody td:nth-child(2){color:var(--teal);font-weight:800}
.datatable tbody td:nth-child(3){font-weight:700;color:var(--ink)}
.datatable__thumb{width:84px;padding:12px 16px !important}
.datatable__thumb img{width:60px;height:60px;object-fit:contain;background:var(--panel);border:1px solid var(--line);padding:4px}

/* prodbox */
.prodbox{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border:1px solid var(--ink);padding:28px;margin:38px 0}
.prodbox__code{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px;color:var(--teal)}
.prodbox b{display:block;font-size:18.5px;font-weight:800;letter-spacing:-.01em;margin-bottom:2px}
.prodbox span{font-size:15px;color:var(--ink-2)}

/* state page */
.state-page{padding:64px 0;text-align:center}
.state-page .mono{color:var(--muted);display:block;margin-bottom:16px}
.state-page h1{font-size:clamp(1.9rem,3vw,2.5rem);font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
.state-page p{color:var(--ink-2);margin-bottom:26px}

/* ── hover (포인터 기기 한정) ── */
@media (hover: hover) and (pointer: fine) {
  .btn--cta:hover{background:var(--teal);border-color:var(--teal)}
  .btn--ghost:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
  .btn--on-dark.btn--cta:hover{background:#e9e7de}
  .btn--on-dark.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
  .gnb a:hover{color:var(--teal)}
  .gnb a:hover::after{right:0}
  .consult-card__tel:hover{color:var(--teal)}
  .idxrow:hover{background:var(--teal-tint)}
  .idxrow:hover .idxrow__arrow .ic{transform:translateX(3px)}
  .footmap a:hover{color:var(--teal)}
  .crumb a:hover{color:var(--teal)}
}
@media(max-width:920px){
  .company{grid-template-columns:1fr;gap:40px}
  .footmap{grid-template-columns:1fr 1fr}
  .gnb,.gnb__cta{display:none}
  .gnb__toggle{display:inline-flex}
  body.nav-open .gnb{display:flex;position:absolute;top:80px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--paper);padding:8px 28px 16px;border-bottom:1px solid var(--line)}
  body.nav-open .gnb a{padding:14px 0;border-bottom:1px solid var(--line)}
  body.nav-open .gnb a::after{display:none}
  .section{padding:80px 0}
  .idxrow,.idxrow--guide{grid-template-columns:1fr;gap:6px;padding:22px 0}
  .idxrow__arrow{justify-self:start;margin-top:6px}
}
@media(max-width:600px){
  .topbar{display:none}
  .footmap{display:none}
  .hero-copy{padding:64px 0 44px}
  .floating-call{display:flex}
  body{padding-bottom:80px}
  .bizinfo__copy{text-align:left}
  .step{grid-template-columns:1fr;gap:8px}
  .swatch{width:60px}
  .swatch__chip{width:30px;height:30px}
  .marquee__track{animation-duration:30s}
  .idxrow__photo{width:120px;height:120px}
}

/* ── scroll reveal ── */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}