:root { --ink:#121212; --paper:#f4f3ef; --line:#d7d4cc; --red:#ea2027; --muted:#6c6a64; --max:1240px; --page-padding:28px; --screen-width:210px; }
@font-face { font-family:Pretendard; src:url("assets/fonts/Pretendard-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:Pretendard; src:url("assets/fonts/Pretendard-SemiBold.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:Pretendard; src:url("assets/fonts/Pretendard-Bold.ttf") format("truetype"); font-weight:800; font-style:normal; font-display:swap; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Pretendard, Arial, "Noto Sans KR", sans-serif; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.site-header { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:28px; max-width:var(--max); padding:0 var(--page-padding); margin:auto; }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:19px; font-weight:800; letter-spacing:-.06em; white-space:nowrap; }
.brand img { width:34px; height:34px; border-radius:9px; }
nav { display:flex; align-items:center; gap:22px; font-size:14px; font-weight:700; }
nav a:hover, .footer-links a:hover { color:var(--red); }
.header-install { padding:11px 15px; background:var(--ink); color:white; font-size:13px; font-weight:700; white-space:nowrap; }
.hero { position:relative; min-height:700px; display:grid; overflow:hidden; background:#060606; color:white; }
.hero-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.66; }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.93) 0%,rgba(0,0,0,.71) 42%,rgba(0,0,0,.04) 80%); }
.hero-copy { z-index:1; align-self:center; width:min(var(--max),100%); margin:auto; padding:100px var(--page-padding); }
.eyebrow { margin:0 0 15px; color:var(--red); font-size:12px; font-weight:800; letter-spacing:.16em; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { letter-spacing:-.075em; line-height:1.04; }
h1 { max-width:690px; margin-bottom:24px; font-size:clamp(50px,6vw,90px); }
h1 em,h2 em { color:var(--red); font-style:normal; }
.hero-copy > p:not(.eyebrow):not(.visitor-count) { max-width:490px; color:#e4e1dc; font-size:18px; }
.hero-actions { display:flex; align-items:center; gap:24px; margin-top:34px; }
.button { display:inline-flex; min-height:52px; align-items:center; justify-content:center; padding:0 24px; font-size:15px; font-weight:800; }
.button-primary { background:var(--red); color:white; box-shadow:7px 7px 0 rgba(234,32,39,.25); }
.button-primary:hover { background:#c9161c; }
.button-text { color:white; text-decoration:underline; text-underline-offset:5px; }
nav .visitor-count { display:flex; align-items:center; gap:9px; padding-left:18px; border-left:1px solid var(--line); color:var(--muted); font-size:11px; font-weight:600; letter-spacing:-.03em; white-space:nowrap; }
nav .visitor-count span + span { padding-left:9px; border-left:1px solid var(--line); }
nav .visitor-count strong { color:var(--ink); font-size:12px; font-weight:800; }
.statement,.features,.gallery,.cta { padding:120px max(var(--page-padding), calc((100vw - var(--max))/2)); }
.statement { background:#e8e5df; }
.statement-content { display:grid; grid-template-columns:minmax(0, 1fr) 270px; align-items:center; gap:80px; }
.statement-copy > p:first-child { color:var(--red); font-weight:800; }
.statement h2,.section-heading h2 { max-width:780px; margin-bottom:24px; font-size:clamp(42px,5vw,72px); }
.statement-copy > p:last-child { max-width:480px; color:var(--muted); font-size:17px; }
.statement-qr { display:grid; justify-items:center; gap:14px; padding:18px; border:1px solid var(--ink); background:white; font-size:15px; font-weight:800; }
.statement-qr img { width:100%; max-width:234px; aspect-ratio:1; background:white; }
.statement-qr span { color:var(--ink); }
.statement-qr:hover { border-color:var(--red); }
.statement-qr:hover span { color:var(--red); }
.features { background:white; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:32px; margin-bottom:52px; }
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ink); }
.feature-grid article { min-height:270px; padding:24px 24px 20px 0; border-right:1px solid var(--line); }
.feature-grid article + article { padding-left:24px; }
.feature-grid article:last-child { border-right:0; }
.feature-grid span { color:var(--red); font-size:13px; font-weight:800; }
.feature-grid h3 { margin:78px 0 10px; font-size:22px; letter-spacing:-.055em; }
.feature-grid p { max-width:190px; margin:0; color:var(--muted); font-size:14px; }
.gallery { overflow:hidden; background:var(--ink); color:white; }
.gallery .section-heading h2 { margin-bottom:0; }
.screen-gallery-grid { display:grid; grid-template-columns:repeat(4, var(--screen-width)); justify-content:center; gap:44px 18px; margin:0 auto; }
.screen-gallery-grid figure { width:var(--screen-width); margin:0; }
.screen-gallery-grid img { display:block; width:100%; aspect-ratio:941 / 1672; object-fit:cover; border:1px solid #414141; }
.screen-gallery-grid figcaption { padding:12px 2px 0; color:#c7c7c7; font-size:13px; }
.cta { text-align:center; background:var(--red); color:white; }
.cta .eyebrow { color:#fff; }
.cta h2 { margin:0 auto 38px; font-size:clamp(45px,6vw,80px); }
.cta h2 em { color:#160d0d; }
.cta .button-primary { background:#121212; box-shadow:none; }
.cta-install { display:flex; justify-content:center; align-items:center; gap:18px; text-align:left; }
.cta-install img { width:110px; height:110px; padding:7px; background:white; }
.cta-install p { margin:10px 0 0; color:#fff0f0; font-size:13px; }
.cta-install .support-message { margin-top:22px; color:white; font-size:15px; font-weight:700; line-height:1.7; }
.site-footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:22px; max-width:var(--max); min-height:130px; padding:24px 28px; margin:auto; font-size:13px; }
.footer-links { display:flex; gap:18px; font-weight:700; }
.footer-information { justify-self:end; color:var(--muted); font-size:12px; line-height:1.7; text-align:right; }
.footer-information p { margin:0; }
.footer-information a:hover { color:var(--red); }
.footer-business-details { grid-column:1 / -1; margin:0; padding-top:16px; border-top:1px solid var(--line); color:#8a8882; font-size:12px; font-style:normal; line-height:1.8; }
.footer-business-details p { margin:0; }
.footer-business-details a { text-decoration:underline; text-underline-offset:2px; }
.footer-business-details a:hover { color:var(--red); }
.operator-contact { margin:12px 0 28px; color:var(--muted); font-size:14px; }
.operator-contact a { color:var(--ink); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.legal-page { max-width:840px; padding:76px 28px 120px; margin:auto; }
.legal-page h1 { font-size:52px; }
.legal-page h2 { margin:50px 0 12px; font-size:25px; }
.legal-page p,.legal-page li { color:#42413e; }
.legal-page .updated { color:var(--muted); }
.guide-section { scroll-margin-top:24px; }
.guide-layout { display:grid; grid-template-columns:minmax(0, 1fr) 270px; align-items:start; gap:80px; }
.guide-instructions { max-width:720px; font-size:17px; line-height:1.85; }
.guide-instructions ol { margin:28px 0; padding-left:26px; border-top:1px solid var(--line); }
.guide-instructions li { padding:18px 0 18px 8px; border-bottom:1px solid var(--line); }
.guide-instructions li::marker { color:var(--red); font-weight:800; }
.guide-instructions p { color:var(--muted); }
.gallery .guide-instructions p { color:#c7c7c7; }
.gallery .guide-instructions ol,.gallery .guide-instructions li { border-color:#414141; }
.guide-screen { margin:0; width:100%; max-width:270px; }
.guide-screen img { display:block; width:100%; height:auto; border:1px solid var(--line); }
.guide-screen figcaption { padding-top:12px; font-size:14px; }
.guide-contents a:hover { color:var(--red); }
.guide-section .section-heading h2 { max-width:850px; }
@media (max-width:760px) {
  .guide-layout { grid-template-columns:1fr; gap:32px; }
  .guide-instructions { font-size:16px; }
  .guide-screen { justify-self:center; }
}
.contact-form { display:grid; gap:18px; max-width:620px; }
.contact-form label { display:grid; gap:8px; font-size:14px; font-weight:700; }
.contact-form input,.contact-form textarea { width:100%; border:1px solid var(--line); border-radius:0; padding:14px; background:white; color:var(--ink); font:inherit; }
.contact-form textarea { min-height:170px; resize:vertical; }
.form-note { color:var(--muted); font-size:13px; }
@media (max-width:760px) {
  :root { --page-padding:22px; }
  .site-header { min-height:62px; gap:12px; }
  .brand { gap:8px; font-size:17px; }
  .brand img { width:30px; height:30px; border-radius:8px; }
  nav { display:flex; margin-left:auto; }
  nav a { display:none; }
  nav .visitor-count { gap:6px; padding-left:0; border-left:0; font-size:10px; }
  nav .visitor-count span + span { padding-left:6px; }
  nav .visitor-count strong { font-size:11px; }
  .header-install { min-height:38px; display:inline-flex; align-items:center; padding:8px 11px; font-size:12px; }
  .hero { min-height:570px; }
  .hero-art { object-position:61% center; }
  .hero::after { background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.79) 70%,rgba(0,0,0,.18)); }
  .hero-copy { align-self:end; padding-top:54px; padding-bottom:54px; }
  h1 { margin-bottom:18px; font-size:clamp(44px,13vw,58px); }
  .hero-copy > p:not(.eyebrow):not(.visitor-count) { font-size:15px; }
  .hero-actions { flex-wrap:wrap; gap:12px 20px; margin-top:28px; }
  .button { min-height:48px; padding:0 16px; font-size:14px; }
  .statement,.features,.gallery,.cta { padding-top:72px; padding-bottom:72px; }
  .statement-content { grid-template-columns:1fr; gap:36px; }
  .statement-qr { width:min(100%, 270px); }
  .statement h2,.section-heading h2 { margin-bottom:18px; font-size:clamp(38px,11vw,50px); }
  .statement-copy > p:last-child { font-size:16px; }
  .section-heading { display:block; margin-bottom:34px; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .feature-grid article { min-height:205px; padding:18px 14px 18px 0; border-bottom:1px solid var(--line); }
  .feature-grid article:nth-child(even) { padding-left:14px; border-right:0; }
  .feature-grid h3 { margin-top:45px; font-size:19px; }
  .screen-gallery-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:30px 12px; }
  .screen-gallery-grid figure { width:auto; min-width:0; }
  .screen-gallery-grid figcaption { min-height:40px; padding-top:9px; font-size:12px; line-height:1.45; }
  .cta h2 { font-size:clamp(39px,11vw,52px); }
  .cta-install { flex-direction:column; align-items:center; text-align:center; }
  .cta-install img { width:86px; height:86px; }
  .cta-install .support-message { margin-top:18px; font-size:14px; }
  .site-footer { grid-template-columns:1fr; justify-items:start; padding:34px 22px; }
  .footer-information { justify-self:start; text-align:left; }
  .footer-business-details { font-size:11px; }
  .footer-links { flex-wrap:wrap; }
  .legal-page { padding:48px 22px 80px; }
  .legal-page h1 { font-size:42px; }
}

@media (max-width:360px) {
  .brand span { display:none; }
  .header-install { padding:8px 10px; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-grid article,
  .feature-grid article:nth-child(even) { min-height:0; padding:20px 0; border-right:0; }
  .feature-grid h3 { margin-top:28px; }
}