:root {
  --ink: #171923;
  --muted: #626573;
  --surface: #ffffff;
  --surface-soft: #f6f6f9;
  --line: rgba(23,25,35,.10);
  --brand: #675A94;
  --brand-deep: #42375f;
  --coral: #ff5d5f;
  --max: 1180px;
  --radius: 28px;
  --shadow: 0 24px 70px rgba(31,28,46,.12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Noto Sans", Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 999; background: #fff; padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow); }
.skip-link:focus { top: 16px; }
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,#675A94,#463d6e); font-size: 23px; box-shadow: 0 9px 24px rgba(103,90,148,.28); }
.nav-links { display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 700; }
.nav-links a:hover, .footer-links a:hover { color: var(--brand); }
.lang-link { border: 1px solid var(--line); padding: 8px 12px; border-radius: 999px; }
.menu-button { display:none; border:0; background:transparent; padding:8px; cursor:pointer; }
.hero { overflow: hidden; position: relative; }
.company-hero { padding: 92px 0 72px; background: linear-gradient(180deg,#fff 0,#f8f7fc 100%); }
.company-hero-grid { display:grid; grid-template-columns: 1.02fr .98fr; gap:72px; align-items:center; }
.eyebrow { color: var(--brand); font-weight: 800; font-size: 14px; letter-spacing:.08em; text-transform: uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size: clamp(42px,6vw,78px); line-height:1.03; letter-spacing:-.055em; margin-bottom:24px; }
h2 { font-size: clamp(30px,4vw,48px); line-height:1.15; letter-spacing:-.04em; }
h3 { font-size: 22px; letter-spacing:-.025em; }
.lead { font-size: clamp(18px,2vw,22px); color: var(--muted); max-width: 680px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:12px 20px; border-radius:15px; border:1px solid transparent; font-weight:800; transition: .2s ease; }
.button.primary { background:var(--ink); color:#fff; box-shadow: 0 14px 30px rgba(23,25,35,.18); }
.button.primary:hover { transform: translateY(-2px); }
.button.secondary { border-color:var(--line); background:#fff; }
.button.secondary:hover { border-color:rgba(103,90,148,.4); color:var(--brand); }
.company-visual { position:relative; min-height:490px; }
.orb { position:absolute; width:370px; height:370px; border-radius:50%; background: radial-gradient(circle at 30% 30%,#9e92c6,#675A94 62%,#443b68); right:30px; top:30px; filter: saturate(.95); }
.floating-card { position:absolute; background:#fff; border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow); padding:22px; display:flex; align-items:center; gap:16px; width:300px; }
.floating-card img { width:74px; height:74px; border-radius:20px; }
.floating-card strong { display:block; font-size:20px; }
.floating-card span { color:var(--muted); font-size:14px; }
.floating-card.one { left:5%; top:68px; transform:rotate(-5deg); }
.floating-card.two { right:1%; bottom:48px; transform:rotate(4deg); }
.trust-pill { position:absolute; left:24%; bottom:100px; padding:11px 16px; border-radius:999px; background:#171923; color:white; font-size:13px; font-weight:800; box-shadow:0 12px 28px rgba(0,0,0,.2); }
.section { padding: 92px 0; }
.section.soft { background:var(--surface-soft); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:36px; }
.section-heading p { color:var(--muted); max-width:550px; margin-bottom:7px; }
.app-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.app-card { border:1px solid var(--line); border-radius:34px; overflow:hidden; background:#fff; box-shadow:0 18px 50px rgba(25,25,35,.08); transition:.25s ease; }
.app-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.app-card-body { padding:30px; }
.app-card-top { display:flex; gap:18px; align-items:center; }
.app-card-icon { width:82px; height:82px; border-radius:22px; box-shadow:0 12px 26px rgba(0,0,0,.10); }
.app-card h3 { font-size:29px; margin:0 0 3px; }
.app-card p { color:var(--muted); }
.app-card-preview { height:330px; overflow:hidden; background:#f4f1fa; display:grid; place-items:center; }
.app-card-preview.goodiary { background:#fff7f5; }
.app-card-preview img { width:250px; transform:translateY(65px); filter:drop-shadow(0 18px 26px rgba(20,20,30,.18)); }
.values { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.value-card { border:1px solid var(--line); border-radius:24px; padding:26px; background:#fff; }
.value-icon { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:#f0edf8; color:var(--brand); font-size:22px; margin-bottom:18px; }
.value-card p { color:var(--muted); margin-bottom:0; }
.contact-panel { border-radius:34px; padding:48px; background:linear-gradient(135deg,#1c1d2a,#302a45); color:#fff; display:flex; justify-content:space-between; gap:34px; align-items:center; }
.contact-panel p { color:#d6d2e2; margin-bottom:0; }
/* App pages */
.app-page.shiftmate { --app:#675A94; --app-soft:#f3f0fa; --app-deep:#302743; }
.app-page.goodiary { --app:#ff5d5f; --app-soft:#fff3f1; --app-deep:#35282a; }
.app-hero { padding:72px 0 56px; background:linear-gradient(180deg,var(--app-soft),#fff 82%); }
.app-hero-grid { display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:68px; }
.app-ident { display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.app-ident img { width:70px; height:70px; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.10); }
.app-ident strong { display:block; font-size:22px; }
.app-ident span { color:var(--muted); font-size:14px; }
.app-hero h1 { font-size:clamp(42px,5.3vw,72px); }
.app-hero .lead { max-width:610px; }
.meta-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.meta-chip { border:1px solid color-mix(in srgb,var(--app) 28%,transparent); background:#fff; color:var(--app-deep); padding:7px 11px; border-radius:999px; font-size:13px; font-weight:750; }
.store-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.store-button { min-width:180px; padding:12px 18px; border-radius:14px; background:#121318; color:#fff; display:flex; align-items:center; gap:12px; transition:.2s ease; box-shadow:0 12px 26px rgba(0,0,0,.16); }
.store-button:hover { transform:translateY(-2px); }
.store-button .store-icon { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:#fff; color:#111; font-weight:900; }
.store-button small { display:block; opacity:.7; font-size:10px; line-height:1.15; }
.store-button strong { font-size:15px; }
.hero-device { position:relative; min-height:650px; display:grid; place-items:center; }
.hero-device::before { content:""; position:absolute; width:480px; height:480px; border-radius:50%; background:color-mix(in srgb,var(--app) 16%,white); filter:blur(.2px); }
.hero-device img { position:relative; width:min(410px,86%); max-height:640px; object-fit:contain; filter:drop-shadow(0 28px 40px rgba(24,22,31,.18)); }
.killer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.killer-card { border:1px solid var(--line); border-radius:25px; padding:27px; background:#fff; }
.killer-number { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:#fff; background:var(--app); font-weight:900; margin-bottom:18px; }
.killer-card p { color:var(--muted); margin-bottom:0; }
.gallery-shell { position:relative; }
.screenshot-rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,300px); gap:18px; overflow-x:auto; padding:10px 2px 30px; scroll-snap-type:x mandatory; scrollbar-width:thin; }
.screenshot-card { scroll-snap-align:start; border:1px solid var(--line); border-radius:27px; overflow:hidden; background:#fff; box-shadow:0 18px 40px rgba(20,20,30,.08); cursor:zoom-in; }
.screenshot-card img { width:100%; aspect-ratio:944/2048; object-fit:cover; }
.shiftmate.en-page .screenshot-card img { aspect-ratio:1152/2048; }
.gallery-buttons { display:flex; gap:8px; }
.icon-button { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:20px; }
.icon-button:hover { color:var(--app); border-color:color-mix(in srgb,var(--app) 40%,transparent); }
.trust-strip { display:grid; grid-template-columns:.8fr 1.2fr; gap:44px; align-items:center; border-radius:34px; background:var(--app-deep); color:#fff; padding:46px; }
.trust-strip .big-stat { font-size:clamp(46px,7vw,86px); font-weight:900; line-height:1; letter-spacing:-.06em; }
.trust-strip p { color:rgba(255,255,255,.74); margin-bottom:0; }
.support-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.support-card { border:1px solid var(--line); border-radius:26px; padding:28px; }
.support-card p { color:var(--muted); }
.link-list { display:flex; flex-wrap:wrap; gap:10px; }
.text-link { display:inline-flex; align-items:center; gap:6px; padding:9px 12px; border-radius:12px; background:var(--surface-soft); font-weight:750; font-size:14px; }
.text-link:hover { color:var(--app); }
.cta { text-align:center; border-radius:36px; padding:58px 28px; background:linear-gradient(135deg,var(--app-soft),#fff); border:1px solid color-mix(in srgb,var(--app) 16%,transparent); }
.cta h2 { margin-bottom:14px; }
.cta p { color:var(--muted); }
.site-footer { border-top:1px solid var(--line); padding:42px 0; background:#fff; }
.footer-grid { display:flex; justify-content:space-between; gap:30px; align-items:flex-start; }
.footer-note { color:var(--muted); font-size:14px; max-width:450px; }
.footer-links { display:flex; flex-wrap:wrap; gap:18px; font-size:14px; font-weight:700; }
.lightbox { position:fixed; inset:0; z-index:100; background:rgba(10,10,14,.88); display:none; place-items:center; padding:30px; }
.lightbox.open { display:grid; }
.lightbox img { max-width:min(620px,90vw); max-height:88vh; border-radius:22px; }
.lightbox-close { position:absolute; top:22px; right:24px; border:0; width:48px; height:48px; border-radius:50%; background:#fff; font-size:26px; cursor:pointer; }
@media (max-width: 900px) {
  .company-hero-grid,.app-hero-grid { grid-template-columns:1fr; gap:40px; }
  .company-visual { min-height:420px; }
  .app-grid,.support-grid { grid-template-columns:1fr; }
  .values,.killer-grid { grid-template-columns:1fr; }
  .hero-device { min-height:540px; }
  .trust-strip { grid-template-columns:1fr; }
  .section-heading { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 720px) {
  .container { width:min(calc(100% - 28px),var(--max)); }
  .nav-links { display:none; position:absolute; left:14px; right:14px; top:64px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px; box-shadow:var(--shadow); flex-direction:column; align-items:stretch; gap:8px; }
  .nav-links.open { display:flex; }
  .nav-links a { padding:10px; }
  .menu-button { display:block; }
  .company-hero { padding-top:64px; }
  .company-visual { min-height:360px; }
  .orb { width:280px; height:280px; right:5px; }
  .floating-card { width:240px; padding:15px; }
  .floating-card img { width:58px; height:58px; }
  .floating-card.one { left:0; top:52px; }
  .floating-card.two { right:0; bottom:18px; }
  .trust-pill { left:17%; bottom:78px; }
  .section { padding:68px 0; }
  .app-card-preview { height:290px; }
  .contact-panel { padding:34px 25px; flex-direction:column; align-items:flex-start; }
  .app-hero { padding-top:54px; }
  .hero-device { min-height:450px; }
  .hero-device::before { width:340px; height:340px; }
  .hero-device img { max-height:500px; }
  .screenshot-rail { grid-auto-columns:minmax(210px,78vw); }
  .trust-strip { padding:32px 25px; }
  .footer-grid { flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; animation:none !important; }
}