/* Design D for every site page (owner 2026-10-26): the front door's look on the pages behind its menu.
   Loaded after site.css (and before each page's own <style>), so it works through the shared variables and, where a page
   sets its own, with selectors one step more specific. White paper, near-black ink, coral only for actions, violet for
   data and selection, Inter for words, pill buttons, rounded cards with one hairline. */
html:root{--ink:#0B0B0F;--ink2:#45454F;--ink3:#6E6E7A;--ink4:#8A8A96;--line:#C9C9D1;--line2:#E2E2E8;--line3:#EFEFF3;--paper:#F7F4FB;
  --coral:#FF4F47;--red:#E8413A;--maroon:#A8322C;--violet:#5B3DF5;--cta:#FF4F47;--lav:#F7F4FB;--dark:#0B0B0F;
  --shadow:0 1px 0 rgba(11,11,15,.03),0 14px 32px -20px rgba(91,61,245,.28);
  --cx-ink:#0B0B0F;--cx-ink2:#45454F;--cx-ink3:#6E6E7A;--cx-line:#E2E2E8;--cx-soft:#F7F4FB;--cx-vio:#5B3DF5;--cx-pink:#FF4F47;--cx-grad:linear-gradient(90deg,#FF4F47,#FF4F47);--cx-r:20px;
  --yc-ink:#0B0B0F;--yc-ink2:#45454F;--yc-mute:#8A8A96;--yc-line:#E2E2E8;--yc-ground:#FFFFFF;--yc-stage:#0B0B0F;--yc-coral:#FF4F47;--yc-vio:#5B3DF5;--yc-yel:#FFE45C;--yc-tag:#F4F2FA;
  --bc-ground:#FFFFFF;--bc-line:#E2E2E8;--bc-ink:#0B0B0F;--bc-muted:#45454F;--bc-heading:#0B0B0F;--bc-link:#5B3DF5}
html body{font-family:Inter,'Noto Sans KR','Noto Sans',sans-serif;color:var(--ink);background:#fff}
html[lang=ja] body{font-family:Inter,'Noto Sans JP','Noto Sans',sans-serif}
html[lang=en] body{font-family:Inter,'Noto Sans',sans-serif}
h1,h2,h3,.h2{letter-spacing:-.025em}
.eyebrow,.hero .kicker{color:var(--violet)}
.tlink{color:var(--violet)}.tlink:hover{color:#4A2FE0}
a.chip:hover,.tchips a:hover{color:var(--violet)}

/* header: logo, four items (apps, pricing, developers, more), language menu, sign in, start free */
.gnb{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line2)}
.gnb .wrap{max-width:1200px}
.gnb nav{font-size:14.5px;gap:4px 26px;align-items:center}
.gnb nav>a,.gnb nav .dd>summary{color:var(--ink2)}.gnb nav>a:hover,.gnb nav .dd>summary:hover{color:var(--ink)}
.gnb nav a[aria-current],.gnb nav .dd.on>summary{color:var(--ink);font-weight:600}
.gnb .btn-cta,html body .gnb .btn-cta{background:var(--ink)!important;background-image:none!important;color:#fff!important;border-radius:999px}
.gnb .si{font-size:14.5px;color:var(--ink2);white-space:nowrap}.gnb .si:hover{color:var(--ink)}
.dd{position:relative}.dd>summary{list-style:none;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.dd>summary::-webkit-details-marker{display:none}
.dd>summary::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:4px}
.ddm{position:absolute;top:calc(100% + 12px);left:0;z-index:40;min-width:190px;background:#fff;border:1px solid var(--line2);border-radius:14px;box-shadow:0 18px 40px -18px rgba(11,11,15,.35);padding:8px;display:flex;flex-direction:column}
.ddm a{padding:9px 12px;border-radius:10px;font-size:14px;line-height:20px;color:var(--ink)!important;text-decoration:none;white-space:nowrap}.ddm a:hover,.ddm a[aria-current]{background:#F4F2FA}
.lsel .ddm{left:auto;right:0;min-width:150px}
.lsel>summary{font-size:13px;font-weight:600;padding:6px 10px;border-radius:999px;border:1px solid var(--line2);color:var(--ink)}
@media (max-width:1023px){.ddm{position:static;box-shadow:none;border:0;padding:4px 0 4px 12px;min-width:0}.lsel .ddm{position:absolute;right:0;left:auto;border:1px solid var(--line2);padding:8px}}

/* the app rail is for signed-in members; guests reach the apps from the menu and the footer */
.apprail[hidden]{display:none!important}
@media (min-width:900px){body.has-rail:not(:has(>.apprail:not([hidden]))){padding-left:0}}

/* buttons, cards, panels, tables: pills, 20px corners, one hairline */
.btn{border-radius:999px;font-weight:600}
.btn-cta{background:var(--coral)}.btn-cta:hover{background:var(--red);filter:none}
.btn-violet{border-radius:999px}
.btn-line{border-color:var(--line)}.btn-line:hover{border-color:var(--ink)}
.card,.sc-card,.panel{border-radius:20px;box-shadow:none;border:1px solid var(--line2)}
.card-h{border-radius:20px 20px 0 0}
.tbl-wrap{border-radius:16px;border-color:var(--line2)}
.tbl th{background:var(--paper);color:var(--ink3);font-weight:600}
.chip{border-radius:999px}
.sc-box,.est,.msg{border-radius:12px}
.seg{background:#F4F2FA}.seg button[aria-selected=true],.seg button[aria-checked=true],.seg input:checked+label{background:var(--ink)}
.field input[type=text],.field input[type=email],.field input[type=number],.field input[type=password],.field select,.field textarea{border-radius:12px}

/* the old dark hero becomes the front door's white hero with a highlighter on the key words */
.hero{background:#fff;color:var(--ink);border-bottom:1px solid var(--line2)}
.hero h1,.hero .h1{font-weight:800;letter-spacing:-.035em}
.hero h1 em,.hero .h1 em{color:inherit;background:linear-gradient(180deg,transparent 58%,#FFE45C 58%,#FFE45C 92%,transparent 92%)}
.hero p.sub{color:var(--ink2)}.hero .note{color:var(--ink3)}
.hero .btn-ghost{border:1px solid var(--line);color:var(--ink);background:#fff}.hero .btn-ghost:hover{color:var(--ink);border-color:var(--ink);background:#fff}

/* catalog: the dark stage becomes a light band; cards and tabs follow the front door */
body .cx-band{background:#fff;color:var(--ink);border-bottom:1px solid var(--line2)}
body .cx-band::after{display:none}
body .cx-band h1{color:var(--ink);font-weight:800}
body .cx-band .lead{color:var(--ink2)}
body .cx-band .crumb,body .cx-band .crumb a{color:var(--ink3)!important}body .cx-band .crumb a:hover{color:var(--ink)!important}
body .cx-search input{border:1.5px solid var(--line)!important;border-radius:999px;box-shadow:0 14px 32px -20px rgba(91,61,245,.35)!important;padding-left:52px}
body .cx-search input:focus{border-color:var(--ink)!important;box-shadow:0 0 0 4px #EEEBFF!important}
body .cx-cta{background:var(--ink)}
body .cx-tabs a.on::after,body .cx-tabs a[aria-current]::after{background:var(--ink)!important}
body .cx-card{border-radius:20px}

/* footer (same as the front door) */
.fd-foot{border-top:1px solid var(--line2);padding:44px 0 28px;background:#fff}
.fd-foot .w{max-width:1200px;margin:0 auto;padding:0 32px;display:block}
.fd-foot .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.fd-foot h2{font-size:13px;font-weight:700;margin:0 0 10px;color:var(--ink);letter-spacing:0}
.fd-foot .cols a{display:block;font-size:13.5px;line-height:1.5;color:var(--ink2);text-decoration:none;padding:3px 0}.fd-foot .cols a:hover{color:var(--ink)}
.fd-foot .bot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:32px;font-size:12.5px;color:var(--ink3)}
.fd-foot .bot a{color:var(--ink3)}
@media (max-width:599px){.fd-foot .cols{grid-template-columns:1fr 1fr}}
.gnb [data-lm-auth-top] .lma-in,.gnb [data-lm-auth-top] .lma-up{display:none!important}
@media (max-width:599px){.gnb .si{display:none}}

/* one grid with the front door (owner 2026-10-26): 1200px content, 32px side margins (16px on phones), logo at the same spot */
.wrap{max-width:1200px;padding-left:32px;padding-right:32px}
@media (max-width:640px){.wrap,.fd-foot .w{padding-left:16px;padding-right:16px}}
@media (min-width:900px){body.has-rail .gnb{margin-left:0}body.has-rail .gnb>.wrap{max-width:1200px;padding-left:32px;padding-right:32px}body.has-rail .apprail{top:0}}
.gnb .wrap{min-height:64px;gap:12px 26px}.gnb .logo img{height:24px;width:auto}
html body .cx-band h1{font-weight:800!important}

/* ---- 2026-10-26 alignment: every page uses the front door's frame, 1200px wide with 32px sides (content 1136px) ---- */
.wrap,.gnb .wrap,.gnb>.wrap,.fd-foot .w{max-width:1200px;padding-left:32px;padding-right:32px}
.sec{padding-left:32px;padding-right:32px}.sec>.in{max-width:1136px}
@media (min-width:900px){body.has-rail .gnb{margin-left:0}body.has-rail .gnb>.wrap{max-width:1200px;padding-left:32px;padding-right:32px}body.has-rail .apprail{top:0}}
@media (max-width:640px){.wrap,.gnb .wrap,.gnb>.wrap,.fd-foot .w{padding-left:16px;padding-right:16px}.sec{padding-left:16px;padding-right:16px}}
.gnb .wrap{min-height:64px}
.gnb .logo img{height:24px}

/* ---- catalog in the front door's language: hairline cards, 20px corners, no heavy outlines or offset shadows ---- */
body .cx-kinds{gap:14px}
body .cx-kind{border:1px solid var(--line2)!important;border-radius:20px!important;box-shadow:none!important;transform:none!important;padding:22px 20px!important}
body .cx-kind:hover{border-color:var(--ink)!important}
body .cx-off,body .cx-offbox{border:0!important;box-shadow:none!important;background:#F7F4FB!important;border-radius:24px!important;padding:28px!important}
body .cx-off-idx h3{font-size:13px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink3)!important}
body .cx-grid,body .cx-off .cx-grid,body .cx-off-idx .cx-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;border-top:0!important;column-gap:14px!important}
@media (max-width:900px){body .cx-grid,body .cx-off .cx-grid,body .cx-off-idx .cx-grid{grid-template-columns:minmax(0,1fr)!important}}
body .cx-card{display:flex!important;flex-direction:column!important;gap:10px!important;padding:20px 22px!important;margin:0!important;border:1px solid var(--line2)!important;border-radius:20px!important;background:#fff!important;box-shadow:none!important;transform:none!important}
body .cx-card:hover{border-color:var(--ink)!important;box-shadow:none!important}
body .cx-card:last-child{border-bottom:1px solid var(--line2)!important}
body .cx-card .cx-top{display:flex!important;align-items:center;gap:12px}
body .cx-card .cx-ic{width:40px!important;height:40px!important;border-radius:12px!important;border:1px solid var(--line2)!important;background:#fff!important;flex:none}
body .cx-card .cx-tt{display:block!important}
body .cx-card .cx-tt h3,body .cx-off-idx .cx-card h3{margin:0!important;font-size:16px!important;line-height:22px!important;font-weight:700!important;letter-spacing:-.01em!important;text-transform:none!important;color:var(--ink)!important;font-family:inherit!important}
body .cx-card .cx-by{margin:2px 0 0!important;font-size:12.5px!important;color:var(--ink3)!important}
body .cx-card .cx-desc{margin:0!important;font-size:14px!important;line-height:1.55!important;color:var(--ink2)!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:0!important}
body .cx-card .cx-ds{display:flex;flex-wrap:wrap;gap:6px}
body .cx-card .cx-ds span{font-size:12px!important;line-height:18px;padding:2px 9px!important;border-radius:999px!important;background:#F4F2FA!important;color:var(--ink2)!important;border:0!important}
body .cx-card .cx-sf,body .cx-card .cx-basis{display:none!important}
body .cx-card .cx-foot{display:flex!important;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 10px;margin-top:auto!important;padding-top:10px!important;border-top:1px solid var(--line3)!important;grid-column:auto!important;max-width:none!important;text-align:left!important}
body .cx-card .cx-pr{font-size:13px!important;line-height:19px!important;font-weight:600!important;color:var(--ink)!important;white-space:normal!important;text-align:left!important}
body .cx-card .cx-mt{font-size:12px;color:var(--ink3)}
body .cx-card .cx-meta3{margin:0!important;font-size:12px!important;color:var(--ink3)!important}body .cx-card .cx-acc{font-weight:500!important;color:var(--ink3)!important}
body .cx-card .cx-rk,body .cx-card .cx-pill{box-shadow:none!important;border-radius:999px!important;font-size:11.5px!important}
body .cx-gh h2,body .cx-g>h2{font-size:22px;letter-spacing:-.02em}
/* the rail editor box is for members; a guest only saw a lone sign-in button there */
.lma-railedit:has(a[href*="login"]),.lma-railedit:has(.lma-in){display:none!important}

/* ---- /apps: the same cards, shorter text, small chips ---- */
body .ap-card{border:1px solid var(--line2)!important;border-radius:20px!important;box-shadow:none!important;padding:22px!important;background:#fff}
body .ap-card:hover{border-color:var(--ink)!important}
body .ap-card h3{font-size:17px;letter-spacing:-.01em}
body .ap-card .ap-q{font-size:13.5px;color:var(--ink3)}
body .ap-card .ap-sum{font-size:14px;line-height:1.55;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
body .ap-card .gl-uses{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px}
body .ap-card .gl-uses .gl-k{font-size:12px;font-weight:600;color:var(--ink3);margin-right:2px}
body .ap-card .gl-uses a{font-size:12px;line-height:18px;padding:2px 9px;border-radius:999px;background:#F4F2FA;color:var(--ink2)!important;border:0}

/* ---- docs pages keep their own sections inside the D frame ---- */
.v2doc .wrap{max-width:1200px;padding-left:32px;padding-right:32px}
/* guests: the hub account box holds only hidden buttons; take it out of the header so the right edge lines up with the front door */
.gnb .lma-top:not(:has(.lma-me)){display:none!important}
.cx-myrail:has(a[href*="login"]),.cx-myrail:has(button[data-login]){display:none!important}
/* same spacing as the front door header: 14px menu, 26px between the right-hand items */
.gnb nav{font-size:14px}.gnb nav>a,.gnb nav .dd>summary{font-size:14px}.gnb .si{font-size:14px}.gnb .right{gap:26px}