/* =====================================================================
   시안 D · 타일 그리드형   (sscenter.ad-media.kr 구성 참조)

   site.css 뒤에 실려 토큰과 뼈대를 덮는다. 본문(page-body) 클래스 계약은
   A·B·C 와 같다 — 관리자가 고친 본문이 네 시안 모두에서 성립해야 하므로
   마크업은 손대지 않고 여기서 다시 칠하기만 한다.

   이 시안을 가르는 것
     ① **사진 위 흰 글씨 정사각 타일**이 메인 내비게이션 노릇을 한다.
        A 의 둥근 카드, B 의 괘선, C 의 둥근 타일과 달리 정사각 사진 덩어리다.
     ② 헤더가 두 줄이다 — 얇은 유틸 바 + 로고·드롭다운 GNB.
     ③ 지면이 순백이고 컨테이너가 넓다(1200px). 모서리 0 · 그림자 없음.

   시안 B 도 모서리 0 이지만 그쪽은 명조 제목 + 괘선 매거진이고, 이쪽은
   Noto Sans + 사진 타일 격자다. 인상이 겹치지 않는다.
   ===================================================================== */

:root{
  /* 브랜드색은 site.css 기본(에메랄드)을 그대로 쓴다 — 이 시안의 정체성은
     색이 아니라 짜임이다. 팔레트 전환은 아래 블록이 받는다. */

  /* 지면은 순백. A(민트 틴트)·C(흰색이지만 초록 기운)와 달리 완전 중성이다 */
  --ink:#333333; --ink-soft:#555555; --muted:#767676;
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F6F6F6;
  --line:#E3E3E3; --line-soft:#EFEFEF;

  --radius:0; --radius-sm:0; --radius-xs:0;
  --shadow-sm:none; --shadow:none; --shadow-lg:none;

  --maxw:1200px;
  --header-h:112px;         /* 유틸 40 + 로고행 72 */
  --td-util-h:40px;
  --td-gut:24px;
  --font-head:"Noto Sans KR",var(--font);
}

/* --------------------------------------------------- 대안 팔레트 · 로고 금색
   site.css 의 gold 블록과 같은 특이도(0,2,0)지만 이 파일이 뒤에 실려 이긴다.
   **순백 지면과 모서리 0 은 시안 D 의 정체성이라 색이 바뀌어도 유지되어야 한다.**
   다시 선언하지 않으면 site.css 쪽이 민트/크림 틴트와 그림자를 되살린다. */
:root[data-palette="gold"]{
  --brand:#8A5A00;        /* 로고 금색 · 흰 글씨 5.95:1 */
  --brand-ink:#6E4700;
  --brand-soft:#F7EFDE;
  --brand-deep:#5A3A00;
  --accent:#17794A;       /* 초록이 강조색으로 자리를 바꾼다 */
  --accent-ink:#12603B;
  --accent-soft:#E8F3EC;

  --ink:#332F28; --ink-soft:#565046; --muted:#78715F;
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F7F4EE;
  --line:#E6E0D3; --line-soft:#F0ECE3;
  --foot-text:#F2E9D6; --foot-dim:#D4C4A4;

  --radius:0; --radius-sm:0; --radius-xs:0;
  --shadow-sm:none; --shadow:none; --shadow-lg:none;
}

/* --------------------------------------------------- 세 번째 팔레트 · 남색 */
:root[data-palette="blue"]{
  --brand:#1A5C88;        /* 남색 · 흰 글씨 7.17:1 */
  --brand-ink:#134A6D;
  --brand-soft:#E6F1F9;
  --brand-deep:#154E73;
  --accent:#A85C16;       /* 따뜻한 앰버 */
  --accent-ink:#8A4A11;
  --accent-soft:#FBF1E4;

  --ink:#2C3238; --ink-soft:#4E555C; --muted:#6E767E;
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F4F7FA;
  --line:#E0E5EA; --line-soft:#EDF1F5;
  --foot-text:#E4EFF7; --foot-dim:#C6DAEA;

  --radius:0; --radius-sm:0; --radius-xs:0;
  --shadow-sm:none; --shadow:none; --shadow-lg:none;
}

/* ------------------------------------------------------------------ 바탕 */
.td{background:var(--bg);color:var(--ink)}
html.td-locked{overflow:hidden}
.td h1,.td h2,.td h3,.td .board-title,.td .page h1{
  font-family:var(--font-head);letter-spacing:-.02em;word-break:keep-all}

/* 시안 A 의 헤더/푸터는 이 시안에서 쓰지 않는다 */
.td .site-header,.td .site-footer{display:none}
.td .btn{border-radius:0;font-weight:700}
.td .btn.lg{padding:15px 30px}

/* =========================================================== 상단 유틸 바 */
/* 참조안은 로그인·회원가입·검색이 올라가 있다. 이 사이트는 회원제가 없으므로
   그 자리에 실제로 쓸 것(전화·오시는 길·상담)을 넣는다. 빈 껍데기를 흉내 내면
   고객이 "이건 뭐냐"고 묻게 된다. */
.td-util{background:var(--brand-deep);color:var(--foot-text,#fff)}
.td-util-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--td-gut);
  height:var(--td-util-h);display:flex;align-items:center;justify-content:flex-end;gap:20px}
.td-util a{color:inherit;font-size:13.5px;display:inline-flex;align-items:center;gap:6px}
.td-util a:hover{color:#fff;text-decoration:underline}
.td-util .tel{font-weight:700}

/* ============================================================ 헤더 · GNB */
.td-head{position:sticky;top:0;z-index:120;background:#fff;border-bottom:1px solid var(--line)}
.td-head-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--td-gut);
  height:72px;display:flex;align-items:center;gap:30px}
.td-brand{flex:none;display:flex;align-items:center}
.td-brand img{display:block;width:200px;height:auto}

.td-gnb{margin-left:auto}
.td-gnb-top{list-style:none;display:flex;gap:0;margin:0;padding:0}
.td-gnb-top>li{position:relative}
.td-gnb-top>li>a{display:flex;align-items:center;height:72px;padding:0 22px;
  font-size:17px;font-weight:600;color:var(--ink);white-space:nowrap}
.td-gnb-top>li>a:hover,.td-gnb-top>li.on>a{color:var(--brand)}
/* 현재 위치는 색만으로 알리지 않는다 — 아래 굵은 선을 함께 준다 */
.td-gnb-top>li.on>a::after{content:"";position:absolute;left:22px;right:22px;bottom:-1px;
  height:3px;background:var(--brand)}

/* 드롭다운 — 대메뉴마다 하나씩. C 의 한 판짜리 메가 패널과 구분되는 지점이다. */
.td-sub{position:absolute;left:0;top:100%;min-width:186px;margin:0;padding:8px 0;
  list-style:none;background:#fff;border:1px solid var(--line);border-top:2px solid var(--brand);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s}
.td-gnb-top>li:hover>.td-sub,
.td-gnb-top>li:focus-within>.td-sub{opacity:1;visibility:visible;transform:none}
.td-sub a{display:block;padding:10px 20px;font-size:15.5px;color:var(--ink-soft);white-space:nowrap}
.td-sub a:hover,.td-sub a:focus-visible{background:var(--surface-2);color:var(--brand-ink)}
.td-sub a.hl{color:var(--accent-ink);font-weight:700}
.td-sub a.on{color:var(--brand-ink);font-weight:700}

.td-burger{display:none;margin-left:auto;width:46px;height:46px;border:none;background:none;
  cursor:pointer;padding:0;position:relative}
.td-burger span{display:block;position:absolute;left:11px;right:11px;height:2px;
  background:var(--ink);transition:.18s}
.td-burger span:nth-child(1){top:15px}
.td-burger span:nth-child(2){top:22px}
.td-burger span:nth-child(3){top:29px}

/* ------------------------------------------------------------ 모바일 서랍 */
.td-drawer{position:fixed;inset:0;z-index:200;background:rgba(20,22,20,.5);
  opacity:0;visibility:hidden;transition:.2s}
.td-drawer.on{opacity:1;visibility:visible}
.td-drawer-in{position:absolute;top:0;right:0;bottom:0;width:min(86vw,340px);
  background:#fff;overflow-y:auto;transform:translateX(100%);transition:transform .24s}
.td-drawer.on .td-drawer-in{transform:none}
.td-drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line)}
.td-drawer-head img{width:160px;height:auto;display:block}
.td-drawer-close{width:44px;height:44px;border:none;background:none;cursor:pointer;
  font-size:26px;line-height:1;color:var(--ink)}
.td-drawer nav>ul{list-style:none;margin:0;padding:0}
.td-drawer nav>ul>li{border-bottom:1px solid var(--line-soft)}
.td-drawer nav>ul>li>a{display:block;padding:16px 18px;font-size:17px;font-weight:700;color:var(--ink)}
.td-drawer nav ul ul{list-style:none;margin:0;padding:0 0 10px}
.td-drawer nav ul ul a{display:block;padding:9px 18px 9px 30px;font-size:15.5px;color:var(--ink-soft)}
.td-drawer nav ul ul a.hl{color:var(--accent-ink);font-weight:700}

/* ================================================================ 히어로 */
/* 전체 폭 슬라이더. site.css 의 .slide-track 은 aspect-ratio:700/270 이라
   높이만 덮으면 **폭이 height×700/270 으로 계산돼 화면을 밀어낸다**
   (시안 C 에서 520→1348px 로 터졌던 그 문제). aspect-ratio:auto 를 함께 준다. */
.td-hero{position:relative;overflow:hidden;background:var(--surface-2)}
.td-hero .slide-track{position:relative;aspect-ratio:auto;width:100%;height:min(56vh,460px)}
.td-hero .slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .6s ease,visibility .6s}
.td-hero .slide.on{opacity:1;visibility:visible}
.td-hero .slide img{width:100%;height:100%;object-fit:cover;object-position:center 55%;display:block}

/* 조작부는 아래 가운데 — 타일 격자가 바로 밑에 오므로 좌우로 비켜 둘 자리가 없다 */
.td-hero .slide-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:0;border:none;cursor:pointer;
  background:rgba(20,24,22,.42);color:#fff;font-size:24px;line-height:1;
  display:grid;place-items:center}
.td-hero .slide-btn:hover{background:rgba(20,24,22,.72)}
.td-hero .slide-prev{left:0}
.td-hero .slide-next{right:0}
.td-hero .slide-ui{position:absolute;left:0;right:0;bottom:16px;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:10px}
.td-hero .slide-dots{display:flex;gap:8px}
.td-hero .slide-dot{width:10px;height:10px;border-radius:0;border:none;padding:0;cursor:pointer;
  background:rgba(255,255,255,.55)}
.td-hero .slide-dot.on{background:#fff;width:26px}
.td-hero .slide-play{width:26px;height:26px;border:none;cursor:pointer;position:relative;
  background:rgba(255,255,255,.55)}
.td-hero .slide-play::before{content:"";position:absolute;inset:0;margin:auto;width:7px;height:9px;
  border-left:3px solid #1b1b1b;border-right:3px solid #1b1b1b}
.td-hero .slide-play.paused::before{width:0;height:0;border:none;margin-left:10px;
  border-left:8px solid #1b1b1b;border-top:5px solid transparent;border-bottom:5px solid transparent}

/* ---- 본문 폭 ----
   폭은 <main> 이 자식에게 준다. 시안 B·C 와 같은 방식이다.
   풀블리드는 .td-full 로만 푼다.
   **자식에 padding 축약형을 쓰면 여기서 준 좌우 여백이 지워진다**(모바일에서만
   드러나 못 보고 지나치기 쉽다) — 세로 여백은 padding-top/bottom 으로만 준다. */
.td-main>*{max-width:var(--maxw);margin-left:auto;margin-right:auto;
  padding-left:var(--td-gut);padding-right:var(--td-gut)}
.td-main>.td-full{max-width:none;padding-left:0;padding-right:0}
.td-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--td-gut)}
.td-article{padding-top:52px;padding-bottom:90px}

/* ========================================================== 정사각 타일 */
/* 이 시안의 주인공. 사진 위에 흰 글씨를 얹으므로 **가림막을 타일 전체에 고르게**
   깐다 — 글이 가운데 아래라 부분 그라디언트로는 밝기가 보장되지 않는다
   (시안 B 히어로에서 같은 실수를 했다). 값은 실측해서 정했다. */
.td-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:2px}
.td-tile{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  background:var(--brand-deep);color:#fff}
.td-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .4s}
.td-tile:hover img{transform:scale(1.05)}
/* 가림막 정지점은 실측으로 잡았다.
   글은 아래 45% 구간(위에서 55% 지점부터)에 놓인다. 그래서 **52% 에서 이미 .64 에
   닿게** 해 두었다 — 글이 놓이는 어느 지점에서도 알파가 .64 아래로 내려가지 않는다.
   타일 사진 4장 전 픽셀에 합성해 잰 최악값:
       .58 → 설명글 4.20:1 (미달)   .64 → 5.18:1   .70 → 6.44:1
   처음 쓴 .30→.62 선형은 글 구간 최악이 **3.00:1** 이었다. 아래로 갈수록 진해지니
   괜찮겠지 하고 눈대중으로 잡으면 이렇게 된다 — 반드시 글이 놓이는 구간의
   **최소** 알파로 계산할 것. */
.td-tile-in{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  justify-content:flex-end;gap:8px;padding:28px 26px 26px;
  background:linear-gradient(rgba(12,18,15,.10) 0%,rgba(12,18,15,.64) 52%,rgba(12,18,15,.80) 100%);
  transition:background .2s}
/* 호버는 더 진하게 — 옅게 하면 글자 대비가 무너진다 */
.td-tile:hover .td-tile-in{
  background:linear-gradient(rgba(12,18,15,.24) 0%,rgba(12,18,15,.74) 52%,rgba(12,18,15,.86) 100%)}
.td-tile b{font-family:var(--font-head);font-size:22px;font-weight:700;letter-spacing:-.02em;
  color:#fff;line-height:1.3}
.td-tile span{font-size:15px;line-height:1.6;color:#F0F4F1}
.td-tile em{margin-top:6px;font-style:normal;font-size:13.5px;font-weight:700;
  color:#fff;display:inline-flex;align-items:center;gap:6px}
.td-tile em::after{content:"›";font-size:17px;line-height:1}
.td-tile:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}

/* ============================================================ 빠른 안내 */
/* 참조안의 전화 배너 + 블로그 배너 자리 */
.td-quick{margin-top:2px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.td-quick a{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:26px 28px;background:var(--brand);color:#fff}
.td-quick a+a{background:var(--surface-2);color:var(--ink)}
.td-quick a:hover{filter:brightness(.94)}
.td-quick b{font-family:var(--font-head);font-size:19px;font-weight:700;display:block}
.td-quick span{font-size:14.5px;opacity:.92;display:block;margin-top:4px}
.td-quick .num{font-size:26px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}

/* ================================================================ 공지 */
.td-notice{padding-top:76px;padding-bottom:84px;
  display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:start}
.td-notice-h .k{display:block;font-size:13px;font-weight:800;letter-spacing:.18em;
  color:var(--brand);margin-bottom:10px}
.td-notice-h h2{font-size:30px;font-weight:700;margin:0}
.td-notice-h .more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;
  font-size:14.5px;font-weight:700;color:var(--ink-soft);border-bottom:1px solid var(--line)}
.td-notice-h .more:hover{color:var(--brand);border-color:var(--brand)}
.td-notice ul{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.td-notice li{border-bottom:1px solid var(--line)}
.td-notice li a{display:flex;align-items:center;gap:16px;padding:19px 4px;color:var(--ink)}
.td-notice li a:hover .t{color:var(--brand);text-decoration:underline}
.td-notice .t{flex:1;min-width:0;font-size:16.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-notice .d{flex:none;font-size:14px;color:var(--muted)}
.td-notice .badge{flex:none;padding:3px 9px;font-size:12px;font-weight:700;
  background:var(--brand);color:#fff}

/* ============================================================== 갤러리 */
.td-gallery{background:var(--surface-2);padding-top:76px;padding-bottom:84px}
.td-gallery-in{max-width:var(--maxw);margin:0 auto;padding-left:var(--td-gut);padding-right:var(--td-gut)}
.td-sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.td-sec-h .k{display:block;font-size:13px;font-weight:800;letter-spacing:.18em;
  color:var(--brand);margin-bottom:10px}
.td-sec-h h2{font-size:30px;font-weight:700;margin:0}
.td-sec-h .more{font-size:14.5px;font-weight:700;color:var(--ink-soft);
  border-bottom:1px solid var(--line);white-space:nowrap}
.td-sec-h .more:hover{color:var(--brand);border-color:var(--brand)}
.td .gallery-grid{gap:2px}
.td .gcard{border:none;border-radius:0}
.td .gcard:hover{transform:none}
.td .gthumb{aspect-ratio:1/1}

/* ============================================================== 푸터 */
.td-foot{background:var(--brand-deep);color:var(--foot-text);padding:52px 0 40px;margin-top:0}
.td-foot-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--td-gut)}
.td-foot-links{display:flex;flex-wrap:wrap;gap:0;margin-bottom:26px;
  padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.16)}
.td-foot-links a{color:var(--foot-text);font-size:14.5px;padding:0 16px;
  border-left:1px solid rgba(255,255,255,.22)}
.td-foot-links a:first-child{padding-left:0;border-left:none}
.td-foot-links a:hover{color:#fff;text-decoration:underline}
.td-foot-links a.strong{font-weight:700;color:#fff}
.td-foot-body{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start}
.td-foot-logo{width:200px;height:auto;display:block;margin-bottom:16px}
.td-foot-info{font-size:14.5px;line-height:1.95;color:var(--foot-dim);margin:0}
.td-foot-info b{color:var(--foot-text);font-weight:600}
.td-foot-tel{font-family:var(--font-head);font-size:30px;font-weight:800;color:#fff;
  letter-spacing:-.02em;display:block}
.td-foot-tel-k{font-size:13.5px;font-weight:700;letter-spacing:.14em;color:var(--foot-dim);
  display:block;margin-bottom:4px}
.td-foot-copy{margin:26px 0 0;font-size:13px;color:var(--foot-dim)}

/* ========================================================== 서브페이지 */
.td-phead{background:var(--surface-2);border-bottom:1px solid var(--line);
  padding-top:52px;padding-bottom:46px}
.td-phead-in{max-width:var(--maxw);margin:0 auto;padding-left:var(--td-gut);padding-right:var(--td-gut)}
.td-crumb{font-size:14px;color:var(--muted);margin-bottom:10px}
.td-crumb a{color:var(--muted)}
.td-crumb a:hover{color:var(--brand);text-decoration:underline}
.td-phead h1{margin:0;font-size:clamp(27px,3.6vw,38px);line-height:1.3;color:var(--ink)}

.td-tabs{background:#fff;border-bottom:1px solid var(--line)}
.td-tabs-in{max-width:var(--maxw);margin:0 auto;padding-left:var(--td-gut);padding-right:var(--td-gut);
  display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.td-tabs a{flex:none;padding:17px 22px;font-size:16px;color:var(--ink-soft);
  border-bottom:3px solid transparent;white-space:nowrap}
.td-tabs a:hover{color:var(--brand)}
.td-tabs a.on{color:var(--brand);font-weight:700;border-bottom-color:var(--brand)}

/* 폭을 부모(.td-main>*)가 주므로 자식에 max-width 를 건드리는 규칙을 두지 않는다
   (시안 B 에서 .tb .post{max-width:none} 이 본문을 왼쪽에 붙였던 그 문제) */

/* ============================================================== 반응형 */
@media(max-width:1024px){
  .td-tiles{grid-template-columns:repeat(2,1fr)}
  .td-notice{grid-template-columns:1fr;gap:24px}
}
@media(max-width:860px){
  .td-gnb{display:none}
  .td-burger{display:block}
  .td-head-in{height:64px}
  :root{--header-h:104px}
  .td-brand img{width:168px}
  .td-hero .slide-track{height:min(46vh,320px)}
  .td-quick{grid-template-columns:1fr}
  .td-notice{padding-top:56px;padding-bottom:60px}
  .td-gallery{padding-top:56px;padding-bottom:60px}
  .td-main{padding-top:36px;padding-bottom:64px}
}
@media(max-width:560px){
  .td-util-in{justify-content:center;gap:14px}
  .td-util a{font-size:12.5px}
  .td-tile-in{padding:20px 18px 18px}
  .td-tile b{font-size:18px}
  .td-tile span{font-size:13.5px}
  .td-notice-h h2,.td-sec-h h2{font-size:25px}
  .td-foot-tel{font-size:26px}
}

@media(prefers-reduced-motion:reduce){
  .td-tile img,.td-tile-in,.td-sub,.td-drawer,.td-drawer-in{transition:none}
  .td-tile:hover img{transform:none}
}