/* =====================================================================
   시안 B — 매거진형
   site.css **뒤에** 실린다. 컴포넌트를 처음부터 다시 쓰지 않고
   ① 토큰을 갈아끼우고 ② 뼈대(헤더·본문틀·푸터)를 바꾸고
   ③ "카드"로 보이던 것들을 "괘선으로 나뉜 지면"으로 되돌린다.

   시안 A 와의 차이는 색이 아니라 구조다.
     - 상단 드롭다운 GNB      → 전체화면 드로어
     - 홈 배너 슬라이더        → 풀블리드 히어로 + 세로 스크롤 스토리
     - 서브페이지 좌측 서브메뉴 → 상단 히어로 띠 + 가로 칩 + 단일 컬럼
     - 카드 + 그림자 + 둥근모서리 → 괘선 + 여백 + 각진 사진
     - 제목 고딕               → 제목 명조(Nanum Myeongjo)

   본문(page-body) 안의 클래스 계약(.svc- .opn- .pol- .fac- …)은 시안 A 와
   같다. 관리자가 편집한 본문이 두 시안 모두에서 그대로 보여야 하므로
   마크업은 건드리지 않고 여기서 다시 칠하기만 한다.
   ===================================================================== */

:root{
  /* 따뜻한 아이보리 지면 + 깊은 숲색 + 테라코타. A(민트/에메랄드)와 확실히 갈린다.
     흰 글씨를 얹는 색은 여기서도 4.5:1 이상을 지킨다. */
  --brand:#2E4A3C;        /* 딥 포레스트 */
  --brand-ink:#24382E;    /* 밝은 바탕 위 글자 */
  --brand-soft:#E7EDE8;
  --brand-deep:#1E3126;   /* 푸터 바탕 */
  --accent:#9C4A2F;       /* 테라코타 */
  --accent-ink:#7C3722;
  --accent-soft:#F6EAE3;

  --ink:#1F1D18; --ink-soft:#443F38; --muted:#6A6357;
  --bg:#F6F2EA; --surface:#FFFFFF; --surface-2:#F1EBE0;
  --line:#DFD7C8; --line-soft:#ECE5D8;

  --foot-text:#E7EEE8; --foot-dim:#C4D2C8;

  --warn:#7E5518; --warn-bg:#F8EFDE;
  --danger:#8E2C19; --danger-bg:#F7E7E2;
  --ok:#1F6B4C; --ok-bg:#E3F1E9;

  /* 각진 지면 — 둥근 모서리와 그림자를 걷어내고 괘선으로 나눈다 */
  --radius:0; --radius-sm:0; --radius-xs:0;
  --shadow-sm:none; --shadow:none; --shadow-lg:none;

  --maxw:1120px;
  --header-h:64px;

  --font-display:"Nanum Myeongjo","Noto Serif KR",'Apple SD Gothic Neo',
                 'Batang','바탕',serif;
  --tb-gut:24px;          /* 좌우 여백 */
}

/* --------------------------------------------------- 대안 팔레트 · 로고 금색
   site.css 에도 :root[data-palette="gold"] 이 있는데 그쪽은 시안 A 용이라
   그림자를 다시 켜 버린다. 같은 특이도(0,2,0)이고 이 파일이 뒤에 실리므로
   여기서 다시 잡아 준다 — **각진 지면(radius 0 · shadow none)은 시안 B 의
   정체성이라 색이 바뀌어도 유지되어야 한다.**
   초록이 있던 자리에 금색이, 금색과 마주 서던 자리에 딥포레스트가 들어간다. */
:root[data-palette="gold"]{
  --brand:#885800;        /* 로고 원색 · 흰 글씨 6.10:1 */
  --brand-ink:#6B4500;
  --brand-soft:#F5EBD7;
  --brand-deep:#553700;
  --accent:#2E4A3C;       /* 딥포레스트가 강조색으로 자리를 바꾼다 */
  --accent-ink:#24382E;
  --accent-soft:#E7EDE8;

  --ink:#211B10; --ink-soft:#463E30; --muted:#6B6151;
  --bg:#F8F4EC; --surface:#FFFFFF; --surface-2:#F2EADB;
  --line:#E4D9C2; --line-soft:#EFE7D6;

  --foot-text:#F1E7D2; --foot-dim:#D8C6A4;

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

/* ------------------------------------------------------- 세 번째 팔레트 · 남색
   site.css 의 blue 블록도 같은 특이도(0,2,0)지만 이 파일이 뒤에 실려 이긴다.
   gold 와 같은 이유로 여기서 다시 잡는다 — **각진 지면(radius 0 · shadow none)은
   시안 B 의 정체성이라 색이 바뀌어도 유지되어야 한다.**
   지면이 무채색에 가까운 시안이라 바탕을 A 보다 한 단계 더 차분하게 눌렀다. */
:root[data-palette="blue"]{
  --brand:#1A5C88;        /* 남색 · 흰 글씨 7.17:1 */
  --brand-ink:#134A6D;
  --brand-soft:#E4EFF7;
  --brand-deep:#103C5A;   /* 각진 시안이라 푸터를 더 깊게 */
  --accent:#9A5313;       /* 앰버를 A 보다 눌러 매거진 지면에 맞춘다 · 흰 글씨 5.80:1 */
  --accent-ink:#7D430F;
  --accent-soft:#F7EDE1;

  --ink:#141D26; --ink-soft:#3A4854; --muted:#5B6873;
  --bg:#F2F6FA; --surface:#FFFFFF; --surface-2:#E9F1F7;
  --line:#D3E0EA; --line-soft:#E3ECF3;

  --foot-text:#E0EDF6; --foot-dim:#BCD3E5;

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

/* ------------------------------------------------------------------ 바탕 */
.tb{background:var(--bg);color:var(--ink)}
html.tb-locked{overflow:hidden}

.tb h1,.tb h2,.tb h3,.tb .board-title,.tb .page h1{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;word-break:keep-all}

/* 시안 A 의 헤더/푸터는 이 시안에서 쓰지 않는다 */
.tb .site-header,.tb .site-footer{display:none}

/* 각진 지면 — 시안 A 가 카드로 세운 것들의 껍데기를 벗긴다 */
.tb .btn{border-radius:0;font-weight:700}
.tb .btn.lg{padding:15px 30px}
.tb .btn.ghost{border-width:1.5px}

/* ------------------------------------------------------------ 상단 고정 바 */
/* 기본이 "배경 있음"이다. 히어로 맨 위에서만 JS 가 .at-top 을 붙여 투명하게 만든다.
   반대로(기본 투명 + JS가 배경 추가) 짜면 JS 가 죽었을 때 로고가 본문 위에 겹쳐 안 보인다. */
.tb-head{position:sticky;top:0;z-index:120;transition:background .2s,border-color .2s;
  background:rgba(246,242,234,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.tb-head.at-top{background:transparent;border-bottom-color:transparent;backdrop-filter:none}
/* 사진 위에 얹힐 때는 로고와 버튼이 사진 밝기와 무관하게 읽혀야 한다 */
.tb-head.at-top .tb-brand img{filter:brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.5))}
/* 흰색 반투명으로 두면 밝은 하늘 위에서 흰 글씨가 2.3:1 까지 떨어진다 → 어둡게 깐다 */
.tb-head.at-top .tb-burger{background:rgba(16,22,18,.58);backdrop-filter:blur(4px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.tb-head.at-top .tb-burger:hover{background:rgba(16,22,18,.78)}
.tb-head-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--tb-gut);height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.tb-brand{display:flex;align-items:center;flex:none}
.tb-brand img{display:block;width:150px;height:auto}

.tb-burger{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;
  background:var(--brand);border:none;color:#fff;font-family:inherit;font-size:14.5px;font-weight:700}
.tb-burger:hover{background:var(--brand-deep)}
.tb-burger-bars{display:flex;flex-direction:column;gap:3.5px;width:17px}
.tb-burger-bars i{display:block;height:2px;background:currentColor}

/* --------------------------------------------------------------- 드로어 */
.tb-drawer{position:fixed;inset:0;z-index:200;background:rgba(20,26,22,.55);
  opacity:0;transition:opacity .25s}
.tb-drawer.on{opacity:1}
.tb-drawer-in{position:absolute;top:0;right:0;bottom:0;width:min(520px,100%);
  background:var(--bg);overflow-y:auto;padding:78px var(--tb-gut) 40px;
  transform:translateX(24px);opacity:.6;transition:transform .25s,opacity .25s}
.tb-drawer.on .tb-drawer-in{transform:none;opacity:1}
.tb-drawer-x{position:absolute;top:16px;right:16px;width:46px;height:46px;cursor:pointer;
  background:none;border:1px solid var(--line);color:var(--ink);font-size:19px;font-family:inherit}
.tb-drawer-x:hover{background:var(--surface-2)}

.tb-nav-g{padding:18px 0;border-top:1px solid var(--line)}
.tb-nav-g:first-child{border-top:none;padding-top:0}
.tb-nav-g h2{margin:0 0 8px;font-size:23px}
.tb-nav-g h2 a{color:var(--ink)}
.tb-nav-g h2 a:hover{color:var(--brand)}
.tb-nav-g.on h2 a{color:var(--brand)}
.tb-nav-g ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 0}
.tb-nav-g li{display:flex;align-items:center}
.tb-nav-g li+li::before{content:"";width:1px;height:12px;margin:0 12px;background:var(--line)}
.tb-nav-g ul a{font-size:15.5px;color:var(--ink-soft);padding:3px 0}
.tb-nav-g ul a:hover{color:var(--brand)}
.tb-nav-g ul a.on{color:var(--brand);font-weight:700}
.tb-nav-g ul a.hl{color:var(--accent-ink);font-weight:700}

.tb-drawer-foot{margin-top:28px;padding-top:24px;border-top:2px solid var(--brand)}
.tb-drawer-foot .btn{width:100%}
.tb-drawer-tel{display:block;margin-top:14px;font-size:27px;font-weight:800;color:var(--brand-ink);
  font-family:var(--font-display)}
.tb-drawer-foot p{margin:8px 0 0;font-size:14.5px;line-height:1.7;color:var(--muted)}

/* ------------------------------------------------------------- 본문 틀
   폭을 <main> 이 아니라 자식마다 준다. 그래야 오버라이드하지 않은 뷰
   (게시판·상담폼)도 그대로 가운데 정렬되고, .tb-full 만 화면 끝까지 나간다. */
.tb-main{padding-bottom:0}
.tb-main>*{max-width:var(--maxw);margin-left:auto;margin-right:auto;
  padding-left:var(--tb-gut);padding-right:var(--tb-gut)}
.tb-main>.tb-full{max-width:none;padding-left:0;padding-right:0}
.tb-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--tb-gut)}

.tb-kicker{margin:0 0 10px;font-size:12.5px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-ink)}
.tb-sec-head{max-width:44em;margin:0 0 40px}
.tb-sec-head h2{margin:0;font-size:38px;line-height:1.3}
.tb-sec-sub{margin:14px 0 0;font-size:17.5px;line-height:1.8;color:var(--ink-soft)}
.tb-more{display:inline-block;font-size:16px;font-weight:700;color:var(--brand-ink);
  border-bottom:2px solid var(--brand);padding-bottom:2px}
.tb-more:hover{color:var(--accent-ink);border-color:var(--accent)}

/* ------------------------------------------------------ 히어로 사진 슬라이더
   글자를 얹지 않으므로 가림막이 필요 없다 → 사진이 원래 밝기로 보인다.
   (글을 얹던 안은 대비를 맞추려다 가림막이 화면의 70% 를 덮어
    합성 후 평균밝기가 62/255 까지 떨어졌다) */
.tb-hero{position:relative;margin-top:calc(var(--header-h) * -1);overflow:hidden;background:var(--surface-2)}
/* site.css 의 .slide-track 에 aspect-ratio:700/270(배너 원본 비율)이 걸려 있어,
   높이만 덮으면 폭이 height×700/270 으로 계산돼 화면 밖으로 밀려난다. */
.tb-hero .slide-track{position:relative;aspect-ratio:auto;width:100%;height:min(78vh,660px)}
.tb-hero .slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .8s;pointer-events:none}
.tb-hero .slide.on{opacity:1;visibility:visible;pointer-events:auto}
/* 세로가 잘리는 사진이라 아래쪽(사람·가구가 있는 자리)이 보이게 내려 잡는다 */
.tb-hero .slide img{width:100%;height:100%;object-fit:cover;object-position:center 60%;display:block}
/* 헤더(로고·메뉴 버튼)가 얹히는 위쪽만 옅게 눌러 둔다. 이 값을 키우면 사진이 어두워 보인다. */
.tb-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,22,18,.34) 0%,rgba(16,22,18,.05) 20%,rgba(16,22,18,0) 36%)}

/* 사진 위 글 — **글 덩어리만 감싸는 박스**로 둔다.
   예전에는 히어로 폭 전체에 그라디언트 가림막을 깔았다. 두 가지가 문제였다.
     ① 밝은 사진에서 가림막이 끝나는 지점이 사진을 가로지르는 줄로 드러난다
     ② 넓은 화면에서 사진의 절반 이상이 가라앉는다(평균밝기 62/255 까지 갔었다)
   박스로 묶으면 경계가 "의도된 형태"로 읽히고 사진이 그만큼 살아난다.
   무엇보다 **글자 뒤 밝기가 사진과 무관하게 일정**해져, 폭·글 줄수·슬라이드가
   바뀌어도 대비가 흔들리지 않는다(예전엔 14px 안내문이 2.9:1 까지 떨어졌다).

   모서리는 직각이다 — 각진 지면이 시안 B 의 정체성이라 여기서도 유지한다.
   왼쪽 굵은 선만 브랜드색이라 팔레트를 따라간다. */
.tb-hero-scrim{position:absolute;left:0;right:0;bottom:0;z-index:2}
.tb-hero-tx{max-width:var(--maxw);margin:0 auto;padding:0 var(--tb-gut) 56px;color:#fff}
.tb-hero-box{
  max-width:560px;padding:32px 34px 34px;
  background:rgba(16,22,18,.72);
  border-left:4px solid var(--brand);
  /* 뒤가 비치되 글자 뒤는 고르게 — 지원 안 되는 브라우저에서도 위 .72 만으로 버틴다 */
  -webkit-backdrop-filter:blur(7px);
          backdrop-filter:blur(7px);
}
@media(max-width:640px){
  .tb-hero-box{padding:24px 22px 26px;border-left-width:3px}
}
.tb-hero-eyebrow{margin:0 0 14px;font-size:14px;font-weight:700;letter-spacing:.12em;color:#fff}
.tb-hero-tx h1{margin:0;font-size:clamp(32px,5.4vw,58px);line-height:1.24;color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.35)}
.tb-hero-sub{margin:16px 0 0;font-size:clamp(16px,2vw,19px);line-height:1.7;color:#fff}
.tb-hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.tb-hero-btns .btn.ghost{background:transparent;border-color:rgba(255,255,255,.85);color:#fff}
.tb-hero-btns .btn.ghost:hover{background:#fff;color:var(--brand-ink);border-color:#fff}

/* 조작부 — 매거진답게 동그란 점 대신 가는 막대로.
   글이 왼쪽 아래를 쓰므로 화살표·점을 **전부 오른쪽 아래 한 줄**로 모은다.
   화살표를 세로 가운데(left:0/right:0)에 두면 768~1024px 에서 글자를 가로지른다. */
.tb-hero .slide-btn{position:absolute;top:auto;bottom:18px;transform:none;z-index:4;
  width:46px;height:46px;border:none;cursor:pointer;font-size:23px;line-height:1;
  background:rgba(16,22,18,.48);color:#fff;transition:.15s}
.tb-hero .slide-btn:hover{background:rgba(16,22,18,.78)}
.tb-hero .slide-prev{left:auto;right:calc(var(--tb-gut) + 58px)}
.tb-hero .slide-next{right:var(--tb-gut)}
/* site.css 의 .slide-ui 는 left:0;right:0 로 가로를 꽉 채워 가운데 정렬한다.
   left 를 풀지 않으면 right 만 줘도 상자가 왼쪽부터 뻗어 점이 가운데로 밀린다. */
.tb-hero .slide-ui{position:absolute;left:auto;right:calc(var(--tb-gut) + 128px);bottom:30px;z-index:4;
  display:flex;align-items:center;justify-content:flex-end;gap:14px;width:auto}
.tb-hero .slide-dots{display:flex;gap:7px}
.tb-hero .slide-dot{width:34px;height:3px;border:none;padding:0;cursor:pointer;
  background:rgba(255,255,255,.55);box-shadow:0 1px 3px rgba(0,0,0,.35);transition:.2s}
.tb-hero .slide-dot.on{background:#fff;height:5px}
.tb-hero .slide-play{width:24px;height:24px;border:none;cursor:pointer;position:relative;
  background:rgba(255,255,255,.55);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.tb-hero .slide-play::before{content:"";position:absolute;inset:0;margin:auto;width:7px;height:9px;
  border-left:2.5px solid var(--ink);border-right:2.5px solid var(--ink)}
.tb-hero .slide-play.paused::before{width:0;height:0;border:none;
  border-left:9px solid var(--ink);border-top:5px solid transparent;border-bottom:5px solid transparent}

/* ------------------------------------------------------------- 인용 문단 */
/* padding 축약형 금지 — .tb-main>* 가 주는 좌우 여백(--tb-gut)이 지워진다 */
.tb-quote{padding-top:80px;padding-bottom:72px;text-align:center}
.tb-quote blockquote{margin:0;font-family:var(--font-display);
  font-size:clamp(22px,3.4vw,34px);line-height:1.75;color:var(--brand-ink)}
.tb-quote-by{margin:30px 0 0}

/* --------------------------------------------------- 사진/글 교차 스토리 */
.tb-story{padding-bottom:20px}
.tb-row{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1fr);gap:48px;
  align-items:center;padding:44px 0;border-top:1px solid var(--line)}
.tb-row.flip>.tb-row-ph{order:2}
.tb-row-ph{position:relative;margin:0;min-width:0}
.tb-row-ph img{display:block;width:100%;height:auto}
.tb-row-n{position:absolute;left:0;top:0;padding:9px 15px;background:var(--brand);color:#fff;
  font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:.04em}
.tb-row-tx{min-width:0}
.tb-row-tx h3{margin:0 0 14px;font-size:29px;line-height:1.35}
.tb-row-tx p{margin:0 0 22px;font-size:17px;line-height:1.9;color:var(--ink-soft);max-width:36em}

/* -------------------------------------------------------------- 일상 사진 */
.tb-daily{background:var(--surface);padding:82px 0;margin-top:40px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tb-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:-16px 0 30px}
.tb-tabs a{padding:8px 17px;border:1px solid var(--line);font-size:15px;color:var(--ink-soft)}
.tb-tabs a:hover{border-color:var(--brand);color:var(--brand)}

.tb-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.tb-tile{position:relative;display:block;overflow:hidden;background:var(--surface-2);aspect-ratio:4/3}
/* 첫 칸을 두 칸씩 차지하게 해서 격자가 균질해 보이지 않게 한다 */
.tb-tile:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.tb-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.tb-tile:hover img{transform:scale(1.04)}
.tb-tile-noimg{display:block;width:100%;height:100%;background:var(--surface-2)}
/* 가림막의 옅은 구간이 위쪽 패딩 안에서 끝나야 한다 —
   글자가 시작되는 32% 지점부터는 밝은 사진 위에서도 4.5:1 이 나오는 .74 이상을 유지한다 */
.tb-tile-tx{position:absolute;left:0;right:0;bottom:0;padding:38px 18px 15px;color:#fff;
  background:linear-gradient(180deg,rgba(18,24,20,0) 0%,rgba(18,24,20,.74) 32%,rgba(18,24,20,.93) 100%)}
.tb-tile-tx em{display:block;font-style:normal;font-size:12px;font-weight:700;
  letter-spacing:.1em;color:#E4EEE8;margin-bottom:4px}
.tb-tile-tx b{display:block;font-size:16px;font-weight:700;line-height:1.45;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tb-daily-more{margin:28px 0 0}

/* ------------------------------------------------------------- 입소 절차 */
.tb-steps{padding-top:82px;padding-bottom:20px}
.tb-step-list{list-style:none;margin:0;padding:0}
.tb-step-list li{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:baseline;
  padding:26px 0;border-top:1px solid var(--line)}
.tb-step-list li:last-child{border-bottom:1px solid var(--line)}
/* 번호는 물러나 보여야 하지만 순서를 나르는 글자다 — --line(1.3:1)은 너무 옅어 못 읽는다 */
.tb-step-n{font-family:var(--font-display);font-size:30px;font-weight:700;color:#7D735E;
  line-height:1;min-width:56px}
.tb-step-list li.accent .tb-step-n{color:var(--accent)}
.tb-step-list h3{margin:0 0 7px;font-size:25px}
.tb-step-list h3 a{color:var(--ink)}
.tb-step-list h3 a:hover{color:var(--brand)}
.tb-step-list p{margin:0;font-size:16.5px;line-height:1.8;color:var(--ink-soft)}

/* ------------------------------------------------------- 공지 · 오시는 길 */
.tb-bottom{background:var(--surface);border-top:1px solid var(--line);margin-top:70px;padding:76px 0}
.tb-bottom-in{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:start}
.tb-notice h2,.tb-visit h2{margin:0 0 18px;font-size:27px}
.tb-notice ul{list-style:none;margin:0;padding:0}
.tb-notice li{border-top:1px solid var(--line-soft)}
.tb-notice li:first-child{border-top:none}
.tb-notice li a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:15px 0;color:var(--ink-soft)}
.tb-notice li a:hover{color:var(--brand)}
.tb-notice .t{min-width:0;font-size:16.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-notice .t b{display:inline-block;margin-right:8px;padding:2px 9px;background:var(--accent-soft);
  color:var(--accent-ink);font-size:12px;font-weight:700;vertical-align:1px}
.tb-notice .d{flex:none;font-size:14px;color:var(--muted)}
.tb-visit-ph{margin:0 0 20px}
.tb-visit-ph img{display:block;width:100%;height:auto}
.tb-visit-addr{margin:0 0 6px;font-size:16.5px;line-height:1.75;color:var(--ink-soft)}
.tb-visit-tel{display:block;margin-bottom:16px;font-family:var(--font-display);
  font-size:31px;font-weight:700;color:var(--brand-ink)}

/* ------------------------------------------------------------- 푸터 */
.tb-foot{background:var(--brand-deep);color:var(--foot-text);padding:56px 0 40px;margin-top:0}
.tb-foot-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--tb-gut)}
.tb-foot-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.16)}
.tb-foot-logo{width:170px;height:auto;display:block}
.tb-foot-tel{font-family:var(--font-display);font-size:31px;font-weight:700;color:#fff}
.tb-foot-addr{margin:20px 0 0;font-size:15.5px;line-height:1.75;color:var(--foot-dim)}
.tb-foot-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin:24px 0 0}
.tb-foot-links a{font-size:14.5px;color:var(--foot-dim)}
.tb-foot-links a:hover{color:#fff}
.tb-foot-links a.strong{color:#fff;font-weight:700}
.tb-foot-meta{margin:26px 0 0;font-size:13.5px;line-height:1.9;color:var(--foot-dim)}
.tb-foot-meta a{color:var(--foot-dim);text-decoration:underline}

/* ============================================================ 서브페이지 */
.tb-phero{background:var(--brand);color:#fff;padding:calc(var(--header-h) + 34px) 0 38px;
  margin-top:calc(var(--header-h) * -1)}
/* 고정색(#C9DACF)으로 두면 금색 팔레트의 짙은 바탕에서 4.19:1 로 떨어진다.
   --foot-text 는 팔레트마다 "어두운 브랜드 면 위의 밝은 글씨"로 맞춰져 있어
   양쪽 모두 4.5:1 을 넘긴다(에메랄드 7.9 · 금색 4.9). */
.tb-crumb{font-size:14px;color:var(--foot-text);margin-bottom:12px}
.tb-crumb a{color:var(--foot-text)}
.tb-crumb a:hover{color:#fff}
.tb-phero h1{margin:0;font-size:clamp(29px,4.6vw,45px);line-height:1.28;color:#fff}

/* 좌측 서브메뉴 대신 가로 칩 — 좁아지면 가로로 스크롤된다 */
.tb-siblings{background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:var(--header-h);z-index:60}
.tb-siblings-in{display:flex;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin}
.tb-siblings a{flex:none;padding:15px 18px;font-size:15.5px;color:var(--ink-soft);
  border-bottom:3px solid transparent;white-space:nowrap}
.tb-siblings a:hover{color:var(--brand)}
.tb-siblings a.on{color:var(--brand-ink);font-weight:700;border-bottom-color:var(--brand)}

.tb-article{max-width:var(--maxw);margin:0 auto;padding:52px var(--tb-gut) 90px}
/* 글이 주인공인 페이지는 읽기 폭을 좁힌다(표·사진이 있는 페이지는 예외로 넓게 둔다) */
.tb-article .page-body{max-width:none}

/* ================================================== 본문 컴포넌트 다시 칠하기
   시안 A 가 "카드"로 세운 것들을 괘선으로 나뉜 지면으로 되돌린다.
   마크업은 그대로이므로 관리자가 편집한 본문이 두 시안에서 모두 성립한다. */
.tb .page-body{font-size:16.5px}

/* 카드 껍데기 벗기기 */
.tb .svc-hero,.tb .opn-hero,.tb .opn-box,.tb .adm-sec,.tb .call-main,.tb .detail-card{
  background:transparent;border:none;border-top:2px solid var(--brand);border-radius:0;
  box-shadow:none;padding:26px 0 0;margin-bottom:34px}
.tb .svc-hero,.tb .opn-hero{gap:36px;align-items:start}
.tb .svc-photo img,.tb .opn-photo img,.tb .call-art img{border-radius:0}

/* 틴트 상자는 남기되 각지게 + 왼쪽 굵은 괘선 */
.tb .svc-items,.tb .opn-intro,.tb .cost-lead,.tb .pt-intro,.tb .call-lead,
.tb .opn-account,.tb .adm-fact,.tb .opn-fact{
  border-radius:0;box-shadow:none}
.tb .svc-items{background:var(--surface);border:1px solid var(--line);padding:26px 28px}
.tb .opn-intro,.tb .cost-lead,.tb .pt-intro{border-left:3px solid var(--brand)}
.tb .call-lead{background:var(--surface-2);color:var(--brand-ink);text-align:left}

/* 제목은 명조로 — 이 시안의 인상을 만드는 지점 */
.tb .svc .svc-h,.tb .opn .opn-h,.tb .adm-h,.tb .cost-h,.tb .pol .pol-h2,
.tb .mv-label,.tb .pt-name,.tb .tl-year{font-family:var(--font-display)}
.tb .opn .opn-h{background:none;border-bottom:1px solid var(--line);padding:0 0 10px;
  color:var(--ink);font-size:21px}
.tb .pol .pol-h2{background:none;border-left:none;border-bottom:1px solid var(--line);
  padding:0 0 10px;border-radius:0;font-size:20px;color:var(--ink)}
.tb .adm-h{border-bottom-width:1px;border-color:var(--line);color:var(--ink)}

/* 목록의 알약·둥근 칸을 각지게 */
.tb .svc .svc-list li,.tb .adm-check li,.tb .opn .opn-ways li,.tb .adm-note,.tb .opn-copy,
.tb .adm-warn,.tb .cost-table,.tb .opn .opn-table,.tb .quota-table,.tb .staff-table,
.tb .opn .opn-tw,.tb .table-scroll,.tb .dir-map,.tb .greet-photo img,.tb .tl-photo img{
  border-radius:0}
.tb .svc .svc-list li{border:1px solid var(--line)}

/* 표 — 머리행을 진하게 눌러 지면처럼 */
.tb .cost-table thead th,.tb .opn .opn-table thead th,.tb .page-body .table_gray>thead,
.tb .page-body .bg-light-silver{background:var(--brand);color:#fff}
.tb .cost-table thead th,.tb .opn .opn-table thead th{border-bottom:none}

/* 인사말 · 미션 · 연혁 */
.tb .greet-lead{background:none;border:none;padding:0}
.tb .greet-quote{font-family:var(--font-display);border-left:3px solid var(--brand);
  background:none;border-radius:0}
.tb .mv-statement,.tb .mv-mission,.tb .mv-vision,.tb .org-node,.tb .pt-item,.tb .tl-tx{
  border-radius:0;box-shadow:none}

/* 시설 사진 — 칸을 크게, 테두리 없이 */
.tb .fac .fac-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:4px}
.tb .fac .fac-grid .photo{aspect-ratio:4/3;border:none;box-shadow:none;border-radius:0}
.tb .fac .fac-cap{font-family:var(--font-display);font-size:16px}

/* ============================================================ 게시판·폼
   뷰는 시안 A 것을 그대로 쓰고(마크업 동일) 여기서 지면 문법으로 바꾼다. */
.tb .crumb{padding-top:34px;font-size:14px}
.tb .board-title{font-size:36px;margin-bottom:26px;padding-bottom:0;border-bottom:none}
.tb .board-title .count{font-family:var(--font);font-size:16px;color:var(--muted);font-weight:400}
.tb .page-layout{display:block}
.tb .side{display:none}                       /* 이 시안엔 좌측 메뉴가 없다 */

.tb .gtabs{border-bottom:1px solid var(--line);gap:0}
.tb .gtabs a{border:none;border-bottom:3px solid transparent;border-radius:0;padding:13px 18px}
.tb .gtabs a.on{border-bottom-color:var(--brand);background:none;color:var(--brand-ink);font-weight:700}

.tb .post-list li{border-top:1px solid var(--line)}
.tb .post-list li:last-child{border-bottom:1px solid var(--line)}
.tb .post-list a{padding:20px 0}
.tb .post-title{font-family:var(--font-display);font-size:19px}

/* 갤러리 — 카드 껍데기를 벗기고 사진을 붙여 놓는다 */
.tb .gallery-grid{gap:4px}
.tb .gcard{background:none;border:none;border-radius:0;box-shadow:none;padding:0}
.tb .gthumb{border-radius:0;aspect-ratio:4/3}
.tb .gtitle{font-family:var(--font-display);font-size:16.5px;padding:12px 2px 0}
.tb .gcard:hover{transform:none}
.tb .gcard:hover .gthumb img{transform:scale(1.04)}

.tb .pager a{border-radius:0}
/* .post 에 max-width:none 을 주면 안 된다 — (0,2,0)이라 본문 폭을 잡는
   .tb-main>*{max-width:var(--maxw)} (0,1,0) 을 이겨서 글이 화면 왼쪽에 붙는다.
   site.css 의 .post 에는 애초에 max-width 가 없어 풀어 줄 것도 없었다. */
.tb .post h1{font-size:33px}
.tb .post-body{font-size:17px;line-height:1.95}

.tb .contact-form{background:var(--surface);border:1px solid var(--line);border-radius:0;
  box-shadow:none;padding:34px}
.tb .contact-form input,.tb .contact-form select,.tb .contact-form textarea{border-radius:0}
.tb .done-box{background:var(--surface);border:1px solid var(--line);border-radius:0;box-shadow:none}
.tb .done-mark{border-radius:0}
.tb .lead{font-size:17px;line-height:1.9}

/* ============================================================== 반응형 */
@media(max-width:1000px){
  .tb-row{gap:34px}
  .tb-bottom-in{gap:40px}
}
@media(max-width:860px){
  :root{--tb-gut:20px}
  .tb-sec-head h2{font-size:31px}
  .tb-row{grid-template-columns:1fr;gap:22px;padding:34px 0}
  /* 한 줄로 쌓이면 사진이 위, 글이 아래여야 읽는 순서가 맞다 */
  .tb-row.flip>.tb-row-ph{order:0}
  .tb-row-ph{max-width:340px}
  .tb-row-tx h3{font-size:25px}
  .tb-mosaic{grid-template-columns:repeat(2,1fr)}
  .tb-tile:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:16/9}
  .tb-bottom-in{grid-template-columns:1fr;gap:44px}
  .tb .svc-hero,.tb .opn-hero{gap:24px}
}
@media(max-width:640px){
  .tb-hero .slide-track{height:min(76vh,560px)}
  .tb-hero .slide-btn{width:40px;height:40px;font-size:20px;bottom:16px}
  .tb-hero .slide-prev{right:calc(var(--tb-gut) + 50px)}
  .tb-hero .slide-dot{width:24px}
  /* 좁은 화면에서는 글이 폭 전체를 쓰므로 점은 왼쪽에, 화살표는 오른쪽에 두고
     글 상자 아래 여백을 늘려 조작부 자리를 비운다 */
  .tb-hero .slide-ui{right:auto;left:var(--tb-gut);bottom:26px}
  .tb-hero-tx{padding-bottom:76px}
  .tb-hero-btns .btn{flex:1 0 100%;justify-content:center}
  .tb-quote{padding-top:56px;padding-bottom:50px}
  .tb-daily,.tb-bottom{padding:56px 0}
  .tb-steps{padding-top:56px}
  .tb-step-list li{grid-template-columns:1fr;gap:6px}
  .tb-step-n{font-size:24px;min-width:0}
  .tb-step-list h3{font-size:22px}
  .tb-drawer-in{padding:74px 20px 34px}
  .tb-nav-g h2{font-size:21px}
  .tb-article{padding:34px var(--tb-gut) 64px}
  .tb .board-title{font-size:28px}
  .tb .post h1{font-size:26px}
  .tb .contact-form{padding:22px}
  .tb-foot-tel{font-size:26px}
}
@media(max-width:420px){
  .tb-mosaic{grid-template-columns:1fr}
  .tb-tile:first-child{grid-column:auto}
}

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