/* 앱 소개 · 설치 페이지 (/app/런찌 · 사이온도 · 창고마당 .html). 앱마다 body 의 클래스로 색만 바꾼다 */
@font-face { font-family: "Pretendard"; src: url("/assets/font/PretendardVariable.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }
:root { --bg: #14263D; --bg2: #1E3655; --accent: #FF792E; --on-accent: #fff; --text: #252B33; --sub: #6B7480; --line: #E6EAF0; }
body.runzzi { --bg: #0E1512; --bg2: #1B2A22; --accent: #C6F432; --on-accent: #10160E; }
body.moabom { --bg: #E8716B; --bg2: #F9A39B; --accent: #FFF9F5; --on-accent: #D95550; }
body.fieldmgr { --bg: #0A1C35; --bg2: #173A66; --accent: #2563EB; --on-accent: #FFFFFF; }
body.fieldone { --bg: #0B1F44; --bg2: #1F3F7A; --accent: #3B82F6; --on-accent: #FFFFFF; }
body.jeol { --bg: #143427; --bg2: #2A5F49; --accent: #E6C165; --on-accent: #143427; }
body.bldg { --bg: #0B2328; --bg2: #1B4A52; --accent: #F2B33D; --on-accent: #12343B; }
body.whereis { --bg: #5A2E1E; --bg2: #F0704A; --accent: #FFE2D2; --on-accent: #5A2E1E; }
body.barokey { --bg: #1A1B1F; --bg2: #3A2418; --accent: #FF5A1F; --on-accent: #FFFFFF; }
body.pig { --bg: #B3245A; --bg2: #FF6F9C; --accent: #FFE08A; --on-accent: #6A1236; }
body.saiondo { --bg: #3A1F33; --bg2: #6B2F4E; --accent: #FF6B8B; --on-accent: #fff; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; color: var(--text); background: #F5F7FA; line-height: 1.6; word-break: keep-all; }
.wrap { max-width: 560px; margin: 0 auto; padding: 0 16px calc(32px + env(safe-area-inset-bottom, 0px)); }
.hero { margin: 0 -16px; padding: calc(44px + env(safe-area-inset-top, 0px)) 24px 34px; text-align: center; color: #fff; background: radial-gradient(120% 90% at 50% 0%, var(--bg2), var(--bg) 70%); border-radius: 0 0 28px 28px; }
.icon { width: 112px; height: 112px; border-radius: 26px; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); display: block; margin: 0 auto 18px; }
.en { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--accent); }
h1 { margin: 2px 0 6px; font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.tag { margin: 0; font-size: 17px; font-weight: 600; opacity: .95; }
.desc { margin: 12px auto 0; max-width: 400px; font-size: 14.5px; opacity: .78; }
.actions { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 14px; border: 0; font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; width: 100%; max-width: 340px; transition: transform .1s, filter .15s; }
.btn:active { transform: scale(.98); } .btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 22px rgba(0, 0, 0, .25); } .btn.primary:hover { filter: brightness(1.05); }
.hero .btn.line { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
.ver { margin: 2px 0 0; font-size: 12.5px; opacity: .7; }
.card { margin-top: 14px; padding: 22px 20px; background: #fff; border-radius: 18px; box-shadow: 0 2px 10px rgba(20, 38, 61, .06); }
h2 { margin: 0 0 14px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.points, .steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: n; }
.points li, .steps li { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; align-items: start; }
.points li::before { content: ""; grid-row: 1 / 3; width: 10px; height: 10px; margin: 8px 0 0 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
.steps li::before { counter-increment: n; content: counter(n); grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 50%; background: var(--bg); color: #fff; font-size: 14px; font-weight: 800; display: grid; place-items: center; }
li b { font-size: 15px; font-weight: 700; } li span { grid-column: 2; font-size: 13.5px; color: var(--sub); }
.note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--sub); }
.note + .note { margin-top: 10px; padding-top: 0; border: 0; }
.share .row { display: flex; flex-wrap: wrap; gap: 8px; } .share .btn { flex: 1 1 150px; min-height: 46px; font-size: 14.5px; background: #fff; color: var(--text); border: 1px solid var(--line); max-width: none; }
footer { margin-top: 26px; text-align: center; font-size: 12px; color: #9AA3AF; }
#toast { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); padding: 11px 18px; border-radius: 12px; background: rgba(20, 26, 34, .92); color: #fff; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100% - 32px); text-align: center; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
body.moabom .points li::before { background: #F47C76; box-shadow: 0 0 0 5px #FDECEA; }
body.duopic { --bg: #101010; --bg2: #2A1A20; --accent: #FF6B8A; --on-accent: #fff; }
body.easyplan { --bg: #0B1830; --bg2: #133A73; --accent: #4C8DF6; --on-accent: #FFFFFF; }
body.ggulzam { --bg: #140E08; --bg2: #3A2812; --accent: #FFB020; --on-accent: #1F1405; }
body.claudemeter { --bg: #1A1512; --bg2: #4A2A1E; --accent: #E0805F; --on-accent: #FFFFFF; }
body.mongle { --bg: #1E4E9C; --bg2: #5FAEF0; --accent: #FFD24D; --on-accent: #4A3420; }
body.dualai { --bg: #0B1220; --bg2: #1E3A6B; --accent: #5B8CFF; --on-accent: #FFFFFF; }
body.malbbal { --bg: #3B2FB5; --bg2: #6D5BF0; --accent: #FFD666; --on-accent: #2A1F86; }
body.musicfactory { --bg: #1B1433; --bg2: #6D28D9; --accent: #A78BFA; --on-accent: #160F2E; }
body.musicfactory .points li::before { background: #8A5CF6; box-shadow: 0 0 0 5px #EDE5FF; }
body.moviestudio { --bg: #15112A; --bg2: #5B2FC9; --accent: #9F7BF5; --on-accent: #120E24; }
body.moviestudio .points li::before { background: #8056EC; box-shadow: 0 0 0 5px #EAE2FF; }
body.ourtime { --bg: #2A2150; --bg2: #7756E8; --accent: #F4A7BC; --on-accent: #2A1F5A; }
body.ourtime .points li::before { background: #7756E8; box-shadow: 0 0 0 5px #EEE9FD; }
body.contacts { --bg: #1D4ED8; --bg2: #3B82F6; --accent: #FFFFFF; --on-accent: #1D4ED8; }
body.contacts .points li::before { background: #2563EB; box-shadow: 0 0 0 5px #DBEAFE; }
body.yaksok { --bg: #0F766E; --bg2: #14937F; --accent: #FFFFFF; --on-accent: #0F766E; }
body.yaksok .points li::before { background: #0F766E; box-shadow: 0 0 0 5px #D5EFEA; }
body.mulhanjan { --bg: #4FB3EE; --bg2: #FF9FB8; --accent: #FFFFFF; --on-accent: #2E8FCB; }
body.mulhanjan .points li::before { background: #FF8FAB; box-shadow: 0 0 0 5px #FFE4EC; }
/* 버전 기록 */
.history .hsub { margin: 4px 0 12px; font-size: 13px; color: var(--sub); }
.vers { list-style: none; margin: 0; padding: 0; }
.vers li { position: relative; padding: 12px 0 12px 18px; border-top: 1px solid var(--line); }
.vers li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.vers li.now::before { background: var(--bg2); }
.vers .vh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.vers .vh b { font-size: 15.5px; color: var(--text); }
.vers .badge { padding: 1px 8px; border-radius: 99px; background: var(--bg); color: #fff; font-size: 11.5px; font-weight: 700; }
.vers .meta { font-size: 12.5px; color: var(--sub); }
.vers .vn { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text); word-break: keep-all; overflow-wrap: anywhere; }
.vers .vd { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vers .vd a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; color: var(--text); text-decoration: none; background: #fff; }
.vers .vd a:hover { border-color: var(--sub); }
/* 아이폰으로 들어온 경우 */
body.ios .vers .vd { display: none; }
body.ios .card.ios-later { opacity: .72; }
body.ios .card.ios-later h2::after { content: " · 안드로이드 폰용"; font-weight: 600; color: var(--sub); font-size: 14px; }
.ios-tip { margin: -2px 0 2px; max-width: 340px; font-size: 13px; opacity: .8; }
.ios-card { border: 2px solid color-mix(in srgb, var(--bg2) 35%, transparent); }
.ios-none { display: grid; gap: 4px; width: 100%; max-width: 340px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3); text-align: left; }
.ios-none b { font-size: 15.5px; } .ios-none span { font-size: 13.5px; opacity: .85; }
body.ios #get, body.ios #get64 { display: none !important; }
[hidden] { display: none !important; }