:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", system-ui, sans-serif;
  font-synthesis: none;
  --blue: #0878f9;
  --blue-pressed: #0069e2;
  --ink: #171719;
  --secondary: #6e6e73;
  --tertiary: #98989d;
  --surface: rgba(255, 255, 255, .82);
  --line: rgba(60, 60, 67, .12);
  --green: #20a464;
  --orange: #e87b13;
  --red: #df3e46;
  --radius: 24px;
  background: #f5f5f7;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 50% -10%, #fff 0, #f7f8fa 36rem, #f2f3f5 100%); min-height: 100svh; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(8,120,249,.42); outline-offset: 3px; }
svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.topbar { position: sticky; z-index: 20; top: 0; height: 64px; padding: env(safe-area-inset-top) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; background: rgba(247, 248, 250, .72); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); }
.topbar::after { content: ""; position: absolute; inset: auto 0 -10px; height: 10px; background: linear-gradient(rgba(247,248,250,.4), transparent); pointer-events: none; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-size: 17px; font-weight: 720; letter-spacing: -.025em; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: white; background: linear-gradient(150deg, #3598ff, #006fe8); box-shadow: 0 5px 12px rgba(0, 113, 227, .22); }
.brand-mark svg { width: 21px; stroke-width: 1.6; }
.icon-button, .back-button, .sheet-close { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(118,118,128,.1); transition: transform .12s ease, background .2s ease; }
.icon-button:active, .back-button:active, .sheet-close:active { transform: scale(.9); background: rgba(118,118,128,.18); }
.icon-button svg { width: 22px; }

.screen { width: min(1120px, 100%); margin: 0 auto; padding: 54px 24px 80px; }
.home-screen { min-height: calc(100svh - 64px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-copy { max-width: 740px; }
.trust-chip { width: fit-content; margin: 0 auto 22px; display: flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid rgba(32,164,100,.12); border-radius: 99px; color: #138552; background: rgba(222,247,234,.66); font-size: 13px; font-weight: 650; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(32,164,100,.12); }
h1 { margin: 0; font-size: clamp(38px, 7vw, 66px); line-height: 1.08; letter-spacing: -.055em; font-weight: 800; }
h1 span { color: var(--blue); }
.hero-copy > p { margin: 22px auto 0; color: var(--secondary); font-size: clamp(17px, 2.5vw, 20px); line-height: 1.55; letter-spacing: -.015em; }

.passport-stage { position: relative; width: 258px; height: 295px; margin: 42px auto 30px; perspective: 900px; }
.passport-card { position: absolute; inset: 0 auto auto 27px; width: 204px; aspect-ratio: 35/45; overflow: hidden; border: 7px solid white; border-radius: 13px; background: #f5f6f7; box-shadow: 0 26px 50px rgba(39, 51, 71, .18), 0 3px 8px rgba(39,51,71,.08); transform: rotateY(-3deg) rotateZ(-1.5deg); }
.passport-photo { position: absolute; left: 50%; top: -18px; width: 132%; height: auto; display: block; transform: translateX(-50%); }
.guide-line { position: absolute; z-index: 5; left: 9px; right: 9px; border-top: 1px dashed rgba(0,113,227,.58); }.guide-line.top { top: 17px; }.guide-line.bottom { top: 190px; }
.guide-label { position: absolute; z-index: 6; top: 103px; right: -36px; padding: 5px 7px; color: #0568d5; background: rgba(231,243,255,.92); border-radius: 6px; font-size: 9px; font-weight: 700; transform: rotate(90deg); }
.pass-bubble { position: absolute; z-index: 8; right: -13px; bottom: 18px; display: flex; align-items: center; gap: 6px; padding: 10px 13px 10px 10px; border: 1px solid rgba(255,255,255,.7); border-radius: 14px; color: #127b4c; background: rgba(255,255,255,.82); backdrop-filter: blur(16px); box-shadow: 0 10px 25px rgba(30,52,72,.13); font-size: 12px; font-weight: 700; transform: rotate(1deg); }
.pass-bubble svg { width: 21px; height: 21px; padding: 3px; color: white; background: var(--green); border-radius: 50%; stroke-width: 2.6; }

.primary-actions { width: min(430px, 100%); display: grid; gap: 11px; }
.button { min-height: 48px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 15px; font-size: 16px; font-weight: 720; letter-spacing: -.02em; transition: transform .12s ease, filter .2s ease, box-shadow .2s ease, opacity .2s ease; }
.button:active { transform: scale(.975); }
.button.large { min-height: 58px; font-size: 18px; }
.button svg { width: 23px; }
.button.primary { color: white; background: linear-gradient(#1585fb, #0878f9); box-shadow: 0 9px 20px rgba(0,113,227,.23), inset 0 1px rgba(255,255,255,.25); }
.button.primary:hover { filter: brightness(1.03); }.button.primary:active { background: var(--blue-pressed); box-shadow: 0 4px 10px rgba(0,113,227,.18); }
.button.secondary { color: #252527; background: rgba(255,255,255,.9); border: 1px solid rgba(60,60,67,.12); box-shadow: 0 3px 9px rgba(0,0,0,.04); }
.button:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.steps-card { width: min(650px, 100%); margin-top: 42px; padding: 20px 24px; display: flex; align-items: center; border: 1px solid rgba(255,255,255,.9); border-radius: 22px; background: rgba(255,255,255,.56); box-shadow: 0 8px 30px rgba(45,54,72,.05); }
.steps-card div { min-width: 120px; display: grid; grid-template-columns: 28px 1fr; text-align: left; align-items: center; column-gap: 8px; }
.steps-card div > span { grid-row: 1/3; width: 28px; height: 28px; display: grid; place-items: center; color: var(--blue); border-radius: 50%; background: #e6f2ff; font-size: 12px; font-weight: 800; }
.steps-card strong { font-size: 14px; }.steps-card small { color: var(--tertiary); font-size: 11px; margin-top: 2px; }
.steps-card > i { flex: 1; height: 1px; margin: 0 13px; background: #dfe1e5; }
.text-link { min-height:44px; margin-top: 22px; padding: 10px; display: inline-flex; align-items: center; gap: 3px; color: #5f6065; background: transparent; font-size: 14px; font-weight: 600; }
.text-link svg, .official-link svg { width: 17px; }

.screen-heading { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
.back-button { flex: 0 0 40px; background: rgba(255,255,255,.8); box-shadow: 0 2px 6px rgba(0,0,0,.04); }.back-button svg { width: 21px; }
.screen-heading small, .sheet-header small { color: var(--blue); font-size: 13px; font-weight: 730; }
.screen-heading h2 { margin: 5px 0 0; font-size: clamp(26px, 4vw, 34px); letter-spacing: -.04em; line-height: 1.15; }
.editor-layout, .result-layout { display: grid; grid-template-columns: minmax(300px, 460px) minmax(320px, 1fr); align-items: start; gap: clamp(32px, 7vw, 78px); }
.crop-frame { position: relative; width: min(100%, 390px); margin: auto; aspect-ratio: 35/45; overflow: hidden; border-radius: 22px; background: #d9dde2; box-shadow: 0 22px 50px rgba(27,37,49,.18); touch-action: none; cursor: grab; }
.crop-frame:active { cursor: grabbing; }.crop-frame canvas { width: 100%; height: 100%; display: block; }
.crop-guides { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.8); border-radius: inherit; }
.head-oval { position: absolute; left: 23%; top: 12%; width: 54%; height: 72%; border: 1.5px dashed rgba(255,255,255,.92); border-radius: 50%; box-shadow: 0 0 0 999px rgba(0,0,0,.08); }
.center-line { position: absolute; left: 50%; top: 8%; bottom: 8%; border-left: 1px solid rgba(255,255,255,.2); }
.top-label,.chin-label { position: absolute; left: calc(50% + 8px); padding: 2px 5px; color: white; border-radius: 4px; background: rgba(0,0,0,.38); font-size: 9px; font-weight: 650; }.top-label{top:11%}.chin-label{top:82%}
.analysis-overlay { position: absolute; inset: 0; display: none; place-content: center; justify-items: center; gap: 14px; color: white; background: rgba(18,22,27,.56); backdrop-filter: blur(7px); font-size: 14px; font-weight: 650; }.analysis-overlay.is-visible { display: grid; }
.spinner { width: 30px; height: 30px; border: 3px solid rgba(255,255,255,.3); border-top-color: white; border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.gesture-hint { margin: 18px auto 0; display: flex; justify-content: center; align-items: center; gap: 7px; color: var(--secondary); font-size: 13px; text-align: center; }.gesture-hint svg { flex: 0 0 20px; width: 20px; }
.editor-panel { display: grid; gap: 14px; padding-top: 40px; }
.control-card, .notice-card, .score-card, .checks-section { border: 1px solid rgba(255,255,255,.86); border-radius: 22px; background: rgba(255,255,255,.72); box-shadow: 0 9px 28px rgba(38,48,63,.06); }
.control-card { padding: 20px; }.control-row { display: flex; justify-content: space-between; align-items: center; }.control-row label { font-weight: 700; }.control-row button { padding: 6px 9px; color: var(--blue); border-radius: 8px; background: #eaf4ff; font-size: 12px; font-weight: 700; }
input[type="range"] { width: 100%; margin: 22px 0 5px; accent-color: var(--blue); }.range-labels { display:flex; justify-content:space-between; color:var(--tertiary); font-size:11px; }
.notice-card { padding: 17px; display: flex; gap: 12px; color: #795314; background: rgba(255,247,226,.78); border-color: rgba(239,169,45,.16); }.notice-card svg { flex: 0 0 22px; width: 22px; color: #e3981d; }.notice-card p { margin:0; font-size:13px; line-height:1.55; }.notice-card strong { display:block; color:#624311; }

.result-layout { grid-template-columns: minmax(240px, 330px) minmax(400px, 1fr); }
.result-preview-wrap { position: sticky; top: 96px; width: min(100%, 330px); margin: 0 auto; }.result-preview-wrap canvas { width:100%; display:block; border-radius:17px; background:white; box-shadow:0 20px 50px rgba(27,37,49,.17); }
.result-stamp { position:absolute; right:-14px; bottom:22px; padding:9px 13px; display:none; align-items:center; gap:6px; color:white; border:3px solid white; border-radius:999px; background:var(--green); box-shadow:0 8px 20px rgba(20,120,73,.24); font-size:13px; font-weight:750; transform:rotate(-2deg); }.result-stamp.is-visible { display:flex; }
.result-content { display:grid; gap:16px; }.score-card { padding:22px; display:flex; align-items:center; gap:18px; }
.score-ring { --score: 0deg; flex:0 0 78px; width:78px; height:78px; position:relative; display:flex; align-items:baseline; justify-content:center; padding-top:25px; border-radius:50%; background:conic-gradient(var(--blue) var(--score), #e7e8eb 0); font-weight:800; }
.score-ring::after { content:""; position:absolute; inset:6px; border-radius:50%; background:white; }.score-ring span,.score-ring small{position:relative;z-index:1}.score-ring span{font-size:23px;letter-spacing:-.04em}.score-ring small{font-size:10px;margin-left:2px;color:var(--tertiary)}
.eyebrow { color:var(--blue); font-size:11px; font-weight:750; }.score-card h2 { margin:4px 0 5px; font-size:23px; letter-spacing:-.035em; }.score-card p { margin:0;color:var(--secondary);font-size:13px;line-height:1.45; }
.checks-section { overflow:hidden; }.section-title { padding:18px 19px 12px; display:flex; align-items:center; justify-content:space-between; }.section-title h3{margin:0;font-size:17px;letter-spacing:-.025em}.section-title p{margin:5px 0 0;color:var(--secondary);font-size:12px}.section-title>span{color:var(--tertiary);font-size:11px;font-weight:650}
.check-item { margin:0 18px; padding:15px 0; display:flex; align-items:center; gap:12px; border-top:1px solid var(--line); }.check-icon { flex:0 0 29px; width:29px;height:29px;display:grid;place-items:center;border-radius:50%;}.check-icon svg{width:17px;stroke-width:2.3}.check-item.pass .check-icon{color:#14824e;background:#e4f6ec}.check-item.warn .check-icon{color:#c76910;background:#fff0dd}.check-item.fail .check-icon{color:#c92f3a;background:#ffe7e9}.check-item>div{flex:1}.check-item strong{display:block;font-size:14px}.check-item small{display:block;margin-top:4px;color:var(--secondary);font-size:12px;line-height:1.35}.check-item em{font-style:normal;font-size:11px;font-weight:700}.check-item.pass em{color:var(--green)}.check-item.warn em{color:var(--orange)}.check-item.fail em{color:var(--red)}
.check-toggle { margin:0 18px; padding:15px 0; display:flex;align-items:flex-start;gap:12px;border-top:1px solid var(--line);cursor:pointer; }.check-toggle input{position:absolute;opacity:0}.toggle-box{flex:0 0 25px;width:25px;height:25px;display:grid;place-items:center;margin-top:1px;border:1.5px solid #c5c7cc;border-radius:8px;background:white;transition:.16s ease}.toggle-box svg{width:17px;color:white;stroke-width:2.5;transform:scale(.3);opacity:0;transition:.16s ease}.check-toggle input:checked+.toggle-box{background:var(--blue);border-color:var(--blue)}.check-toggle input:checked+.toggle-box svg{transform:scale(1);opacity:1}.check-toggle strong{display:block;font-size:14px}.check-toggle small{display:block;margin-top:4px;color:var(--secondary);font-size:12px;line-height:1.35}
.final-actions { display:grid;gap:10px;padding:8px 0 0}.final-actions>p{margin:2px 0 0;color:var(--tertiary);font-size:11px;text-align:center}
.official-check { color: #106f4a !important; background: #edf9f2 !important; border-color: rgba(32,164,100,.16) !important; text-decoration: none; }.official-check svg { width:22px; }

.camera-view { position:fixed;z-index:100;inset:0;background:#090a0b;color:white;overflow:hidden; }.camera-view[hidden]{display:none}.camera-view video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.camera-shade { position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.42),transparent 24%,transparent 66%,rgba(0,0,0,.6));pointer-events:none}.camera-guide{position:absolute;left:50%;top:50%;width:min(76vw,390px);aspect-ratio:35/45;transform:translate(-50%,-50%);border:1.5px solid rgba(255,255,255,.75);border-radius:18px;box-shadow:0 0 0 9999px rgba(0,0,0,.18);pointer-events:none}.camera-guide::before,.camera-guide::after{content:"";position:absolute;width:26px;height:26px;border-color:white}.camera-guide::before{left:-2px;top:-2px;border-left:3px solid;border-top:3px solid;border-radius:18px 0 0}.camera-guide::after{right:-2px;bottom:-2px;border-right:3px solid;border-bottom:3px solid;border-radius:0 0 18px}.camera-head-oval{position:absolute;left:23%;top:12%;width:54%;height:72%;border:1.5px dashed rgba(255,255,255,.85);border-radius:50%}.eye-line{position:absolute;left:16%;right:16%;top:46%;border-top:1px dashed rgba(255,255,255,.45)}
.camera-top{position:absolute;top:max(18px,env(safe-area-inset-top));left:16px;right:16px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px}.camera-top button{width:44px;height:44px;display:grid;place-items:center;color:white;border-radius:50%;background:rgba(20,20,22,.44);backdrop-filter:blur(15px)}.camera-top button svg{width:22px}.camera-status{justify-self:center;display:flex;align-items:center;gap:7px;padding:9px 13px;border-radius:99px;background:rgba(20,20,22,.5);backdrop-filter:blur(15px);font-size:12px;font-weight:650;text-align:center}.camera-status span{width:7px;height:7px;border-radius:50%;background:#ffd250;box-shadow:0 0 0 4px rgba(255,210,80,.14)}.camera-status.good span{background:#31d17c;box-shadow:0 0 0 4px rgba(49,209,124,.14)}
.camera-tip{position:absolute;left:50%;bottom:150px;min-width:min(340px,calc(100vw - 44px));padding:13px 18px;text-align:center;border:1px solid rgba(255,255,255,.14);border-radius:15px;background:rgba(19,20,23,.46);backdrop-filter:blur(18px);transform:translateX(-50%)}.camera-tip strong,.camera-tip span{display:block}.camera-tip strong{font-size:14px}.camera-tip span{margin-top:4px;color:rgba(255,255,255,.75);font-size:11px}
.camera-bottom{position:absolute;left:0;right:0;bottom:max(28px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:55px}.gallery-mini,.camera-spacer{width:44px;height:44px}.gallery-mini{display:grid;place-items:center;color:white;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:rgba(255,255,255,.12)}.gallery-mini svg{width:24px}.shutter{width:76px;height:76px;padding:5px;border:3px solid white;border-radius:50%;background:transparent}.shutter span{display:block;width:100%;height:100%;border-radius:50%;background:white;transition:transform .1s ease}.shutter:active span{transform:scale(.88)}

.sheet { width:min(600px,calc(100% - 20px)); max-height:min(82svh,760px); margin:auto auto 10px; padding:9px 22px max(26px,env(safe-area-inset-bottom)); border:0;border-radius:26px;background:rgba(250,250,252,.94);backdrop-filter:blur(30px);box-shadow:0 25px 80px rgba(0,0,0,.28);color:var(--ink);transform:translateY(18px) scale(.985);opacity:0;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .25s ease}.sheet[open]{transform:none;opacity:1}.sheet::backdrop{background:rgba(17,18,20,.38);backdrop-filter:blur(2px)}.sheet-handle{width:37px;height:5px;margin:0 auto 13px;border-radius:9px;background:#c8c8cd}.sheet-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}.sheet-header h2{margin:5px 0 0;font-size:27px;letter-spacing:-.04em}.sheet-close svg{width:20px}.rules-list{list-style:none;margin:0;padding:0}.rules-list li{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--line)}.rules-list li>span{flex:0 0 27px;width:27px;height:27px;display:grid;place-items:center;color:var(--blue);border-radius:50%;background:#e8f3ff;font-size:12px;font-weight:750}.rules-list strong{display:block;font-size:14px}.rules-list p{margin:4px 0 0;color:var(--secondary);font-size:12px;line-height:1.45}.official-link{margin-top:14px;padding:14px 6px 2px;display:flex;align-items:center;justify-content:center;color:var(--blue);text-decoration:none;font-size:13px;font-weight:700}
.toast{position:fixed;z-index:200;left:50%;bottom:max(24px,env(safe-area-inset-bottom));max-width:calc(100vw - 32px);padding:12px 17px;color:white;border-radius:99px;background:rgba(24,25,28,.9);box-shadow:0 8px 25px rgba(0,0,0,.18);backdrop-filter:blur(14px);font-size:13px;font-weight:650;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.25s ease}.toast.is-visible{transform:translate(-50%,0);opacity:1}

@media (max-width: 720px) {
  .topbar{height:58px}.screen{padding:35px 18px 64px}.home-screen{min-height:calc(100svh - 58px)}.hero-copy>p{max-width:330px}.passport-stage{margin-top:32px;margin-bottom:23px;transform:scale(.88);transform-origin:center;height:260px}.steps-card{margin-top:30px;padding:15px 13px}.steps-card div{min-width:0;display:block;text-align:center;flex:1}.steps-card div>span{margin:0 auto 6px}.steps-card strong,.steps-card small{display:block}.steps-card>i{margin:0 4px}.steps-card small{font-size:9px}.screen-heading{margin-bottom:23px}.editor-layout,.result-layout{display:block}.editor-panel{padding-top:26px}.crop-frame{width:min(82vw,360px)}.result-preview-wrap{position:relative;top:auto;width:176px;margin-bottom:28px}.result-stamp{right:-29px;bottom:13px}.result-content{gap:13px}.score-card{padding:17px}.checks-section{border-radius:19px}.result-screen{padding-bottom:40px}
}
@media (max-width: 380px){h1{font-size:35px}.passport-stage{transform:scale(.78);height:235px}.steps-card small{display:none}.screen{padding-inline:15px}.camera-bottom{gap:42px}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.sheet{transform:none}}
@media (prefers-reduced-transparency: reduce){.topbar,.sheet,.score-card,.checks-section,.control-card{backdrop-filter:none;background:#fff}.camera-status,.camera-tip{backdrop-filter:none;background:#202124}}
@media (prefers-contrast: more){.button.secondary,.control-card,.score-card,.checks-section{border-color:#777}.topbar{background:#fff}.secondary{color:#111}}