/*
 * site.css
 * 코드스퀘어 홈페이지 스타일 (색상 변수, 레이아웃, 섹션별 스타일, 애니메이션)
 * Bootstrap 위에 덮어쓰는 사용자 스타일입니다.
 */
:root{--bg:#f7f9fa;--ink:#172b4d;--muted:#4f5d70;--line:#dce3e9;--accent:#168777}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,'Noto Sans KR','Malgun Gothic',sans-serif;line-height:1.7}
a{color:inherit;text-decoration:none}
button{font:inherit}
.brand{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:800;letter-spacing:-1px}
.nav-cta{border-bottom:1px solid var(--ink)}
.hero{padding-block:clamp(42px, 7vw, 75px) clamp(42px, 6vw, 65px)}
.eyebrow{font-size:12px;letter-spacing:2px;font-weight:700;display:flex;gap:10px;align-items:center}
.dot{height:7px;width:7px;background:#168777;border-radius:50%}
h1{font-size:clamp(32px, 5.6vw, 65px);line-height:1.25;letter-spacing:-0.06em;margin:20px 0}
h1 span{color:var(--muted)}
.intro{color:var(--muted);font-size:15px;max-width:440px;word-break:keep-all}
.hero .btn{margin-top:22px}
.micro{display:block;font-size:13px;color:var(--muted);margin-top:15px}
.visual{min-height:clamp(250px, 35vw, 380px);background:#eaf5f2;position:relative;overflow:hidden;display:grid;place-items:center;border:1px solid #d7e7e3;background-image:linear-gradient(#cadfd966 1px,transparent 1px),linear-gradient(90deg,#cadfd966 1px,transparent 1px);background-size:30px 30px}
.visual-top {
  position: absolute;
  z-index: 1;
  top: 8px;
  inset-inline: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding-inline-start: 8px;
  font-family: monospace;
  font-size: 12px;
  letter-spacing: 1px;
}

.motion-toggle { display: none; }
.square{width:clamp(122px, 16vw, 182px);aspect-ratio:1;background:var(--ink);transform:rotate(-13deg);box-shadow:23px 23px 0 #bde4da;display:grid;place-items:center;font:64px monospace;color:#bde4da}
.floating{position:absolute;bottom:27px;left:22px;right:22px;padding:12px 15px;background:#f8fbfc;display:flex;justify-content:space-between;font:12px monospace;border:1px solid var(--line)}
.strip b{font-weight:400;color:var(--muted)}
section{padding:clamp(46px, 7vw, 80px) 0;border-bottom:1px solid var(--line)}
.label{font-size:12px;letter-spacing:2px;color:var(--muted)}
h2{font-size:clamp(25px, 3.2vw, 32px);line-height:1.4;letter-spacing:-1.4px;margin:13px 0 0}
.section-head p{font-size:14px;color:var(--muted);max-width:310px}
.service{border-top:2px solid var(--ink);padding-top:20px}
.number{font:13px monospace;color:var(--muted)}
h3{font-size:21px;letter-spacing:-.6px;margin:22px 0 12px}
.service p,.work p{font-size:13px;color:var(--muted);word-break:keep-all}
.tags{font-size:12px;letter-spacing:.5px;margin-top:30px;color:var(--muted)}
.work-visual{height:225px;background:#eaf5f2;padding:clamp(15px, 3vw, 28px);overflow:hidden;position:relative}
.work-visual.blue{background:#eaf0fa}
.mini-window{background:#ffffff;max-width:330px;margin:auto;box-shadow:0 12px 25px #172b4d12;border:1px solid #d4e0e5;transform:rotate(-3deg);padding:16px}
.window-bar{font-size:11px;border-bottom:1px solid #ddd;padding-bottom:10px}
.mini-title{font-size:21px;font-weight:bold;margin:16px 0}
.bars{display:flex;gap:7px;align-items:end;height:60px}
.bars i{flex:1;background:#69afa1}
.bars i:nth-child(2){height:80%}
.bars i:nth-child(3){height:55%}
.bars i:nth-child(4){height:95%}
.bars i:nth-child(1){height:40%}
.mini-lines{height:11px;background:#e0e7ee;margin-top:9px;width:90%}
.mini-lines.short{width:55%}
.work h3{margin-top:17px;margin-bottom:4px}
.work-meta{font-size:12px;letter-spacing:1px;color:var(--muted)}
.work small{font-size:12px;color:var(--muted)}
.process h3{font-size:16px;margin:16px 0 10px}
.process p{font-size:12px;color:var(--muted)}
.about p{color:var(--muted);font-size:15px;word-break:keep-all}
.about .signature{color:var(--ink);font-size:14px;margin-top:25px}
.contact .label{color:#bde4da}
.contact h2{font-size:35px}
.contact p{color:#bcc9bf;font-size:13px}
.phone{font-size:24px;display:block;margin-top:20px}
.contact small{color:#bcc9bf;font-size:13px}
a:focus-visible,button:focus-visible{outline:3px solid #168777;outline-offset:5px}
body > header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--bg);
}
.site-nav {
  --bs-navbar-color: var(--ink);
  --bs-navbar-hover-color: #116b5f;
  --bs-navbar-brand-color: var(--ink);
  --bs-navbar-brand-hover-color: #116b5f;
  border-bottom: 1px solid var(--line);
  min-height: 70px;
}
.site-nav .navbar-toggler { min-width: 44px; min-height: 44px; }
.site-nav .nav-link { padding-block: 0.65rem; font-size: 0.9rem; }
.site-nav .nav-cta { border: 0; font-weight: 700; }
.site-nav .navbar-nav { gap: 0.25rem; }
.hero h1, h2 { word-break: keep-all; }
.hero .intro { font-size: 1rem; }
.strip { border-block: 1px solid var(--line); padding-block: 19px; font-size: 12px; letter-spacing: 1px; }
.section-head { margin-bottom: clamp(22px, 4vw, 34px); }
.section-head p { margin-bottom: 0; }
.service p, .work p, .process p, .contact p { font-size: 0.9rem; }
.contact {
  margin-block: clamp(42px, 7vw, 70px) 40px;
  padding: clamp(22px, 5vw, 50px);
  background: var(--ink);
  color: var(--bg);
}
.contact h2 { font-size: clamp(26px, 3.4vw, 35px); }
.site-footer {
    padding-block: 24px 30px;
    border-top: 1px solid var(--line);
    background-color: #eaf1f5;
    color: var(--muted);
    font-size: 0.8125rem;
}
.business-info { margin: 0 0 12px; line-height: 1.8; word-break: keep-all; }
.site-footer a { text-decoration: underline; }
.site-footer .privacy-link { font-weight: 700; color: var(--ink); }
.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ink);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #116b5f;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #116b5f;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 44px;
  padding-inline: 1rem;
}
.contact .btn-brand {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: #bde4da;
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: #dcf3ed;
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: #dcf3ed;
}
.visual .floating { gap: 8px; flex-wrap: wrap; }
.floating .status { color: #116b5f; }

.eta { margin-top: 10px; font-size: 13px; word-break: keep-all; }
.eta span { color: var(--muted); margin-right: 6px; }
.services-note { margin: 28px 0 0; font-size: 13px; color: var(--muted); word-break: keep-all; }

.faq-list { max-width: none; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding-block: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
  word-break: keep-all;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  font: 400 22px/1 monospace;
  color: var(--muted);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.faq-item p { margin: 0 0 18px; max-width: 640px; font-size: 0.9rem; color: var(--muted); word-break: keep-all; }

.inquiry { display: grid; gap: 14px; margin-block: 18px 16px; }
.inquiry label { display: block; margin-bottom: 4px; font-size: 13px; color: #bde4da; }
.inquiry .form-control,
.inquiry .form-select {
  min-height: 44px;
  background-color: var(--bg);
  border-color: #bde4da;
  color: var(--ink);
  font-size: 15px;
}
.inquiry .form-control:focus,
.inquiry .form-select:focus {
  border-color: #bde4da;
  box-shadow: 0 0 0 0.25rem rgba(189, 228, 218, 0.45);
}
.inquiry textarea.form-control { min-height: 110px; }
.contact .inquiry-note { margin: 0; font-size: 13px; color: #bde4da; }
.contact .mail-link { text-decoration: underline; }
.contact .inquiry-privacy { margin-top: -6px; color: #bcc9bf; word-break: keep-all; }
.contact .inquiry-privacy a { color: #bde4da; text-decoration: underline; }

/* 개인정보처리방침 페이지 (privacy.html) */
.policy { max-width: 760px; padding-block: clamp(36px, 6vw, 64px); }
.policy h1 { font-size: clamp(26px, 4vw, 34px); letter-spacing: -0.02em; margin: 12px 0 8px; }
.policy .policy-lead { color: var(--muted); font-size: 0.95rem; word-break: keep-all; }
.policy section { padding: 28px 0; }
.policy section:last-of-type { border-bottom: 0; }
.policy h2 { font-size: 1.15rem; letter-spacing: -0.01em; margin: 0 0 12px; }
.policy p, .policy li { font-size: 0.95rem; word-break: keep-all; }
.policy ul { padding-left: 1.2rem; margin-bottom: 0; }
.policy li + li { margin-top: 6px; }
.policy .table { font-size: 0.9rem; margin-bottom: 0; word-break: keep-all; }
.policy .table th { color: var(--muted); font-weight: 700; }
.policy .table th[scope="row"] { white-space: nowrap; }
.policy .table-responsive { overflow-x: auto; }
.policy a { text-decoration: underline; }
.policy .back-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

@media (min-width: 768px) {
  .site-nav .navbar-nav { gap: 1.15rem; }
}
@keyframes enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: enter 420ms ease-out both; }
  .hero-visual { animation: enter 480ms ease-out 80ms both; }
  .section-head.is-entering { animation: enter 360ms ease-out both; }
  .btn-brand span { transition: transform 160ms ease-out; }
  .btn-brand:is(:hover, :focus-visible) span { transform: translateX(3px); }
  .btn-brand[type="submit"]:is(:hover, :focus-visible) span { transform: translate(2px, -2px); }
  .hero-copy:focus-within { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.visual.is-rolling .square {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--rolling-size);
  box-shadow: inset 0 0 0 1px #ffffff29;
}

.visual.is-rolling .square svg {
  width: 54%;
  height: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .motion-toggle:not([hidden]) {
    display: grid;
    flex: 0 0 44px;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg);
    color: var(--ink);
    font: 600 13px/1 Arial, sans-serif;
  }

  .motion-toggle[aria-pressed="false"] .motion-play,
  .motion-toggle[aria-pressed="true"] .motion-pause { display: none; }
}