:root{
  --ink:#1C1B18;
  --ink-2:#2E2C27;
  --paper:#FFFFFF;
  --stone:#F3F0E9;
  --stone-2:#E9E4D8;
  --accent:#5B5445;
  --accent-dark:#454031;
  --accent-light:#ECE7D8;
  --slate:#6B6759;
  --slate-2:#94907F;
  --line:#DED7C4;
  --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Pretendard', -apple-system, sans-serif;
  background:var(--stone);
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:800; letter-spacing:-0.02em; color:var(--ink);}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
img,svg{max-width:100%; display:block;}
ul{list-style:none;}
.wrap{max-width:1100px; margin:0 auto; padding:0 24px;}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px;}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(243,240,233,0.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px;}
.logo{display:flex; align-items:center; gap:9px; font-size:18px; font-weight:800; color:var(--ink);}
.logo-mark{
  width:36px; height:36px; border-radius:8px;
  background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; letter-spacing:-0.03em;
}
.nav-links{display:flex; gap:22px; font-size:14px; font-weight:600; color:var(--slate);}
.nav-links a:hover{color:var(--ink);}
.nav-cta{
  background:var(--ink); color:#fff; font-size:13.5px; font-weight:700;
  padding:12px 20px; border:none; border-radius:999px;
}
.nav-cta:hover{background:var(--accent-dark);}
.nav-right{display:flex; align-items:center; gap:12px;}
.burger{
  display:none; width:38px; height:38px; padding:0; border:none; background:transparent;
  flex-direction:column; align-items:center; justify-content:center; gap:5px; flex-shrink:0;
}
.burger span{display:block; width:22px; height:2px; border-radius:2px; background:var(--ink); transition:transform .2s ease, opacity .2s ease;}
.burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.active span:nth-child(2){opacity:0;}
.burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-nav{
  display:none; flex-direction:column; background:var(--paper);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.mobile-nav.open{display:flex;}
.mobile-nav a{padding:16px 24px; font-size:15px; font-weight:700; color:var(--ink); border-bottom:1px solid var(--line);}
.mobile-nav a:last-child{border-bottom:none;}

/* ---------- Mobile sticky CTA bar ---------- */
.mobile-cta-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--paper); border-top:1px solid var(--line);
  box-shadow:0 -6px 18px rgba(28,27,24,0.12);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
.mobile-cta-bar a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  height:48px; font-size:14.5px; font-weight:700; border:none; border-radius:10px;
}
.mobile-cta-call{background:var(--ink); color:#fff;}
.mobile-cta-kakao{background:#FEE500; color:#191919;}
.mobile-cta-apply{background:var(--accent); color:#fff;}

/* ---------- Breadcrumb ---------- */
.breadcrumb{max-width:1100px; margin:0 auto; padding:16px 24px; font-size:12.5px; color:var(--slate-2);}
.breadcrumb a{color:var(--slate-2);}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb .sep{margin:0 6px;}

/* ---------- Hero ---------- */
.hero{background:var(--ink); color:#fff; position:relative; overflow:hidden;}
.hero::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 700px 420px at 85% 0%, rgba(255,255,255,0.06), transparent 60%);
  pointer-events:none;
}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center; padding:80px 0; position:relative; z-index:1;}
.hero-eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:0.08em; color:#D9D4C4; text-transform:uppercase; margin-bottom:20px;}
.hero h1{font-size:38px; line-height:1.35; color:#fff; margin-bottom:18px;}
.hero h1 em{font-style:normal; color:var(--accent-light);}
.hero p{font-size:15.5px; color:#C7C3B4; max-width:480px; margin-bottom:30px;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap;}
.btn-primary{background:var(--accent-light); color:var(--ink); font-weight:700; font-size:14.5px; padding:16px 26px; border:none; border-radius:999px;}
.btn-primary:hover{background:#fff;}
.btn-ghost{background:transparent; color:#fff; font-weight:700; font-size:14.5px; padding:16px 24px; border:1.5px solid rgba(255,255,255,0.35); border-radius:999px;}
.btn-ghost:hover{border-color:#fff;}
.hero-photo{border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,0.14); background:#101010;}
.hero-photo img{width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- Section shared ---------- */
section{padding:76px 0;}
.section-head{max-width:640px; margin:0 auto 44px; text-align:center;}
.eyebrow-line{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--accent); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:14px;}
.section-head h2{font-size:30px; line-height:1.4;}
.section-head p{font-size:14.5px; color:var(--slate); margin-top:12px;}
.section-alt{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-dark{background:var(--ink); color:#fff;}
.section-dark h2, .section-dark h3{color:#fff;}
.section-dark .section-head p{color:#B9B4A3;}

/* ---------- Space grid (설치 공간) ---------- */
.space-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.space-card{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:22px 16px; text-align:center; font-weight:700; font-size:14.5px;}

/* ---------- Feature top grid (24시간/빅데이터/다국어/원격관리) ---------- */
.feat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.feat-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px 20px; text-align:center;}
.feat-icon{width:48px; height:48px; border-radius:50%; background:var(--accent-light); color:var(--accent-dark); display:flex; align-items:center; justify-content:center; font-size:20px; margin:0 auto 14px;}
.feat-card h3{font-size:15px; margin-bottom:8px;}
.feat-card p{font-size:12.5px; color:var(--slate); line-height:1.6;}

/* ---------- Point sections (POINT 01~04) ---------- */
.point-block{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:56px 0; border-bottom:1px solid var(--line);}
.point-block:last-child{border-bottom:none;}
.point-block.reverse{direction:rtl;}
.point-block.reverse > *{direction:ltr;}
.point-block.single{grid-template-columns:1fr; max-width:640px; margin:0 auto; text-align:center;}
.point-block.single .point-num{margin-left:auto; margin-right:auto;}
.point-num{
  width:38px; height:38px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; margin-bottom:18px;
}
.point-block h3{font-size:24px; margin-bottom:16px;}
.point-list{display:flex; flex-direction:column; gap:10px;}
.point-list li{display:flex; gap:10px; font-size:14.5px; color:var(--ink); align-items:flex-start;}
.point-list li .check{color:var(--accent); font-weight:800; flex-shrink:0;}
.point-visual{background:var(--stone-2); border-radius:var(--radius); min-height:220px; display:flex; align-items:center; justify-content:center; padding:24px; border:1px solid var(--line);}
.point-visual img{border-radius:8px; max-height:280px; width:auto;}

/* ---------- Discharge type cards ---------- */
.discharge-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.discharge-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px;}
.discharge-tag{display:inline-block; background:var(--accent); color:#fff; font-size:12.5px; font-weight:700; padding:6px 14px; border-radius:999px; margin-bottom:14px;}
.discharge-card p{font-size:13.5px; color:var(--slate); line-height:1.8;}

/* ---------- Spec table ---------- */
.spec-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:820px; margin:0 auto;}
.spec-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px 16px; text-align:center;}
.spec-card b{display:block; font-size:20px; color:var(--accent-dark); margin-bottom:6px;}
.spec-card span{font-size:12.5px; color:var(--slate);}

/* ---------- Regions ---------- */
.region-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:10px;}
.region-grid a{display:block; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:14px 10px; text-align:center; font-size:13.5px; font-weight:700;}
.region-grid a:hover{border-color:var(--accent); color:var(--accent-dark);}

/* ---------- Case photos ---------- */
.case-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.case-grid img{border-radius:10px; border:1px solid var(--line); aspect-ratio:3/4; object-fit:cover;}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{display:flex; justify-content:space-between; align-items:center; padding:20px 4px; cursor:pointer; font-size:15px; font-weight:700; color:var(--ink);}
.faq-q .plus{color:var(--accent); font-size:18px; transition:transform .2s ease;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-item.open .faq-a{max-height:320px;}
.faq-a p{padding:0 4px 20px; font-size:13.5px; color:var(--slate); max-width:640px;}

/* ---------- CTA / form ---------- */
.cta-section{background:var(--accent-light); text-align:center;}
.cta-section h2{font-size:28px; margin-bottom:10px;}
.cta-section p{font-size:14.5px; color:var(--slate); margin-bottom:26px;}
.form-card{
  background:var(--paper); padding:32px; border-radius:var(--radius); max-width:520px; margin:0 auto;
  border:1px solid var(--line);
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;}
.field{margin-bottom:12px; text-align:left;}
.field label{display:block; font-size:12.5px; color:var(--slate); margin-bottom:6px; font-weight:700;}
.field input, .field select{
  width:100%; padding:12px 14px; background:var(--stone); border:1.5px solid var(--line);
  color:var(--ink); font-size:16px; font-family:inherit; border-radius:10px;
}
.field input:focus, .field select:focus{border-color:var(--accent); outline:none;}
.form-submit{width:100%; padding:15px; background:var(--ink); color:#fff; border:none; border-radius:10px; font-weight:700; font-size:15px; margin-top:6px;}
.form-submit:hover{background:var(--accent-dark);}
.form-note{font-size:11.5px; color:var(--slate-2); margin-top:12px;}

/* ---------- Sub-page hero ---------- */
.subpage-hero{background:var(--ink); color:#fff; padding:52px 0;}
.subpage-hero h1{font-size:28px; margin-bottom:10px; color:#fff;}
.subpage-hero p{font-size:14px; color:#C7C3B4; max-width:560px;}

/* ---------- Footer ---------- */
footer{background:var(--ink); color:#B9B4A3; padding:48px 0 26px;}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:36px; margin-bottom:36px;}
.foot-logo{font-size:18px; font-weight:800; color:#fff; margin-bottom:12px;}
.foot-grid p{font-size:13px; line-height:1.8;}
.foot-col h4{font-size:13px; color:#fff; margin-bottom:14px; font-weight:700;}
.foot-col a{display:block; font-size:13px; margin-bottom:9px; color:#B9B4A3;}
.foot-col a:hover{color:#fff;}
.foot-bottom{border-top:1px solid rgba(255,255,255,0.14); padding-top:20px; font-size:12px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  body{padding-bottom:70px;}
  .nav-links{display:none;}
  .burger{display:flex;}
  .mobile-cta-bar{display:flex;}
  section{padding:52px 0;}
  .hero-grid{grid-template-columns:1fr; padding:48px 0;}
  .hero h1{font-size:29px;}
  .space-grid{grid-template-columns:repeat(2,1fr);}
  .feat-grid{grid-template-columns:1fr 1fr;}
  .point-block{grid-template-columns:1fr; gap:24px; padding:40px 0;}
  .point-block.reverse{direction:ltr;}
  .discharge-grid{grid-template-columns:1fr;}
  .spec-grid{grid-template-columns:1fr 1fr;}
  .region-grid{grid-template-columns:repeat(3,1fr);}
  .case-grid{grid-template-columns:1fr 1fr;}
  .form-row{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr; row-gap:24px;}
}
@media (max-width:640px){
  .wrap{padding:0 18px;}
  .nav{height:64px;}
  .hero h1{font-size:25px;}
  .section-head h2{font-size:23px;}
  .space-grid{grid-template-columns:repeat(2,1fr);}
  .feat-grid{grid-template-columns:1fr 1fr;}
  .region-grid{grid-template-columns:repeat(2,1fr);}
  .case-grid{grid-template-columns:1fr 1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .foot-bottom{flex-direction:column; align-items:flex-start;}
}