/* 공통: index.html(B4)과 같은 변수·헤더·푸터·연락 버튼 */
:root{--blue:#1F4E9E;--blue-l:#E8EEF8;--navy:#1B2433;--red:#D7261E;--gray:#F3F4F6;--line:#E3E5E9;--mute:#626873;
  --f:"Pretendard Variable",Pretendard,system-ui,sans-serif;--wrap:1200px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f);color:var(--navy);line-height:1.65;word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;width:100%;height:100%;object-fit:cover;background:#cfd3da}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.wrap.narrow{max-width:880px}
.lead{color:var(--mute);font-size:16.5px;margin-top:8px;max-width:34em}

.hd{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.hd .wrap{height:70px;display:flex;align-items:center;gap:40px}
.logo{display:flex;align-items:center;gap:9px;font-weight:900;font-size:21px;letter-spacing:-.04em;white-space:nowrap}
.logo .mark{width:34px;height:34px;flex:none;display:block}
.logo b{color:var(--blue)}
.logo span{line-height:1.1}
.nav{display:flex;gap:28px;font-weight:600;font-size:15.5px;margin-right:auto}
.nav a:hover,.nav a[aria-current]{color:var(--blue)}
.hd-tel{white-space:nowrap;display:flex;align-items:center;gap:10px;font-weight:900;font-size:21px;letter-spacing:-.02em}
.hd-tel span{font-size:12px;font-weight:800;color:#fff;background:var(--red);padding:4px 8px;border-radius:4px;letter-spacing:0}

.end{background:var(--red);color:#fff;margin-top:96px}
.end .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:48px;padding-bottom:48px;flex-wrap:wrap}
.end p{font-size:clamp(22px,2.4vw,30px);font-weight:900;letter-spacing:-.035em;line-height:1.35}
.end p small{display:block;font-size:16px;font-weight:600;opacity:.9;letter-spacing:0}
.end a{background:#fff;color:var(--red);font-weight:900;font-size:24px;padding:16px 28px;border-radius:6px;white-space:nowrap}
.ft{padding:36px 0 120px;font-size:13.5px;color:var(--mute)}
.ft b{color:var(--navy)}.ft .links{display:flex;gap:16px;margin-bottom:10px;font-weight:600}
.fab{position:fixed;right:24px;bottom:24px;z-index:50;display:flex;flex-direction:column;gap:8px}
.fab a{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;line-height:1.15;text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.fab .c{background:var(--red)}.fab .s{background:var(--blue)}
.dock{display:none}

/* 게시판 공통 */
.board,.case{padding-top:40px}
.crumb{font-size:13.5px;color:var(--mute);margin-bottom:14px}
.crumb a:hover{color:var(--blue)}
.board h1{font-weight:900;font-size:clamp(30px,3.6vw,44px);letter-spacing:-.045em;line-height:1.25}
.back{margin-top:40px}
.back a{font-weight:800;border-bottom:2px solid var(--navy)}

/* 필터: 밑줄 탭 */
.filter{display:flex;flex-wrap:wrap;gap:4px 22px;margin:34px 0 8px;border-bottom:1px solid var(--line)}
.filter button{padding:10px 0;font-weight:700;font-size:15.5px;color:var(--mute);border-bottom:3px solid transparent;margin-bottom:-1px}
.filter button span{font-size:13px;margin-left:2px}
.filter button[aria-pressed="true"]{color:var(--navy);border-bottom-color:var(--red)}

/* 목록: 한 줄에 사진 + 글 */
.clist{list-style:none}
.clist li{border-bottom:1px solid var(--line)}
.clist li[hidden]{display:none}
.clist a{display:grid;grid-template-columns:200px 1fr;gap:22px;padding:22px 0;align-items:center}
.clist .th{height:150px;border-radius:4px;overflow:hidden;background:var(--blue-l)}
.clist .th img{object-position:center 78%;transition:transform .35s}
.clist a:hover .th img{transform:scale(1.04)}
.clist .th i{display:block;height:100%;background:var(--blue-l)}
.clist small{display:block;font-size:13px;font-weight:700;color:var(--blue)}
.clist b{display:block;font-size:19px;font-weight:800;letter-spacing:-.03em;line-height:1.4;margin:3px 0 6px}
.clist a:hover b{color:var(--blue)}
.clist .tx > span{color:var(--mute);font-size:15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.areas{margin-top:56px}
.areas h2{font-size:20px;font-weight:900;letter-spacing:-.03em;margin-bottom:12px}
.areas p{display:flex;flex-wrap:wrap;gap:8px 20px;font-weight:700}
.areas a{border-bottom:1px solid var(--line)}
.areas a:hover{color:var(--blue);border-color:var(--blue)}
.areas span{color:var(--mute);font-weight:600;font-size:13px}

/* 상세 */
.case .meta{font-size:14px;font-weight:700;color:var(--blue)}
.case h1{font-weight:900;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.045em;line-height:1.3;margin:6px 0 14px}
.case .sum{font-size:18px;font-weight:600;line-height:1.6;padding-left:14px;border-left:4px solid var(--red)}
.case .ph{display:grid;gap:10px;margin:30px 0}
.case .ph figure{border-radius:6px;overflow:hidden;height:420px}
.case .ph img{object-position:center 78%}
.case .ph-2,.case .ph-n{grid-template-columns:1fr 1fr}
.case .ph-n figure:first-child{grid-column:span 2;height:460px}
.case .ph-2 figure,.case .ph-n figure{height:340px}
.case .body{font-size:17px;line-height:1.85}
.case .body p{margin-bottom:1em}
.case .call{margin-top:34px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--red);color:#fff;border-radius:6px;padding:18px 24px;font-weight:900}
.case .call span{font-size:16px}
.case .call strong{font-size:24px;white-space:nowrap}
.case .call:hover{background:#B91E17}
.rel{margin-top:56px}
.rel h2{font-size:20px;font-weight:900;letter-spacing:-.03em;padding-bottom:6px;border-bottom:2px solid var(--navy)}

/* 문서(개인정보처리방침 등) */
.doc{padding-top:40px}
.doc h1{font-weight:900;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.045em;margin-bottom:18px}
.doc h2{font-size:19px;font-weight:900;letter-spacing:-.02em;margin:36px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.doc p,.doc li{font-size:15.5px;line-height:1.8}
.doc p{margin-bottom:.8em}
.doc ol,.doc ul{padding-left:1.4em;margin-bottom:.8em}
.doc li{margin:2px 0}
.doc a{color:var(--blue);text-decoration:underline;word-break:break-all}
.doc .crumb a{color:inherit;text-decoration:none}
.doc table{width:100%;border-collapse:collapse;margin:10px 0 16px;font-size:14px;line-height:1.6}
.doc th,.doc td{border:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
.doc th{background:var(--gray);font-weight:800}
@media (max-width:960px){.doc table{display:block;overflow-x:auto;white-space:normal}.doc th,.doc td{min-width:120px}}

/* 404 */
.nf{padding-top:48px}
.nf-pipe{display:block;width:100%;max-width:560px;height:auto;margin-bottom:20px}
.nf h1{font-weight:900;font-size:clamp(30px,3.8vw,46px);letter-spacing:-.045em;line-height:1.25}
.nf h2{font-size:18px;font-weight:900;margin:36px 0 12px}
.nf-go{display:flex;flex-wrap:wrap;gap:8px 22px;font-weight:800;font-size:17px}
.nf-go a{border-bottom:2px solid var(--line);padding-bottom:2px}
.nf-go a:hover{color:var(--blue);border-color:var(--blue)}
.nf .call{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--red);color:#fff;border-radius:6px;padding:18px 24px;font-weight:900}
.nf .call span{font-size:16px}
.nf .call strong{font-size:24px;white-space:nowrap}
.nf .call:hover{background:#B91E17}

@media (max-width:960px){
  .nf{padding-top:28px}
  .nf .call span{display:none}
  .nav{display:none}.hd .wrap{height:62px;justify-content:space-between}.hd-tel{font-size:16px}.hd-tel span{display:none}
  .end{margin-top:64px}
  .fab{display:none}
  .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--line);padding:8px 10px calc(8px + env(safe-area-inset-bottom));gap:8px}
  .dock a{flex:1;text-align:center;padding:14px;border-radius:6px;font-weight:800;font-size:16px}
  .dock .c{flex:2.4;background:var(--red);color:#fff}.dock .s{border:1px solid var(--line)}
  .board,.case{padding-top:24px}
  .clist a{grid-template-columns:112px 1fr;gap:14px;padding:16px 0;align-items:start}
  .clist .th{height:96px}
  .clist b{font-size:16.5px}
  .clist .tx > span{font-size:14px}
  .case .ph figure,.case .ph-2 figure,.case .ph-n figure{height:auto;aspect-ratio:4/3}
  .case .ph-n figure:first-child{height:auto}
  .case .body{font-size:16.5px}
  .case .call span{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.clist .th img{transition:none}}
.doc blockquote{margin:14px 0;padding:12px 16px;background:var(--gray);border-left:4px solid var(--line);font-size:14.5px}
.doc blockquote p{font-size:14.5px;margin-bottom:.5em}