/* 안내 페이지 공통 (11/09): 404(public/404.html) · 버전 기록 비밀번호(middleware.js lockPage)가 같이 씀.
   토큰 · 글꼴은 app.css와 같은 값. 버튼은 랜딩 머리줄 "바로 시작하기"(스크롤 뒤 파란 버튼)와 같은 크기 */
@font-face{font-family:'Interop';font-weight:400;font-display:swap;src:url(https://cdn.jsdelivr.net/gh/jhaemin/Interop@1.8/web/fonts/Interop-Regular.woff2) format('woff2')}
@font-face{font-family:'Interop';font-weight:500;font-display:swap;src:url(https://cdn.jsdelivr.net/gh/jhaemin/Interop@1.8/web/fonts/Interop-Medium.woff2) format('woff2')}
@font-face{font-family:'Interop';font-weight:700;font-display:swap;src:url(https://cdn.jsdelivr.net/gh/jhaemin/Interop@1.8/web/fonts/Interop-Bold.woff2) format('woff2')}

:root{--bg:#FFFFFF;--blue:#0080FF;--red:#FF3700;--on-accent:#FFFFFF;--g01:#F7F8FA;--g02:#F0F1F2;--g03:#E3E5E8;--g04:#B4B7BA;--g07:#484A4D;--g05:#7A7D80;--g06:#6B6F72;--g08:#343639;--g09:#1B1D1F;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1B1D1F;--g01:#242729;--g02:#303236;--g03:#343639;--g04:#6B6F72;--g07:#C4C7CA;--g05:#919497;--g06:#B4B7BA;--g08:#D3D5D8;--g09:#E3E5E8}}
:root[data-theme="dark"]{--bg:#1B1D1F;--g01:#242729;--g02:#303236;--g03:#343639;--g04:#6B6F72;--g07:#C4C7CA;--g05:#919497;--g06:#B4B7BA;--g08:#D3D5D8;--g09:#E3E5E8}

*{box-sizing:border-box;margin:0;padding:0;letter-spacing:-0.03em} /* Interop 자간 -3% 고정 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:40px 22px;background:var(--bg);color:var(--g08);font-family:'Interop',system-ui,-apple-system,sans-serif;text-align:center;word-break:keep-all;-webkit-font-smoothing:antialiased}

/* 큰 숫자(404): 기능 페이지라 잘난고딕 없이 Interop Bold (11/09 잘난고딕을 잠깐 썼다가 되돌림) */
.code{font-size:48px;font-weight:700;line-height:1;color:var(--blue);margin-bottom:16px}
h1{font-size:20px;font-weight:700;line-height:1.4}
/* 제목과 설명 사이 5px (11/09 10 → 5: 한 덩어리로 읽히게) */
.desc{margin-top:5px;font-size:15px;line-height:1.5;color:var(--g06)}
.desc.err{color:var(--red)}

.row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 14px;border:0;border-radius:12px;font:500 14px/1 'Interop',system-ui,-apple-system,sans-serif;letter-spacing:-0.03em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:opacity .2s cubic-bezier(.2,.8,.2,1)}
.btn--blue{background:var(--blue);color:var(--on-accent)}
/* Tertiary(검정 weak) — 버튼 등급제(11/10): Primary · Secondary · Tertiary · Ghost. 예전 이름 .btn--ghost는 지난 버전 화면이 쓰고 있어 같은 모양으로 남겨 둠(Ghost 등급은 바탕 없는 글자 버튼) */
.btn--tertiary,.btn--ghost{background:var(--g02);color:var(--g08)}
@media (hover:hover){:where(html:not([data-input="touch"])) .btn:hover{opacity:.75}}

/* 입력칸: 버튼과 같은 높이 · 모서리. 글자는 16px(작으면 iOS가 확대) */
.field{width:120px;height:38px;padding:0 12px;border:0;border-radius:12px;background:var(--g02);color:var(--g09);font:500 16px/1 'Interop',system-ui,-apple-system,sans-serif;letter-spacing:.4em;text-indent:.4em;text-align:center;outline:none;caret-color:var(--blue)}
.field::placeholder{color:var(--g05);font-weight:400}
.field:focus{box-shadow:inset 0 0 0 1.5px var(--blue)}

.foot{margin-top:40px;font-size:12px;color:var(--g06)}
.foot a{color:inherit;text-decoration:none}

/* 서브페이지 탑바 (11/09): 앱이 아닌 안내 · 기록 페이지(버전 기록 등)용.
   맨 위에선 숨어 있다가 큰 제목이 가려지면 위에서 내려옴. 시간 · 곡선은 앱 소개 시트(화면 밖에서 미끄러져 들어옴)와 같은 0.3초 ease-out.
   바탕 · 선 · 제목은 앱 머리줄(흐린 반투명 90% + 흐림 24px, 아래 1px Gray 02, 제목 18px Bold, 위 10 · 아래 8 + 44px 줄).
   왼쪽 꺾쇠는 두지 않음(뒤로 가기가 아니라 페이지 이름만). 오른쪽은 페이지의 주요 동작 버튼(.btn)
   기준선: 제목(글자)은 22px, 버튼(도형)은 18px. 폭은 홈 화면과 같은 730px (11/09 640 → 730) */
:root{--veil:rgba(255,255,255,.9)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--veil:rgba(27,29,31,.9)}}
:root[data-theme="dark"]{--veil:rgba(27,29,31,.9)}
.subbar{position:fixed;z-index:5;top:0;left:0;right:0;transform:translateY(calc(-100% - 2px));transition:transform .3s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.subbar::before{content:'';position:absolute;z-index:-1;inset:0;background:var(--veil);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
html.sub-scrolled .subbar::before{box-shadow:0 1px 0 var(--g02)} /* 아래 선은 내려왔을 때만: 숨어 있을 때 선 1px이 화면 맨 위로 삐져나와 줄처럼 보였음 (11/09) */
.subbar-in{max-width:730px;min-height:62px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px 8px}
html.sub-scrolled .subbar{transform:none;pointer-events:auto}
.subbar-title{min-width:0;padding-left:4px;font-size:18px;font-weight:700;line-height:1.4;color:var(--g09);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subbar .btn{flex-shrink:0}
@media (prefers-reduced-motion:reduce){.subbar{transition:none}}

/* 문서 머리 (11/10): 디자인 시스템 · 버전 기록이 같이 씀. 위에 여백 · 그라디언트를 두는 생각만 애플 Legal 페이지에서 빌리고, 나머지는 핀턴 방식(로고 머리줄 · 왼쪽 정렬 제목 · 붙을 때만 선). 콘텐츠 폭은 랜딩과 같게(최대 1040 · 좌우 여백 22, 글자는 4px 더 안쪽).
   맨 위 그라디언트 띠(.dhero) 안에 작은 머리줄(.lnav: 왼쪽 문서 이름 · 오른쪽 차례 바로가기 · 아래 1px 선)과 가운데 큰 제목 · 설명.
   그라디언트는 랜딩 그림 카드와 같은 공식: 하늘(#C9E3F8) · 회청(#F1F5F9) 두 색을 바탕에 70%만 섞고 번지는 위치만 다르게. 다크는 #1A2E47 · #25282B.
   머리줄은 스크롤해도 위에 붙어 있고, 띠를 벗어나면 반투명 바탕 + 흐림이 깔림(html.lnav-stuck).
   좁은 화면(640 이하)에선 바로가기를 오른쪽 꺾쇠(∨)로 접고 펼침: 누르면 제목 아래로 목록이 열리고(높이 0.3초 ease-out) 꺾쇠가 뒤집힘(∧). 항목을 누르면 닫힘 */
:root{--line:#E3E5E8;--t1:#C9E3F8;--t2:#F1F5F9;--a1:color-mix(in srgb,var(--t1) 55%,var(--bg));--a2:color-mix(in srgb,var(--t2) 60%,var(--bg));--sky:color-mix(in srgb,#C9E3F8 55%,var(--bg))} /* --sky: 로고가 있는 왼쪽 위 번짐은 페이지 색과 상관없이 늘 하늘 — 로고 파랑과 어울리게 (11/10: 모든 그라디언트에 하늘을 섞음) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--line:#343639;--a1:#1A283A;--a2:#232528;--sky:#1A283A}}
:root[data-theme="dark"]{--line:#343639;--a1:#1A283A;--a2:#232528;--sky:#1A283A}
.lnav{position:sticky;top:0;z-index:5;padding:0 18px;transition:background-color .25s}
.lnav::before{content:'';position:absolute;z-index:-1;inset:0;background:var(--veil);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);opacity:0;transition:opacity .25s}
html.lnav-stuck .lnav::before{opacity:1}
.lnav-in{max-width:1004px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:8px 4px} /* 로고가 위에서 18px: 앱 · 랜딩 머리줄과 같은 자리. 로고 왼쪽 끝 = 글자선(26): 큰 제목 · 본문 글자 줄보다 바깥으로 튀어나오지 않게 (11/10) */
/* 아래 선은 머리줄이 붙었을 때만 (앱 머리줄 · 서브페이지 탑바와 같은 규칙) */
html.lnav-stuck .lnav::before{box-shadow:0 1px 0 var(--g02)}
/* 왼쪽: 핀턴 로고 → (붙으면) 문서 이름. 개발 · 운영용 페이지는 입체 로고(logo-vibrant, 11/10) */
.lnav-name{display:inline-flex;align-items:center;gap:12px;margin:0;font-size:19px;font-weight:400;line-height:1;color:var(--g06);white-space:nowrap;text-decoration:none}
.lnav-logo{display:inline-flex;align-items:center;transition:opacity .3s cubic-bezier(.2,.8,.2,1),transform .4s cubic-bezier(.2,.8,.2,1)}
/* 맨 위에선 로고만 (11/10: 아래 띠에 큰 제목이 있어 이름을 또 쓰면 겹침). 스크롤해 머리줄이 붙으면 로고는 위로 사라지고 그 자리에 이름(18 Bold, 글자선 4px 안쪽)이 아래에서 올라옴 */
.lnav-name{position:relative;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent} /* 누르는 곳 = 로고 · 이름 크기만, 끌어도 글자가 선택되지 않게 (11/10: 폰에서 줄 전체가 링크라 빈 곳을 눌러도 이동, 숨은 이름까지 선택됐음) */
html:not(.lnav-stuck) .lnav-name > span:last-child{visibility:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}
.lnav-name > span:last-child{position:absolute;left:0;top:50%;font-size:18px;font-weight:700;color:var(--g09);opacity:0;transform:translateY(calc(-50% + 14px));pointer-events:none;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s cubic-bezier(.2,.8,.2,1)} /* 이름은 아래에서 위로 올라오며 나타남 (11/10) */
/* 스크롤해 띠를 벗어나면(머리줄이 붙으면) 로고는 위로 올라가며 사라지고, 같은 자리에 이름이 아래에서 올라옴 (11/10) */
html.lnav-stuck .lnav-logo{opacity:0;transform:translateY(-14px);pointer-events:none}
html.lnav-stuck .lnav-name > span:last-child{opacity:1;transform:translateY(-50%);pointer-events:auto;transition-delay:.08s}
.lnav-name img{display:block;height:24px;width:70px} /* 로고 크기는 앱 · 랜딩과 같은 70×24 (11/10) */
.lnav-name .logo-d{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lnav-name .logo-l{display:none}:root:not([data-theme="light"]) .lnav-name .logo-d{display:block}}
:root[data-theme="dark"] .lnav-name .logo-l{display:none}:root[data-theme="dark"] .lnav-name .logo-d{display:block}
.lnav nav{display:flex;gap:18px;font-size:14px;line-height:1.4} /* 고정폭 숫자(tabular-nums)는 줄 맞춤이 필요한 표에만: 여기서 쓰면 "11"의 1이 넓게 벌어져 보였음 */
.lnav nav a{color:var(--g08);text-decoration:none;white-space:nowrap}
@media (hover:hover){:where(html:not([data-input="touch"])) .lnav nav a:hover{opacity:.6}}
.lnav-tg{display:none}
.dhero{position:relative;isolation:isolate;margin-top:-60px;padding:60px 18px 0} /* 좌우 18px · 글자 22px: 앱 화면과 같은 기준선이라 로고도 앱과 같은 22px에서 시작 (11/10, 22 · 26 → 18 · 22). 위 여백에 노치(safe-area-inset-top)를 더하지 않음 (11/10, 앱 머리줄 11/06 결정과 같게): Safari 상단바가 페이지 위에 떠 있는 기기(폴드 · 듀오 · 아이폰 가로)에선 그 높이가 그대로 들어와 머리줄 위에 빈 띠가 생겼음. 상단바는 Safari가 비켜 줌 */
/* 그라디언트는 뒤 막(::before)에. 띠 전체(그라디언트 + 큰 제목 · 설명)가 같은 값(--hf)으로 함께 옅어짐: 큰 제목 아래 끝이 머리줄 밑선 100px 앞에서부터 닿을 때까지 1 → 0 (11/10: 글자만 빨리 · 배경만 천천히 사라지던 것의 중간). 머리줄이 붙는(이름이 나타나는) 때는 큰 제목이 머리줄에 닿기 시작할 때 */
.dhero::before{content:'';position:absolute;z-index:-1;inset:0;background:radial-gradient(70% 140% at 6% 0%,var(--sky),transparent 70%),radial-gradient(60% 130% at 94% 100%,var(--a1),transparent 70%),var(--a2);opacity:var(--hf,1)}
.dhero-in{max-width:1004px;margin:0 auto;padding:64px 4px 72px} /* 제목 · 설명은 왼쪽 정렬, 본문과 같은 글자선(22 + 4) */
.dhero-in{opacity:var(--hf,1)}
/* 큰 제목 위 Pintern Builder 바로가기 (11/10): 디자인 시스템 · 버전 기록에서 두 문서의 입구(/builder)로. Ghost 버튼처럼 글자 + › */
.dcrumb{display:inline-flex;align-items:center;gap:2px;margin-bottom:8px;font-size:14px;font-weight:500;line-height:1.4;color:var(--g06);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:color .2s}
.dcrumb svg{width:17px;height:17px;margin-left:-1px;stroke-width:1.8} /* 꺾쇠만 키움, 선 굵기는 14px일 때(2.2)와 같게 보이도록 크기에 맞춰 낮춤 (11/10) */
.dcrumb + h1{display:block}
@media (hover:hover){:where(html:not([data-input="touch"])) .dcrumb:hover{color:var(--g09)}}
.dhero h1{margin:0;font-size:32px;font-weight:700;line-height:1.3;letter-spacing:-0.035em;color:var(--g09)}
.dhero p{margin:12px 0 0;font-size:16px;line-height:1.6;color:var(--g06)}
/* 줄바꿈은 넓은 화면에서만 문장 단위로(br.pc). 폰에선 자연스럽게 흐르게 둠: 일부러 끊으면 2줄을 의도해도 4줄로 깨질 수 있어서 */
@media (max-width:640px){.dhero br.pc{display:none}}
@media (max-width:640px){
  /* 접기는 max-height로 (11/10: 0fr 격자 줄 접기는 사파리에서 안 접혀 "11월"이 제목 아래로 삐져나왔음).
     펼친 목록은 머리줄 아래로 덮어 띄움(오버레이): 아래 내용이 밀려 내려가지 않게. 맨 위에서 펼쳐도 스크롤한 것처럼 반투명 바탕 + 아래 선 (11/10) */
  .lnav-in{padding:8px 0 8px 4px}
  .lnav-name{min-width:0;margin-right:auto}
  .lnav-tg{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;border:0;padding:0;background:none;color:var(--g07);cursor:pointer}
  .lnav nav{position:absolute;left:0;right:0;top:100%;max-height:0;overflow:hidden;flex-wrap:wrap;gap:4px 18px;padding:0 calc(18px + 4px);font-size:15px;visibility:hidden;transition:max-height .3s cubic-bezier(.2,.8,.2,1),padding .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}
  .lnav nav a{padding:6px 0}
  /* 펼칠 때 글자는 바탕이 다 내려온 뒤 나타남 (11/10): 글자가 흐린 바탕보다 먼저 튀어나와 보였음. 접을 땐 바로 사라짐 */
  .lnav nav > *{opacity:0;transform:translateY(-6px);transition:opacity .15s,transform .15s}
  .lnav.open nav > *{opacity:1;transform:none;transition:opacity .25s var(--d,.18s),transform .35s cubic-bezier(.2,.8,.2,1) var(--d,.18s)}
  /* 위에서 아래로 차례로 (11/10): 묶음마다 0.07초씩 늦게 */
  .lnav nav > :nth-child(2){--d:.25s}.lnav nav > :nth-child(3){--d:.32s}.lnav nav > :nth-child(4){--d:.39s}.lnav nav > :nth-child(n+5){--d:.46s}
  .lnav.open nav{max-height:var(--nh,380px);padding:16px calc(18px + 4px) 28px;visibility:visible;transition:max-height .3s cubic-bezier(.2,.8,.2,1),padding .3s cubic-bezier(.2,.8,.2,1),visibility 0s}
  /* 흐린 바탕은 한 장으로 (11/10): 머리줄 · 펼친 목록이 따로 흐림을 깔아 이음매에서 뒤 글자 번짐이 엇갈렸음 → 목록엔 바탕을 두지 않고, 머리줄 바탕(::before)을 목록 높이(--nh, 펼칠 때 JS가 잼)만큼 아래로 늘림. 늘어나는 속도는 목록과 같게 */
  .lnav::before{transition:opacity .25s,bottom .3s cubic-bezier(.2,.8,.2,1)}
  .lnav.open::before{opacity:1;bottom:calc(-1 * var(--nh,0px));box-shadow:0 1px 0 var(--g02)}
  /* 펼친 차례 아래 화면은 어둡게 (11/10): 차례와 본문 글자가 섞여 읽혔음. 바깥을 누르면 닫힘(JS).
     덮개 판을 깔면(투명하게 숨겨 둬도) iOS Safari가 그 색으로 아래 주소창을 물들여서, 판 없이 본문 자체를 70% 밝기로 */
  main,.dhero{background:var(--bg);transition:filter .3s} /* 바탕도 같이 어두워지게 본문에 바탕색 */
  html:has(.lnav.open) :is(main,.dhero){filter:brightness(.7)}
  .dhero-in{padding:64px 4px 52px} /* 머리줄과 큰 제목 사이 44 → 64 (11/10, 넓은 화면과 같게) */
  .dhero h1{font-size:26px}
  .dhero p{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.lnav nav,.lnav::before,.lnav-logo,.lnav-name > span:last-child{transition:none!important}main,.dhero,.lnav nav > *{transition:none;transform:none}}
/* 위아래 꺾쇠 (11/10, 애플 메뉴처럼 · 사이트 공통): 통째로 돌리지 않고 선 두 개가 각자 가운데를 축으로 기울기를 뒤집어 ∨ → (잠깐 평평) → ∧.
   크기는 --cs(상자), 굵기는 --ct. 펼친 상태는 감싼 버튼의 aria-expanded="true" */
.chev{--cs:18px;--ct:1.4px;position:relative;display:inline-block;flex-shrink:0;width:var(--cs);height:var(--cs)}
.chev::before,.chev::after{content:'';position:absolute;top:calc(50% - var(--ct) / 2 + .3px);width:calc(var(--cs) * .433);height:var(--ct);border-radius:9px;background:currentColor;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.chev::before{left:calc(var(--cs) * .139);transform:rotate(44deg)}
.chev::after{right:calc(var(--cs) * .139);transform:rotate(-44deg)}
[aria-expanded="true"] .chev::before{transform:rotate(-44deg)}
[aria-expanded="true"] .chev::after{transform:rotate(44deg)}
@media (prefers-reduced-motion:reduce){.chev::before,.chev::after{transition:none}}

/* 아주 좁은 화면 (11/10): 문서 페이지가 옆으로 넘쳐 표 · 토스트가 잘렸음 → 가로 넘침 막고 표 값은 줄바꿈 허용 */
html:has(.lnav){overflow-x:clip}
@media (max-width:420px){.tbl td,.tbl td.num,.tbl td:first-child{white-space:normal}.tbl code{white-space:normal;word-break:break-all}.tbl td:first-child code{white-space:nowrap;word-break:normal}} /* 첫 칸 토큰 이름(--g09 · --blue-weak)은 한 줄로: 글자 단위로 쪼개져 "--g0 / 9"처럼 세 줄이 됐음 (11/10). 긴 값(cubic-bezier)만 쪼갬 */