/* officetel.css — 사무실이전철거 오피스텔 전용 스타일 (Hue 320 / High-Contrast) */

:root{
  --h: 320;
  --bg:      hsl(0 0% 100%);
  --surface: hsl(var(--h) 45% 97%);
  --ink:     hsl(var(--h) 30% 12%);
  --muted:   hsl(var(--h) 10% 38%);
  --accent:  hsl(var(--h) 60% 30%);
  --accent-strong: hsl(var(--h) 65% 24%);
  --accent-ink: hsl(0 0% 100%);
  --line:    hsl(var(--h) 20% 85%);
  --radius: 3px;
  --border-w: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:"Nanum Square Neo Heavy","Nanum Square Neo","Nanum Square",Pretendard,"Malgun Gothic",sans-serif;
  font-weight:900;
  color:var(--ink);
  line-height:1.35;
  margin:0 0 .7em;
  letter-spacing:-0.01em;
}

a{ color:var(--accent-strong); }
a:focus-visible,
button:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

img{ max-width:100%; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Header: 좌측 세로 레일 ---------- */
.hdr{
  display:flex;
  min-height:88px;
  border-bottom:var(--border-w) solid var(--ink);
}
.hdr__rail{
  flex:0 0 64px;
  background:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
}
.hdr__rail span{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  color:var(--accent-ink);
  font-family:"Nanum Square Neo Heavy","Nanum Square Neo",sans-serif;
  font-weight:900;
  font-size:.85rem;
  letter-spacing:.15em;
  padding:.8rem 0;
}
.hdr__main{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0 1.5rem;
}
.hdr__home{
  font-weight:700;
  text-decoration:none;
  color:var(--ink);
  border:var(--border-w) solid var(--ink);
  border-radius:var(--radius);
  padding:.4rem .9rem;
}
.hdr__home:hover{ background:var(--ink); color:var(--bg); }
.hdr__tag{
  margin:0;
  color:var(--muted);
  font-size:.9rem;
}

/* ---------- Hero: 인덱스 넘버 레일 ---------- */
.hero{
  max-width:1140px;
  margin:0 auto;
  padding:3.5rem 1.5rem 2.5rem;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:2.5rem;
  align-items:start;
}
.hero__inner{ min-width:0; }
.hero__eyebrow{
  margin:0 0 .8rem;
  font-weight:700;
  color:var(--accent-strong);
  font-size:.9rem;
  letter-spacing:.04em;
}
.hero h1{
  font-size:clamp(1.9rem,4.4vw,2.7rem);
  margin-bottom:1rem;
}
.hero__lead{
  color:var(--muted);
  font-size:1.05rem;
  max-width:44ch;
  margin:0 0 1.6rem;
}
.hero__cta{
  display:inline-block;
  background:var(--accent);
  color:var(--accent-ink);
  text-decoration:none;
  font-weight:700;
  padding:.85rem 1.6rem;
  border-radius:var(--radius);
  border:var(--border-w) solid var(--ink);
}
.hero__cta:hover{ background:var(--accent-strong); }

.hero__index{
  list-style:none;
  margin:0;
  padding:0;
  border-left:var(--border-w) solid var(--ink);
}
.hero__index li + li{ border-top:1px solid var(--line); }
.hero__index a{
  display:flex;
  align-items:baseline;
  gap:.9rem;
  padding:.75rem 0 .75rem 1.1rem;
  text-decoration:none;
  color:var(--ink);
}
.hero__index a:hover .lbl{ color:var(--accent-strong); }
.hero__index .num{
  font-family:"Nanum Square Neo Heavy",sans-serif;
  font-weight:900;
  color:var(--accent);
  font-size:1.05rem;
  min-width:2ch;
}
.hero__index .lbl{ font-size:.98rem; }

/* ---------- Sections ---------- */
.sec{
  max-width:840px;
  margin:0 auto;
  padding:2.4rem 1.5rem;
}
.sec h2{
  font-size:1.5rem;
  border-left:6px solid var(--accent);
  padding-left:.7rem;
}
.sec p{ margin:0 0 1rem; }
.sec > p:last-child{ margin-bottom:0; }

/* ---------- CTA: 풀와이드 밴드 ---------- */
.ctaband{
  background:var(--accent);
  margin:2.5rem 0;
  padding:2.2rem 1.5rem;
}
.ctaband__inner{
  max-width:840px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
}
.ctaband__inner p{
  margin:0;
  color:var(--accent-ink);
  font-weight:700;
  font-size:1.05rem;
  max-width:52ch;
}
.ctaband__actions{ display:flex; gap:.75rem; flex-wrap:wrap; }
.ctaband__actions a{
  display:inline-block;
  text-decoration:none;
  font-weight:700;
  padding:.7rem 1.3rem;
  border-radius:var(--radius);
  border:var(--border-w) solid var(--accent-ink);
  color:var(--accent-ink);
}
.ctaband__actions a:hover{ background:var(--accent-ink); color:var(--accent-strong); }

/* ---------- 이미지 (공통 규칙 마크업) ---------- */
.shot{ margin: 3rem auto; max-width: 1000px; }
.shot__row{ display:flex; justify-content:center; align-items:stretch; gap:1rem; flex-wrap:nowrap; }
.shot__row img{ flex:1 1 0; min-width:0; width:100%; height:auto; display:block; object-fit:cover; border-radius: var(--radius, 6px); border:1px solid var(--line); }
@media (max-width: 640px){ .shot__row{ flex-wrap:wrap; } .shot__row img{ flex:1 1 100%; } }

/* ---------- 표 ---------- */
.tbl-wrap{ overflow-x:auto; border:var(--border-w) solid var(--ink); border-radius:var(--radius); }
.tbl{
  width:100%;
  border-collapse:collapse;
  min-width:520px;
  font-size:.95rem;
}
.tbl th, .tbl td{
  text-align:left;
  padding:.75rem .9rem;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.tbl thead th{
  background:var(--surface);
  font-family:"Nanum Square Neo Heavy",sans-serif;
  font-weight:900;
}
.tbl tbody th{
  white-space:nowrap;
  color:var(--accent-strong);
  font-weight:700;
  background:var(--surface);
}
.tbl tbody tr:last-child th,
.tbl tbody tr:last-child td{ border-bottom:none; }

/* ---------- SVG 도식 ---------- */
.flow{
  width:100%;
  height:auto;
  margin:1.2rem 0 .5rem;
}
.flow__box{ fill:var(--surface); stroke:var(--ink); stroke-width:2; }
.flow__box--accent{ fill:var(--accent); stroke:var(--accent-strong); }
.flow__label{ fill:var(--ink); }
.flow__label--accent{ fill:var(--accent-ink); }
.flow__arrow{ stroke:var(--ink); stroke-width:2.5; marker-end:none; }

/* ---------- 주의사항 ---------- */
#caution p{
  background:var(--surface);
  border-left:6px solid var(--accent-strong);
  padding:1rem 1.2rem;
  border-radius:var(--radius);
}

/* ---------- FAQ ---------- */
.faq{ display:flex; flex-direction:column; gap:1rem; }
.faq__item{
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius);
  padding:1.1rem 1.3rem;
}
.faq__item h3{
  font-size:1.05rem;
  margin:0 0 .5rem;
}
.faq__item p{ margin:0; color:var(--muted); }

/* ---------- Footer: 3단 그리드 ---------- */
.ftr{
  background:var(--ink);
  color:hsl(var(--h) 15% 92%);
  margin-top:3rem;
}
.ftr__inner{
  max-width:1140px;
  margin:0 auto;
  padding:2.6rem 1.5rem;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:2rem;
}
.ftr__biz{
  margin:0;
  font-size:.9rem;
  line-height:1.85;
  color:hsl(var(--h) 15% 88%);
}
.ftr__biz a{ color:hsl(var(--h) 60% 78%); }
.ftr__nav{ display:flex; flex-direction:column; gap:.6rem; align-self:start; }
.ftr__nav a{
  color:hsl(var(--h) 15% 92%);
  text-decoration:none;
  font-weight:700;
}
.ftr__nav a:hover{ text-decoration:underline; }
.ftr__copy{
  margin:0;
  align-self:end;
  font-size:.85rem;
  color:hsl(var(--h) 10% 70%);
}

/* ---------- 반응형 ---------- */
@media (max-width: 860px){
  .hero{ grid-template-columns:1fr; }
  .hero__index{ border-left:none; border-top:var(--border-w) solid var(--ink); }
}

@media (max-width: 640px){
  .ftr__inner{ grid-template-columns:1fr; }
  .ftr__copy{ align-self:auto; }
}

@media (max-width: 375px){
  .hdr__rail{ flex-basis:44px; }
  .hdr__rail span{ font-size:.72rem; }
  .hdr__main{ padding:0 1rem; }
  .hero{ padding:2.2rem 1rem 2rem; }
  .sec{ padding:2rem 1rem; }
  .ctaband__inner{ flex-direction:column; align-items:flex-start; }
}