/* Atorni 새 홈 표면 1/2 — **원본 CSS 기계 변환본**.
 * 정본 = _design/outbox/20260802_new_site_migration/site/index.html <style>
 * 변환 규칙: `:root`·`body` → `.site`, 나머지 선택자 앞에 `.site ` 부착. 값은 손대지 않았다.
 * ⚠️ 손으로 고치지 말 것 — 디자인을 바꾸려면 원본 파일을 고치고 다시 변환한다.
 */
.site { --ink:#12161A; --ink-70:#4A535C; --ink-45:#7C868F; --forest:#0E4A38; --forest-dark:#0A3729; --amber:#F2B237; --shell:#FAF9F6; --mist:#FAF9F6; --sage:#E9F0EA; --sage-line:#D3E0D6; --line:#E6E4DE; --paper:#FFFFFF; --serif:'Instrument Serif',Georgia,serif; --sans:'Instrument Sans',system-ui,sans-serif; --wrap:1140px; }
.site * { box-sizing:border-box;margin:0;padding:0 }
.site { scroll-behavior:smooth }
.site { font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased }
.site img { max-width:100%;display:block }
.site .wrap { max-width:var(--wrap);margin:0 auto;padding:0 20px }
.site a { color:inherit }
.site .wordmark { font-family:var(--sans);font-weight:600;letter-spacing:.19em;text-transform:uppercase;font-size:16px;text-decoration:none }
.site h1, .site h2, .site h3.serif { font-family:var(--serif);font-weight:400;letter-spacing:-.012em;line-height:1.04 }
.site h1 { font-size:clamp(42px,10.5vw,78px) }
.site h2 { font-size:clamp(32px,5.6vw,50px) }
.site h3 { font-family:var(--sans);font-size:19px;font-weight:600;letter-spacing:-.012em;line-height:1.3 }
.site .eyebrow { font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-45) }
.site header { position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line) }
.site .nav { display:flex;align-items:center;justify-content:space-between;height:62px }
.site .nav-links { display:none;gap:2px;font-size:15px;font-weight:500;align-items:center }
.site .nav-links a { text-decoration:none;color:var(--ink-70) }
.site .nav-links a:hover { color:var(--ink) }
.site .nav-right { display:flex;align-items:center;gap:12px }
.site .lang { display:none;text-decoration:none;font-size:13px;font-weight:600;color:var(--ink-70);border:1px solid var(--line);border-radius:100px;padding:5px 12px;background:none;font-family:var(--sans);cursor:pointer }
@media(min-width:1060px) {
  .site .nav-links { display:flex }
  .site .lang { display:inline-block }
}
.site .navitem { position:static }
.site .navlink { display:flex;align-items:center;justify-content:center;gap:6px;min-width:112px;font-family:var(--sans);font-size:15px;font-weight:500;color:var(--ink-70);background:none;border:none;cursor:pointer;padding:20px 8px;line-height:1 }
.site .navlink svg { transition:transform .18s }
.site .navitem:hover .navlink, .site .navitem:focus-within .navlink { color:var(--ink) }
.site .navitem:hover .navlink svg, .site .navitem:focus-within .navlink svg { transform:rotate(180deg) }
.site .mega { position:absolute;left:0;right:0;top:100%;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);opacity:0;visibility:hidden;transition:opacity .16s;z-index:70 }
.site .navitem:hover .mega, .site .navitem:focus-within .mega { opacity:1;visibility:visible }
.site .megagrid { display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch }
.site .megaleft { padding:44px 20px 52px }
.site .megatitle { font-family:var(--serif);font-weight:400;font-size:44px;letter-spacing:-.02em;line-height:1.05 }
.site .megalinks { list-style:none;margin-top:28px;border-left:1px solid var(--line);padding-left:20px;display:grid;gap:14px }
.site .megalinks a { text-decoration:none;color:var(--ink-70);font-size:16px }
.site .megalinks a:hover { color:var(--forest) }
.site .megalinks .off { color:#BFC5C0;font-size:16px;cursor:default }
.site .megalinks .off em { font-style:normal;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-left:8px;color:#CDD2CE }
.site .megaright { background:var(--mist);padding:44px 40px 52px;display:flex;align-items:center }
.site .feature { width:100%;max-width:430px }
.site .feature .fimg { aspect-ratio:16/10;border-radius:8px;overflow:hidden;position:relative }
.site .feature .ftag { position:absolute;top:14px;left:14px;z-index:2;background:rgba(18,22,26,.62);color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding:5px 9px;border-radius:3px }
.site .feature h4 { font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-.015em;line-height:1.16;margin-top:16px }
.site .feature p { font-size:14px;color:var(--ink-45);margin-top:8px }
.site .btn { display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--forest);color:#fff;font-family:var(--sans);font-weight:600;font-size:16px;padding:15px 26px;border-radius:6px;text-decoration:none;border:none;cursor:pointer;transition:background .15s }
.site .btn:hover { background:var(--forest-dark) }
.site .btn-sm { padding:9px 17px;font-size:14px }
.site .btn-amber { background:var(--amber);color:var(--ink) }
.site .btn-amber:hover { background:#E2A428 }
.site .btn-full { width:100% }
.site .btn-ghost { background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(6px) }
.site .btn-ghost:hover { background:rgba(255,255,255,.24) }
.site .btn-outline { background:none;color:var(--forest);border:1.5px solid var(--forest) }
.site .btn-outline:hover { background:var(--mist) }
.site .hero { position:relative;min-height:min(640px,86vh);display:flex;align-items:flex-end;background:#2A3138;overflow:hidden }
.site .hero-img { position:absolute;inset:0;background: linear-gradient(to right,rgba(12,16,20,.86) 0%,rgba(12,16,20,.62) 46%,rgba(12,16,20,.2) 100%), repeating-linear-gradient(135deg,#3A424A,#3A424A 14px,#333B42 14px,#333B42 28px) }
.site .hero-note { position:absolute;top:16px;left:16px;font-size:11px;letter-spacing:.09em;color:rgba(255,255,255,.42);text-transform:uppercase }
.site .hero-content { position:relative;z-index:2;padding:96px 0 54px;width:100% }
.site .hero h1 { color:#fff;max-width:14ch;text-wrap:balance }
.site .hero .lede { color:rgba(255,255,255,.85);font-size:18px;margin-top:20px;max-width:34ch }
.site .hero .cta-row { margin-top:30px;display:flex;flex-direction:column;gap:11px;max-width:340px }
.site .hero .trustline { margin-top:18px;font-size:13.5px;color:rgba(255,255,255,.68) }
@media(min-width:760px) {
  .site .hero .cta-row { flex-direction:row;max-width:none }
  .site .hero-content { padding:120px 0 70px }
}
.site .msgcard { display:none;position:absolute;right:34px;bottom:52px;z-index:3;background:rgba(255,255,255,.14);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.26);border-radius:12px;padding:15px 18px;max-width:404px;align-items:center;gap:14px }
.site .msgcard .av { width:46px;height:46px;border-radius:100px;flex-shrink:0;overflow:hidden;background:rgba(255,255,255,.2) }
.site .msgcard .av img { width:100%;height:100%;object-fit:cover }
.site .msgcard p { color:#fff;font-size:15px;line-height:1.4 }
.site .msgcard small { display:block;color:rgba(255,255,255,.6);font-size:12.5px;margin-top:4px }
@media(min-width:1040px) {
  .site .msgcard { display:flex }
}
.site .trust { border-bottom:1px solid var(--line);background:var(--mist) }
.site .trust-inner { display:grid;grid-template-columns:1fr }
.site .trust-cell { padding:22px 20px }
.site .trust-num { font-family:var(--serif);font-size:clamp(30px,3.4vw,38px);line-height:1;letter-spacing:-.02em;white-space:nowrap }
.site .trust-cell p { font-size:14.5px;color:var(--ink-70);margin-top:8px;max-width:34ch }
@media(min-width:760px) {
  .site .trust-inner { grid-template-columns:repeat(3,1fr) }
  .site .trust-cell+.trust-cell { border-left:1px solid var(--line) }
  .site .trust-cell { padding:30px }
}
.site section { padding:70px 0 }
.site .sec-head { max-width:52ch;margin-bottom:38px }
.site .sec-head p { color:var(--ink-70);margin-top:14px;font-size:17.5px }
.site .answer { background:var(--sage) }
.site .answer .wrapg { display:grid;gap:34px }
.site .answer h2 { color:var(--ink);max-width:15ch }
.site .answer .q { font-family:var(--sans);font-weight:600;font-size:16px;color:var(--ink);margin-bottom:10px;display:flex;gap:10px;line-height:1.35 }
.site .answer .q span { flex-shrink:0;font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.15;color:var(--forest) }
.site .answer .a { color:var(--ink-70);font-size:16.5px;max-width:54ch }
.site .tabs { display:flex;gap:8px;margin-top:26px;flex-wrap:wrap }
.site .tab { font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--ink-70);background:none;border:1px solid var(--sage-line);border-radius:100px;padding:9px 8px;min-width:96px;text-align:center;cursor:pointer;transition:.15s }
.site .tab:hover { border-color:var(--forest);color:var(--forest) }
.site .tab.is-on { background:var(--forest);border-color:var(--forest);color:#fff }
.site .panel { display:none }
.site .panel.is-on { display:block }
.site .qa+.qa { margin-top:26px;padding-top:26px;border-top:1px solid var(--sage-line) }

/* ── 언어 드롭다운 + 로그인 (대표님 2026-08-07) ───────────────────
   ⚠️ 여기 있는 이유: 홈은 site_chrome.css 를 안 부른다. 헤더 스타일은 이 파일이
   전 페이지 공용이라 여기 둔다(한 번 site_chrome.css 에 넣었다가 홈에서 날것으로 떴다).
   舊 「EN / TL」 한 덩이는 누르면 그냥 뒤집혔다 — 지금 무엇으로 보는지를 안 알려줬다. */
.site .langdd { display:none;position:relative }
.site .langdd .lang { display:inline-flex;align-items:center;gap:5px }
.site .langdd .lang svg { color:var(--ink-45);transition:transform .18s }
.site .langdd.open .lang svg { transform:rotate(180deg) }
.site .langmenu {
  display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:80;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:4px;min-width:136px;
  box-shadow:0 8px 24px rgba(18,22,26,.10)
}
.site .langdd.open .langmenu { display:block }
.site .langopt {
  display:block;width:100%;text-align:left;font-family:var(--sans);font-size:14px;
  color:var(--ink-70);background:none;border:none;border-radius:7px;
  padding:9px 12px;cursor:pointer;white-space:nowrap
}
.site .langopt:hover { background:var(--mist) }
.site .langopt.on { color:var(--forest);font-weight:600 }
/* 로그인 — 예약 오른쪽. 앰버는 예약 하나뿐이라 이건 조용한 글자 링크. */
.site .loginlink {
  display:none;text-decoration:none;font-size:15px;font-weight:500;
  color:var(--ink-70);white-space:nowrap;padding:8px 2px
}
.site .loginlink:hover { color:var(--forest) }
@media(min-width:1060px) {
  .site .langdd { display:inline-block }
  .site .loginlink { display:inline-block }
}