/* Pantrip homepage — mirrors the App Store set: cream / charcoal panels, orange dot accents, real app captures. */
:root{
  color-scheme:light dark;
  --cream:#F8F2E6;--sand:#EFE6D5;--card:#ECE3D1;--ink:#2B2C30;--muted:#66615A;--line:#2B2C301F;--dot:#2B2C3024;
  --night:#2D2E32;--night-ink:#F6EFE2;--night-muted:#BDB7AC;--night-line:#F6EFE226;
  --orange:#F0901F;--bezel:#1E1F22;
  --font:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.75,.2,1);--gutter:clamp(16px,4vw,40px);
}
@media(prefers-color-scheme:dark){:root{
  --cream:#2B2621;--sand:#24201C;--card:#3A332C;--ink:#F3ECDF;--muted:#BDB4A6;--line:#F3ECDF24;--dot:#F3ECDF1C;
  --night:#18191C;--night-line:#F6EFE21F;--bezel:#0E0E10;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,p,figure,ul{margin:0}ul{padding:0;list-style:none}
h1,h2,p,figcaption,summary{word-break:keep-all;overflow-wrap:break-word}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:6px}
.night :focus-visible{outline-color:var(--night-ink)}
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;top:-100px;left:16px;z-index:9;background:var(--ink);color:var(--cream);padding:12px 16px;border-radius:999px}
.skip:focus{top:12px}

/* Nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px}
.wordmark{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.02em;text-decoration:none}
.wordmark img{width:32px;height:32px;border-radius:22.5%;box-shadow:0 0 0 1px var(--line)}
.nav nav{display:flex;align-items:center;gap:clamp(12px,3vw,28px);font-size:15px;font-weight:600}
.nav-link{text-decoration:none;color:var(--muted);padding-block:8px}
.nav-link:hover{color:var(--ink)}
#language{border:1.5px solid var(--line);background:none;border-radius:999px;padding:7px 14px;font-weight:700;font-size:14px}
#language:hover{border-color:var(--ink)}

/* Panels */
.panel{padding-block:clamp(80px,11vw,148px)}
.cream{background:var(--cream);color:var(--ink)}
.sand{background:var(--sand);color:var(--ink)}
.night{background:var(--night);color:var(--night-ink);--muted:var(--night-muted);--line:var(--night-line)}
.panel-head{text-align:center;max-width:820px;margin:0 auto clamp(44px,6vw,72px)}
h2{font-size:clamp(36px,5.6vw,68px);line-height:1.12;letter-spacing:-.035em;font-weight:800;text-wrap:balance}

/* Buttons */
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;font-size:15px;font-weight:700;text-decoration:none;border:1.5px solid var(--ink);transition:transform .2s var(--ease),background-color .2s,color .2s}
.button:hover{transform:translateY(-2px)}
.primary{background:var(--ink);color:var(--cream)}
.secondary{background:transparent;color:var(--ink)}
.secondary:hover{background:var(--ink);color:var(--cream)}

/* Hero */
.hero{padding-block:clamp(24px,4vw,48px) clamp(64px,7vw,88px)}
.hero-layout{display:flex;flex-direction:column;align-items:center;gap:clamp(28px,4vw,44px)}
.hero-copy{text-align:center;max-width:1000px}
.brand-title{font-size:clamp(38px,6.5vw,76px);line-height:1.12;letter-spacing:-.045em;font-weight:850;text-wrap:balance}
.hero .actions{justify-content:center;margin-top:24px}
.demo-stage{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:22px;padding:28px clamp(16px,4vw,48px) 22px;border:1px solid var(--line);border-radius:36px;background:var(--sand);overflow:hidden}
.demo-stage:before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,var(--dot) 2.2px,transparent 2.7px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse,#000 10%,transparent 75%)}
.phone{position:relative;width:min(268px,100%);padding:8px;border-radius:38px;background:var(--bezel);
  box-shadow:0 1px 0 1px #ffffff14 inset,0 40px 80px -30px #2B2C3066,0 18px 36px -24px #2B2C3080}
.phone-screen{position:relative;aspect-ratio:720/1565;overflow:hidden;border-radius:30px;background:var(--bezel)}
.phone-screen img,.phone-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone-screen img{z-index:1}
.demo-controls{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;max-width:100%}
.demo-chapters{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.demo-chapters button{min-height:44px;padding:0 14px;border:1px solid transparent;border-radius:999px;background:transparent;font-size:13px;font-weight:700;color:var(--muted);transition:background-color .2s,color .2s}
.demo-chapters button:hover{color:var(--ink);background:var(--cream)}
.demo-chapters button[aria-pressed="true"]{background:var(--orange);color:#2B2C30}
.demo-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:50%;background:var(--cream)}
.demo-toggle svg{width:22px;height:22px;fill:currentColor}
.demo-toggle:disabled{opacity:.4;cursor:default}

/* Photo → cutout */
.cutout-flow{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:start;gap:clamp(16px,3vw,40px);max-width:1060px;margin-inline:auto}
.cutout-flow figure{display:flex;flex-direction:column;align-items:center}
.photo-before img{border-radius:24px;box-shadow:0 30px 60px -28px #000c}
.photo-after img{filter:drop-shadow(0 26px 30px #0008)}
.flow-arrow{width:48px;color:var(--orange);fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;align-self:center}

/* 3D shapes */
.shape-row{display:flex;justify-content:center;align-items:flex-end;gap:clamp(28px,7vw,96px)}
.shape-row li{position:relative;display:flex;justify-content:center}
.shape-row li:after{content:"";position:absolute;left:50%;bottom:-14px;width:110%;height:22px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,#2B2C3033,transparent);z-index:0}
.shape-row img{position:relative;z-index:1;height:clamp(150px,19vw,260px);width:auto;object-fit:contain;object-position:center bottom}

/* Kitchens */
.kitchen-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.kitchen-grid figure{background:var(--card);border-radius:24px;padding:8px 8px 0;height:100%}
.kitchen-grid img{width:100%;aspect-ratio:5/3;object-fit:cover;border-radius:17px}
.kitchen-grid figcaption{text-align:center;font-size:15px;font-weight:700;padding:13px 6px 15px;line-height:1.3}

/* Widgets */
.widgets{display:flex;flex-direction:column;align-items:center;gap:28px}
.widget-row{display:flex;justify-content:center;align-items:center;gap:clamp(20px,3.5vw,44px)}
.widget-row img{filter:drop-shadow(0 26px 34px #0009)}
.widget-medium{width:min(560px,100%)}
.widget-small{width:clamp(150px,19vw,262px)}

/* Closing */
.closing{text-align:center;padding-bottom:clamp(64px,8vw,104px)}
.closing-icon{width:96px;height:96px;margin:0 auto;border-radius:22.5%;box-shadow:0 0 0 1px var(--line),0 22px 44px -22px #2B2C3099}
.closing .actions{justify-content:center}
.legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;margin-top:36px;font-size:15px}
.legal-links a{padding-block:6px;text-underline-offset:4px;color:var(--muted)}
.legal-links a:hover{color:var(--ink)}

/* Image, demo and sign-in notes */
.disclosure{width:calc(100% - 2*var(--gutter));max-width:1120px;margin:0 auto;border-top:1px solid var(--line);padding-block:4px}
.disclosure:last-child{border-bottom:1px solid var(--line)}
.disclosure summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;font-size:13px;font-weight:700;padding-block:16px}
.disclosure summary::-webkit-details-marker{display:none}
.disclosure summary:after{content:"+" / "";font-size:22px;font-weight:500;line-height:1;color:var(--muted);transition:rotate .2s var(--ease)}
.disclosure[open] summary:after{rotate:45deg}
.disclosure p{max-width:760px;font-size:13px;line-height:1.75;color:var(--muted);padding-bottom:16px}
.disclosure a{text-underline-offset:3px}

/* Footer */
footer{padding-block:28px clamp(16px,3vw,32px);color:var(--muted);font-size:13px}
.footer-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.footer-row .wordmark{color:var(--ink);font-size:18px;margin-right:auto}
.operator{display:flex;flex-direction:column;gap:3px}
.footer-row a:not(.wordmark){text-underline-offset:3px}
.footer-mark{display:block;font-size:clamp(72px,18vw,240px);line-height:1.1;font-weight:900;letter-spacing:-.03em;text-align:center;margin-top:clamp(20px,3vw,40px);user-select:none}
.dot-text{color:var(--ink)}
@supports(background-clip:text) or (-webkit-background-clip:text){
  .dot-text{background-image:radial-gradient(circle,currentColor 38%,transparent 44%);background-size:clamp(5px,.95vw,11px) clamp(5px,.95vw,11px);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:.22}
}

/* Layout breakpoints */
@media(max-width:1040px){.kitchen-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){
  .cutout-flow{grid-template-columns:1fr;max-width:520px}
  .flow-arrow{rotate:90deg;margin:0 auto;width:40px}
  .widget-row{flex-direction:column}
}
@media(max-width:700px){.kitchen-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kitchen-grid figure{border-radius:20px;padding:6px 6px 0}.kitchen-grid img{border-radius:15px}.kitchen-grid figcaption{font-size:14px;padding:11px 4px 13px}}
@media(max-width:520px){
  .nav-link{display:none}
  .actions{flex-direction:column;align-items:stretch}
  .hero-copy{width:100%}
  .demo-stage{border-radius:24px;padding-top:20px;gap:18px}
  .demo-chapters button{padding-inline:11px;font-size:12px}
  .footer-row .wordmark,.operator{width:100%}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media(forced-colors:active){
  .dot-text{-webkit-text-fill-color:currentColor;background:none}
  .button,#language,.kitchen-grid figure,.phone,.demo-chapters button,.demo-toggle{border:1px solid CanvasText}
}
[hidden]{display:none!important}