@font-face{font-family:"MaruBuri";src:url(/assets/fonts/MaruBuri-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{--ink:#1a1a1a;--muted:#6b6b6b;--line:#e6e6e3;--soft:#f3f3f1;--accent:#292a2f;--accent-soft:#e8e8ea;--serif:"MaruBuri","Noto Serif KR",serif;--sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,p,li,h1,h2,h3,h4,a,button,.card,footer,nav{word-break:keep-all;overflow-wrap:break-word;line-break:strict}
body{margin:0;background:#fff;color:var(--ink);font:400 17px/1.75 var(--sans);letter-spacing:-.01em}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:-.035em;line-height:1.3;margin:0}
h1{font-size:clamp(28px,4vw,52px)}
h2{font-size:clamp(24px,2.8vw,38px)}
h3{font-size:20px;letter-spacing:-.03em}
p{margin:0 0 16px}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin-left:auto;margin-right:auto}
.sec{padding:128px 0}.sec.tight{padding:112px 0}.soft{background:var(--soft)}
.sec h1{margin-bottom:24px}.sec h2{margin-bottom:16px}
.sub{color:var(--muted);max-width:680px;margin:0 0 56px}
.lead{font-size:18px;max-width:720px;margin:0 0 40px}
.center{text-align:center;margin-top:48px}
.eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 16px;font:600 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow svg{flex:none}
.crumb{display:flex;flex-wrap:wrap;gap:0;margin:0 0 24px;font-size:14px;color:var(--muted)}
.crumb a:hover{text-decoration:underline}
.crumb>*+*::before{content:"/";margin:0 10px;color:#c9c9c4}
/* 헤더 */
.btn-consult{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px;border:1px solid var(--line);background:#fff;color:var(--ink)!important;font:700 16px/1 var(--sans);letter-spacing:-.02em;text-decoration:none!important;transition:color .2s,border-color .2s,background-color .2s}
.btn-consult:hover{color:var(--accent)!important;border-color:var(--accent);background:var(--accent-soft)}
.topbar{background:#fff}
.topbar-in{position:relative}
.topbar-in::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:1px;background:var(--line)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:20px;padding-bottom:20px}
.topbar p{margin:0;font:700 20px/1.4 var(--serif);letter-spacing:-.03em}
.topbar-in>div{display:flex;gap:12px;flex:none}
.hd{--hl:#8c8c86;background:#fff;padding:28px 0}
.hd-band{position:relative;display:grid;grid-template-columns:minmax(260px,340px) 1fr 200px;align-items:stretch}
.hd-band::before,.hd-band::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--hl);z-index:2}
.hd-band::before{top:0}.hd-band::after{bottom:0}
.hd-brand{display:flex;flex-direction:column;justify-content:center;padding:28px 32px 28px 0}
.logo{font:700 34px/1.1 var(--serif);letter-spacing:-.045em;color:var(--ink)}
.logo:hover{text-decoration:none}
.hd-brand p{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}
.hd-cells{position:relative;display:grid;grid-template-columns:repeat(3,1fr)}
.hd-cells::before,.hd-cta4::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:1.5px;background:var(--hl);z-index:2}
.cell{position:relative;display:flex;align-items:center;gap:14px;padding:18px 16px;background:#fff;background-clip:padding-box;border:8px solid #fff;border-radius:18px;color:var(--ink);text-decoration:none!important;transition:background-color .2s}
.cell::after{content:"";position:absolute;right:-8px;top:20%;bottom:20%;width:1.5px;background:var(--hl)}
.cell:nth-child(3n)::after{display:none}
.cell:nth-child(-n+3)::before{content:"";position:absolute;left:14%;right:14%;bottom:-8px;height:1.5px;background:var(--hl)}
.cell svg{flex:none;color:var(--muted);transition:color .2s}
.cell .ct{min-width:0}
.cell strong{display:block;font:700 16px/1.35 var(--sans);letter-spacing:-.03em;white-space:nowrap;transition:color .2s}
.cell small{display:block;font-size:13px;color:var(--muted);white-space:nowrap}
.cell:hover,.cell[aria-current]{background:#efe9db}
.cell:hover svg,.cell:hover strong,.cell[aria-current] svg,.cell[aria-current] strong{color:var(--accent)}
.hd-cta4{position:relative;display:flex;flex-direction:column;justify-content:center;padding:0 6px 0 14px}
.hd-cta4 a{position:relative;flex:none;height:80px;background-clip:padding-box;border:8px solid #fff;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--ink);font:700 17px/1 var(--sans);letter-spacing:-.02em;text-decoration:none!important;transition:color .2s,background-color .2s}
.hd-cta4 a+a::before{content:"";position:absolute;top:0;left:18%;right:18%;height:1.5px;background:var(--hl)}
.hd-cta4 a:hover{color:var(--accent);background-color:#efe9db}
.hd-cta4 svg{flex:none}
.topbar{background:#fff}
.topbar-in::after{background:#8c8c86!important;height:1.5px!important}
.hd-cta,.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 28px;background:var(--accent);color:#fff!important;font:600 15px/1 var(--sans);border:1px solid var(--accent);border-radius:0;text-decoration:none!important;transition:filter .3s}
.btn{height:52px;padding:0 36px;font-size:16px}
.hd-cta:hover,.btn:hover{filter:brightness(1.18)}
.btn-ghost,.btn-line{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 36px;font:600 16px/1 var(--sans);border:1px solid currentColor;border-radius:0;background:transparent;cursor:pointer;text-decoration:none!important;transition:background .3s}
.btn-ghost{color:var(--ink)}.btn-ghost:hover{background:rgba(0,0,0,.05)}
.btn-line{color:#fff}.btn-line:hover{background:rgba(255,255,255,.12)}
.more{font-weight:600;border-bottom:1px solid var(--ink);padding-bottom:2px}
/* 히어로 */
.hero{position:relative;min-height:600px;height:min(86vh,820px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#222}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42)}
.hero-in{position:relative;z-index:1;width:100%;padding-bottom:96px}
.hero h1{font-size:clamp(40px,6.4vw,84px);letter-spacing:-.04em;margin:0 0 24px;color:#fff}
.hero-sub{max-width:680px;font-size:18px;margin:0 0 40px;color:#fff}
.hero-btn{display:flex;flex-wrap:wrap;gap:16px}
.hero .btn{background:#fff;color:var(--accent)!important;border-color:#fff}
.hero .btn-ghost{color:#fff}.hero .btn-ghost:hover{background:rgba(255,255,255,.14)}
/* 카드 */
.grid{display:grid;gap:32px}
.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr);gap:24px}.g5{grid-template-columns:repeat(5,1fr);gap:24px}
.card{display:block;min-width:0;text-decoration:none!important}
.card .ph{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--soft)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease-out}
.card:hover img{transform:scale(1.05)}
.card strong{display:block;margin-top:16px;font:700 18px/1.4 var(--sans);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card small{display:block;margin-top:4px;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card[hidden]{display:none}
/* 사례 본문 */
.case h1{margin-bottom:40px}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 72px}
.gal li{aspect-ratio:4/3;background:var(--soft);overflow:hidden}
.gal li:first-child{grid-column:1/3;grid-row:1/3}
.gal img{width:100%;height:100%;object-fit:contain}
.facts{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:16px}
.facts th,.facts td{padding:14px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.facts th{width:150px;font-weight:600;color:var(--muted)}
.blk{margin-top:88px}
.blk h3{margin:40px 0 12px}
.plain li{padding:14px 0;border-bottom:1px solid var(--line)}
.plain li:first-child{border-top:1px solid var(--line)}
.steps{counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.steps li:first-child{border-top:1px solid var(--line)}
.steps li::before{content:counter(s);flex:none;width:28px;font:700 20px/1.5 var(--serif);color:var(--accent)}
.qa{padding:28px 0;border-bottom:1px solid var(--line)}
.qa:first-of-type{border-top:1px solid var(--line)}
.qa h3{margin:0 0 12px}.qa p{margin:0}
.uplinks{display:flex;flex-wrap:wrap;gap:12px 32px;margin:72px 0 0;font-weight:600}
.uplinks a{border-bottom:1px solid var(--ink);padding-bottom:2px}
/* 카테고리 타일 + 상담 바(홈) */
.wordmark{margin:0 0 16px;font:700 clamp(32px,4.4vw,56px)/1.15 var(--serif);letter-spacing:-.04em}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tile{display:flex;flex-direction:column;gap:8px;padding:40px 32px;border:1px solid var(--line);text-decoration:none!important;transition:box-shadow .3s}
.tile:hover{box-shadow:0 10px 30px rgba(0,0,0,.08)}
.tile svg{color:var(--accent);margin-bottom:16px}
.tile strong{font:700 20px/1.4 var(--sans);letter-spacing:-.03em}
.tile span{font-size:15px;color:var(--muted)}
.cbar{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:32px;margin-top:48px;padding:40px;background:var(--soft)}
.cbar p{margin:0;font:700 22px/1.4 var(--serif);letter-spacing:-.03em}
.cbar div{display:flex;justify-content:center}
/* 진행 과정(홈): 둥근 사각형 아웃라인 */
.proc5{display:flex;align-items:flex-start;margin-top:56px}
.proc5 .stp{flex:1 1 0;min-width:0}
.proc5 .arr{flex:none;width:44px;height:104px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.proc5 .shape{height:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1.5px solid #5a5b61;border-radius:12px;transition:border-color .3s}
.proc5 .stp:hover .shape{border-color:#000}
.proc5 .no{font:300 22px/1 var(--sans);letter-spacing:-.02em;color:var(--accent)}
.proc5 strong{font:700 18px/1.3 var(--sans);letter-spacing:-.03em;white-space:nowrap}
.proc5 p{margin:20px 4px 0;font-size:15px;line-height:1.75;text-align:center}
/* Closing */
.closing{position:relative;height:650px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;background:#222}
.closing>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.closing::after{content:"";position:absolute;inset:0;background:rgba(19,19,19,.55)}
.closing-in{position:relative;z-index:1;padding:0 24px}
.closing h2{color:#fff;margin:0 0 20px;white-space:nowrap;font-size:clamp(20px,2.7vw,38px)}
.closing p{margin:0 0 36px;color:#fff;opacity:.92}
/* 푸터 */
.ft{background:#fff;border-top:1px solid var(--line);padding:72px 0 48px;font-size:15px}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px}
.fbrand strong{display:block;font:700 22px/1.2 var(--serif)}
.fbrand span{display:block;margin:4px 0 16px;color:var(--muted);font-size:14px}
.fbrand p{max-width:420px;color:var(--muted);margin:0}
.ft h2{font:700 15px/1 var(--sans);letter-spacing:0;margin:0 0 16px}
.ft li{margin-bottom:8px}
.biz{display:flex;flex-wrap:wrap;gap:6px 24px;margin:48px 0 0;padding-top:32px;border-top:1px solid var(--line);font-style:normal;font-size:14px;color:var(--muted)}
.copy{margin:24px 0 0;font-size:14px;color:var(--muted)}
/* 모션 */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease-out,transform .7s ease-out}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}.card img{transition:none}html{scroll-behavior:auto}}
/* 라이트박스 */
.lb{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.lb img{max-width:92vw;max-height:90vh;object-fit:contain}
.lb-n{position:absolute;top:20px;left:24px;color:#fff;font-size:14px}
.lb button{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border:0;background:transparent;color:#fff;font-size:44px;line-height:1;cursor:pointer}
.lb-p{left:12px}.lb-x{right:12px}
/* 태블릿 */
@media (max-width:1023px){
  .proc5 .arr{width:28px}.proc5 strong{font-size:16px}.proc5 p{font-size:14px}
  .sec{padding:88px 0}.sec.tight{padding:88px 0}
  .hd-band{grid-template-columns:1fr 160px}
  .hd-brand{grid-column:1/-1;padding:20px 0 8px}
  .hd-cells{grid-column:1/2}.hd-cells::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1.5px}
  .cell{padding:10px 8px}.cell small{display:none}

  .g5{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(2,1fr)}
}
/* 모바일 */
@media (max-width:767px){
  body{font-size:16px}
  .sec,.sec.tight{padding:64px 0}
  .hd{padding:16px 0}.logo{font-size:24px}.hd-brand p{display:none}.hd-brand{padding:14px 0 12px}
  .hd-band{grid-template-columns:1fr}
  .hd-cells{grid-column:auto;grid-template-columns:repeat(2,1fr)}
  .cell:nth-child(3n)::after{display:block}.cell:nth-child(2n)::after{display:none}
  .cell:nth-child(-n+3)::before{display:none}.cell:nth-child(-n+4)::before{content:"";display:block;position:absolute;left:10%;right:10%;bottom:-8px;height:1.5px;background:var(--hl)}
  .cell{padding:10px 10px;gap:10px;min-height:60px}.cell svg{width:26px;height:26px}.cell strong{font-size:15px}
  .hd-cta4{flex-direction:row;min-height:56px;padding:0 20px}.hd-cta4 a{flex:1;height:56px}.hd-cta4::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1.5px}.hd-cta4 a+a::before{top:20%;bottom:20%;left:0;right:auto;width:1.5px;height:auto}

  .wrap{padding:0 20px}
  .topbar-in{flex-direction:column;align-items:stretch;gap:14px;padding-top:18px;padding-bottom:18px}.topbar p{font-size:18px}.topbar-in>div{flex-direction:column}
  .topbar-in::after{left:20px;right:20px}
  .hero{min-height:560px}.hero-in{padding-bottom:56px}.hero h1{font-size:40px}.hero-sub{font-size:16px}
  .grid,.g3,.g5{grid-template-columns:1fr;gap:28px}
  #categories .g3,.g4{grid-template-columns:repeat(2,1fr);gap:20px}
  .card strong{font-size:16px}
  .gal{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:48px}
  .gal li:first-child{grid-column:1/3;grid-row:auto}
  .facts th{width:96px}
  .blk{margin-top:64px}
  .closing{height:520px}.closing h2{white-space:normal}
  .fcols{grid-template-columns:1fr 1fr;gap:32px 24px}.fbrand{grid-column:1/-1}
  .biz{flex-direction:column;gap:6px}
  .tiles{grid-template-columns:repeat(2,1fr);gap:12px}
  .tile{padding:24px 18px}.tile strong{font-size:17px}.tile span{font-size:14px}
  .cbar{flex-direction:column;gap:16px;padding:28px 20px;text-align:center}.cbar p{font-size:19px}.cbar div{width:100%}.cbar .btn{width:100%}
  .proc5{flex-direction:column;align-items:stretch;margin-top:40px}
  .proc5 .arr{width:auto;height:44px;transform:rotate(90deg)}
  .proc5 .shape{height:88px}
  .proc5 p{margin:16px 0 0}
}