:root { --navy:#59616a; --paper:#fafbfc; --mist:#f3f5f7; --line:#e1e5e8; --muted:#7b838b; --coral:#9bcfcb; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; color:var(--navy); background:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; line-height:1.7; }
img { max-width:100%; }
a { color:inherit; }
.site-header { position:sticky; z-index:10; top:0; display:flex; align-items:center; justify-content:space-between; height:72px; padding:0 max(24px,calc((100vw - 1160px)/2)); border-bottom:1px solid rgba(225,229,232,.9); background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.brand { display:inline-flex; align-items:center; color:var(--navy); text-decoration:none; }
.brand-icon { display:block; width:154px; height:48px; object-fit:contain; object-position:left center; }
.nav { display:flex; align-items:center; gap:28px; }
.nav a { min-height:44px; display:inline-flex; align-items:center; color:#5f6c7e; font-size:12px; font-weight:750; letter-spacing:.1em; text-decoration:none; white-space:nowrap; }
.nav a:hover,.nav a[aria-current="page"] { color:#74aaa6; }
.hero { display:grid; min-height:500px; place-items:center; padding:80px 24px; text-align:center; background-image:linear-gradient(rgba(250,252,252,.48),rgba(239,245,245,.66)),url("image/hero-coast.png"); background-position:center 55%; background-size:cover; }
.hero-inner { max-width:700px; color:var(--navy); }
.eyebrow { margin:0 0 16px; color:#91bdbb; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
.hero h1 { margin-bottom:18px; font-size:clamp(42px,7vw,76px); letter-spacing:-.065em; line-height:1.06; }
.hero p:last-of-type { max-width:520px; margin:0 auto; color:var(--muted); font-size:17px; }
.button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; margin-top:32px; padding:11px 21px; color:#fff; background:#a2cfcd; font-size:12px; font-weight:800; letter-spacing:.1em; text-decoration:none; }
.button:hover { background:#88bbb8; }
.content { width:min(100% - 48px,1040px); margin:0 auto; padding:90px 0; }
.intro { display:grid; grid-template-columns:120px 1fr; gap:34px; padding:0 0 76px; }
.section-symbol { display:grid; width:74px; height:74px; place-items:center; color:#a2cfcd; border:1px solid #cfe5e4; border-radius:50%; font-size:30px; }
.intro h2 { margin-bottom:10px; font-size:clamp(27px,4vw,40px); letter-spacing:-.055em; line-height:1.23; }
.intro p { max-width:640px; margin:0; color:var(--muted); }
.page-title { padding:88px 24px 58px; text-align:center; background:var(--mist); }
.page-title .section-symbol { margin:0 auto 17px; }
.page-title h1 { margin:0; font-size:clamp(32px,5vw,48px); letter-spacing:-.05em; }
.page-title p { margin:10px 0 0; color:var(--muted); }
.portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.app-card { min-height:380px; padding:32px; border:1px solid var(--line); background:#fff; transition:transform .18s,box-shadow .18s; }
.app-card:hover { transform:translateY(-5px); box-shadow:0 15px 35px rgba(23,35,59,.1); }
.app-card-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:42px; }
.app-icon { position:relative; display:grid; width:76px; height:76px; place-items:center; overflow:hidden; color:#fff; background:linear-gradient(145deg,#b9dedc,#94c6c3); border-radius:21px; box-shadow:0 10px 20px rgba(124,169,166,.18); font-size:25px; font-weight:800; letter-spacing:-.09em; }
.app-icon img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.app-icon-fallback { position:relative; z-index:0; }
.app-card h2 { margin-bottom:12px; font-size:23px; letter-spacing:-.04em; }
.app-card p { color:var(--muted); font-size:15px; }
.platforms { display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }
.app-card-head .platforms { margin-top:0; }
.platform { padding:4px 9px; color:#719c9a; background:#eef8f7; border:1px solid #d7eeec; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.06em; }
.service-links { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:24px; }
.service-link { display:inline-flex; min-height:44px; align-items:center; gap:9px; padding:10px 14px; color:#667d7d; border:1px solid #cfe5e4; background:#f6fbfb; font-size:13px; font-weight:750; text-decoration:none; }
.service-link:hover { color:#4e8b88; border-color:#a2cfcd; background:#eef8f7; }
.service-link span { color:#9bcfcb; font-size:16px; line-height:1; }
.app-store-link { min-width:220px; justify-content:center; }
.future-card { display:grid; min-height:380px; place-items:center; padding:32px; color:var(--muted); border:1px dashed #bdc9d5; background:transparent; text-align:center; }
.future-card span { display:grid; width:52px; height:52px; place-items:center; margin:auto; color:#9bcfcb; border:1px solid #cfe5e4; border-radius:50%; font-size:24px; }
.future-card h2 { margin:18px 0 5px; color:var(--navy); font-size:19px; }
.future-card p { margin:0; font-size:14px; }
.policy { width:min(100% - 48px,790px); margin:70px auto 90px; padding:0 52px; }
.policy-note { margin:0 -52px 34px; padding:23px 52px; color:#657d7d; background:#f0f8f8; border-left:4px solid #a2cfcd; }
.policy-note strong { display:block; margin-bottom:3px; }
.policy section { padding:25px 0; border-bottom:1px solid var(--line); }
.policy h2 { margin-bottom:8px; font-size:17px; letter-spacing:-.025em; }
.policy p { margin-bottom:0; color:var(--muted); font-size:15px; }
.service-list { margin:14px 0 0; padding:0; color:var(--muted); list-style:none; font-size:15px; }
.service-list li { position:relative; padding-left:17px; }
.service-list li::before { position:absolute; top:.82em; left:0; width:5px; height:5px; background:#a2cfcd; border-radius:50%; content:""; }
.effective { padding:22px 0; color:var(--muted); font-size:13px; }
footer { padding:30px 24px; color:#8893a1; border-top:1px solid var(--line); background:#fff; font-size:12px; text-align:center; }
@media (max-width:900px) { .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } }
@media (max-width:700px) {
  .site-header { height:auto; min-height:98px; flex-direction:column; justify-content:center; padding:calc(8px + env(safe-area-inset-top)) 16px 0; }
  .brand-icon { width:142px; height:42px; object-position:center; }
  .nav { width:calc(100% + 32px); justify-content:center; gap:0; border-top:1px solid rgba(225,229,232,.75); }
  .nav a { flex:1; justify-content:center; min-height:42px; padding:0 4px; font-size:10px; letter-spacing:.045em; }
  .hero { min-height:min(620px,calc(100svh - 98px)); padding:64px 20px; background-position:58% center; }
  .hero h1 { margin-bottom:16px; font-size:clamp(40px,14vw,58px); }
  .hero p:last-of-type { font-size:16px; line-height:1.75; }
  .content { width:min(100% - 32px,1040px); padding:58px 0; }
  .intro { grid-template-columns:1fr; gap:20px; padding-bottom:44px; }
  .intro h2 { font-size:clamp(28px,9vw,36px); }
  .section-symbol { width:62px; height:62px; font-size:25px; }
  .portfolio-grid { grid-template-columns:1fr; gap:18px; }
  .app-card,.future-card { min-height:0; padding:25px; }
  .app-card-head { margin-bottom:28px; }
  .app-icon { width:70px; height:70px; border-radius:19px; }
  .future-card { min-height:260px; }
  .page-title { padding:52px 18px 38px; }
  .page-title h1 { font-size:clamp(30px,10vw,40px); }
  .page-title p { font-size:15px; }
  .policy { width:min(100% - 32px,790px); margin:38px auto 56px; padding:0; }
  .policy-note { margin:0 0 22px; padding:20px; border-left-width:3px; }
  .policy section { padding:22px 0; }
  .policy h2 { font-size:16px; line-height:1.55; }
  .policy p,.service-list { font-size:15px; }
  footer { padding:26px 18px; }
}
@media (max-width:380px) {
  .site-header { padding-right:12px; padding-left:12px; }
  .nav { width:calc(100% + 24px); }
  .nav a { font-size:9px; letter-spacing:.02em; }
  .hero { padding-right:16px; padding-left:16px; }
  .content,.policy { width:calc(100% - 28px); }
  .app-card,.future-card { padding:22px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .app-card { transition:none; } }