/* Daytool — macOS 스타일 디자인 시스템 (라이트/다크) */
:root {
  color-scheme: light;
  --desk: #E4E9EF; --win: #FFFFFF; --side: rgba(244,244,247,.82); --bar: rgba(250,250,252,.72);
  --group: #F2F2F7; --card: #FFFFFF; --fill: rgba(118,118,128,.12); --fill2: rgba(118,118,128,.24);
  --text: #1D1D1F; --text2: #636369; --sep: rgba(60,60,67,.16);
  --accent: #0066CC; --accentBg: #0071E3; --ring: rgba(0,113,227,.4);
  --ok: #1A7F45; --warn: #B25000;
  --shadow: 0 30px 80px rgba(15,23,42,.22), 0 0 0 .5px rgba(0,0,0,.14);
  --lift: 0 10px 30px rgba(15,23,42,.12);
  --cardShadow: 0 1px 2px rgba(15,23,42,.06), 0 6px 20px rgba(15,23,42,.06);
  --wallA: #D3E3F8; --wallB: #DDD6F5; --wallC: #F6DFD2; --wallD: #D6EEE6; --onWall2: #45454B;
  --orangeText: #C2540A; --purpleText: #7D3FD6;
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --desk: #0E1116; --win: #1E1E1E; --side: rgba(40,40,44,.82); --bar: rgba(28,28,30,.72);
  --group: #1E1E1E; --card: #2C2C2E; --fill: rgba(118,118,128,.24); --fill2: rgba(118,118,128,.36);
  --text: #F5F5F7; --text2: #A1A1A6; --sep: rgba(84,84,88,.6);
  --accent: #2E95FF; --accentBg: #0071E3; --ring: rgba(46,149,255,.5);
  --ok: #30D158; --warn: #FF9F0A;
  --shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.10);
  --lift: 0 10px 30px rgba(0,0,0,.45);
  --cardShadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  --wallA: #13203A; --wallB: #1C1A3C; --wallC: #281C3E; --wallD: #0F272B; --onWall2: #C7C7CC;
  --orangeText: #FF9F0A; --purpleText: #BF8CFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --desk: #0E1116; --win: #1E1E1E; --side: rgba(40,40,44,.82); --bar: rgba(28,28,30,.72);
    --group: #1E1E1E; --card: #2C2C2E; --fill: rgba(118,118,128,.24); --fill2: rgba(118,118,128,.36);
    --text: #F5F5F7; --text2: #A1A1A6; --sep: rgba(84,84,88,.6);
    --accent: #2E95FF; --accentBg: #0071E3; --ring: rgba(46,149,255,.5);
    --ok: #30D158; --warn: #FF9F0A;
    --shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.10);
    --lift: 0 10px 30px rgba(0,0,0,.45);
    --cardShadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
    --wallA: #13203A; --wallB: #1C1A3C; --wallC: #281C3E; --wallD: #0F272B; --onWall2: #C7C7CC;
    --orangeText: #FF9F0A; --purpleText: #BF8CFF;
  }
  :root:not([data-theme="light"]) .i-moon { display: none; }
  :root:not([data-theme="light"]) .i-sun { display: inline-flex; }
}
:root[data-theme="dark"] .i-moon { display: none; }
:root[data-theme="dark"] .i-sun { display: inline-flex; }

/* 카테고리 색 */
.cat-pay { --c1: #3D8BF0; --c2: #1559C4; --glow: rgba(21,89,196,.55); }
.cat-date { --c1: #E86A1A; --c2: #C24E08; --glow: rgba(194,78,8,.55); }
.cat-unit { --c1: #A05EE6; --c2: #7A33C9; --glow: rgba(122,51,201,.55); }
.cat-money { --c1: #13A3A3; --c2: #0A7A7A; --glow: rgba(10,122,122,.55); }
.cat-text { --c1: #2EA562; --c2: #1F8048; --glow: rgba(31,128,72,.55); }
.cat-image { --c1: #EC4A7E; --c2: #C42357; --glow: rgba(196,35,87,.55); }
.cat-gen { --c1: #6E6CE8; --c2: #4644C2; --glow: rgba(70,68,194,.55); }

/* 기본 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; position: relative; overflow-x: hidden;
  background: var(--desk); color: var(--text); font-family: var(--font);
  font-size: 15px; line-height: 1.6; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
[hidden] { display: none !important; }
:lang(ja) { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif; line-break: strict; }
:lang(zh-Hans) { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif; }
:lang(vi) { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
:lang(ko) { font-family: var(--font); word-break: keep-all; overflow-wrap: break-word; }
:lang(en) { font-family: var(--font); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--card); padding: 10px 14px; border-radius: 10px; box-shadow: var(--lift); }
.skip:focus { left: 12px; }
.i-sun { display: none; }
.i-moon { display: inline-flex; }

/* 배경 물결 */
.wall { position: absolute; top: 0; left: 0; width: 100%; height: 900px; z-index: 0; pointer-events: none; }
.wall .w1 { fill: var(--wallA); } .wall .w2 { fill: var(--wallB); } .wall .w3 { fill: var(--wallC); }
.wall .w4 { fill: var(--wallD); } .wall .w5 { fill: var(--desk); }
main { position: relative; z-index: 1; flex: 1 0 auto; }

/* 메뉴바 */
.menubar { position: sticky; top: 0; z-index: 20; background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-bottom: .5px solid var(--sep); }
.menubar-in { max-width: 1240px; margin: 0 auto; padding: 4px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(180deg, #3D8BF0, #1559C4); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); color: #fff; display: flex; align-items: center; justify-content: center; }
.menu { display: flex; gap: 2px; flex: 1 1 auto; }
.nav-link { padding: 0 12px; min-height: 44px; display: flex; align-items: center; font-size: 14px; border-radius: 8px; }
.nav-link:hover, .icon-btn:hover { background: var(--fill); }
.menubar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-btn { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.f-langs { display: flex; flex-wrap: wrap; gap: 8px; }
/* 언어 메뉴 (맥 메뉴 막대의 풀다운 메뉴 느낌) */
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; min-height: 40px; padding: 0 10px 0 12px; display: flex; align-items: center; gap: 6px; border-radius: 10px; background: var(--fill); font-size: 13.5px; font-weight: 600; cursor: pointer; user-select: none; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover { background: var(--fill2); }
.lang-menu summary svg:last-child { color: var(--text2); transition: transform .15s ease; }
.lang-menu[open] summary svg:last-child { transform: rotate(180deg); }
.lang-menu ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 176px; margin: 0; padding: 5px; list-style: none; border-radius: 12px; background: var(--card); border: .5px solid var(--sep); box-shadow: 0 12px 32px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.1); }
.lang-menu li a { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 12px; border-radius: 8px; font-size: 14.5px; }
.lang-menu li a:hover { background: var(--accentBg); color: #fff; }
.lang-menu li a[aria-current]::after { content: ""; width: 7px; height: 12px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
@media (max-width: 720px) {
  .menu { display: none; }
  .menubar-in { padding: 4px 10px 4px 16px; }
  .lang-menu summary { padding: 0 8px 0 10px; }
}

/* 언어 안내 띠 */
.lang-banner { position: fixed; z-index: 40; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; padding: 0 16px; animation: lb-in .3s ease both; }
@keyframes lb-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .lang-banner { animation: none; } }
.lang-banner .lb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 8px 8px 16px; border-radius: 14px; background: var(--card); border: .5px solid var(--sep); box-shadow: 0 18px 40px -12px rgba(0,0,0,.35), var(--cardShadow); font-size: 14px; }
.lang-banner .lb span { flex: 1 1 200px; }
.lang-banner .lb a { min-height: 40px; padding: 0 14px; border-radius: 10px; display: inline-flex; align-items: center; background: var(--accentBg); color: #fff; font-weight: 600; }

/* 공통 구역 */
.sec { max-width: 1200px; margin: 0 auto; padding: 48px 24px 0; }
.sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-bottom: 16px; }
.sec-head h2, .sec > h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.sec > h2 { margin-bottom: 16px; }
.sec-sub { margin: 0; font-size: 14px; color: var(--onWall2); }
.card { background: var(--card); border-radius: 20px; border: .5px solid var(--sep); box-shadow: var(--cardShadow); }

/* 홈 */
.hero { max-width: 1200px; margin: 0 auto; padding: 84px 24px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.hero h1 { margin: 0; font-size: clamp(32px, 5vw, 48px); line-height: 1.12; font-weight: 700; letter-spacing: -0.035em; }
.hero .lead { margin: 0; max-width: 620px; font-size: 17px; color: var(--onWall2); }
.search { position: relative; width: 100%; max-width: 640px; margin-top: 18px; }
.search .s-ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--text2); display: flex; }
.search input { width: 100%; height: 60px; padding: 0 64px 0 52px; border-radius: 16px; border: .5px solid var(--sep); background: var(--card); color: var(--text); font-size: 18px; letter-spacing: -0.01em; box-shadow: var(--lift); outline: none; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--text2); opacity: 1; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search input:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.search kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 500 12px var(--font); color: var(--text2); border: .5px solid var(--sep); border-radius: 6px; padding: 2px 7px; background: var(--group); }

.widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.widget { min-height: 196px; padding: 18px; border-radius: 22px; display: flex; flex-direction: column; gap: 10px; background: var(--card); border: .5px solid var(--sep); box-shadow: var(--cardShadow); }
.widget.blue { background: #0F5FC7; color: #fff; border: 0; box-shadow: 0 12px 28px -12px rgba(15,95,199,.7); }
.widget.indigo { background: #4B49C8; color: #fff; border: 0; box-shadow: 0 12px 28px -12px rgba(75,73,200,.7); }
.w-head { display: flex; align-items: center; gap: 8px; }
.w-head h3 { margin: 0; font-size: 13.5px; font-weight: 600; flex: 1 1 auto; }
.w-open { font-size: 13px; font-weight: 600; color: var(--accent); min-height: 32px; display: inline-flex; align-items: center; gap: 2px; }
.widget.blue .w-open, .widget.indigo .w-open { color: #fff; }
.w-row { display: flex; align-items: center; gap: 8px; }
.w-row label { font-size: 13px; flex: 0 0 auto; }
.w-row input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--fill); color: inherit; font-size: 19px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; outline: none; }
.widget.blue .w-row input { background: rgba(255,255,255,.12); color: #fff; }
.w-unit { font-size: 13px; color: var(--text2); }
.w-big { margin: auto 0 0; font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.w-big.purple { color: var(--purpleText); }
.w-dday { margin: auto 0 0; font-size: 54px; line-height: 1; font-weight: 700; letter-spacing: -0.04em; color: var(--orangeText); font-variant-numeric: tabular-nums; }
.w-note { margin: 0; font-size: 12.5px; color: var(--text2); }
.widget.blue .w-note, .widget.indigo .w-note { color: #fff; }
.w-pw { margin: auto 0 0; font-family: var(--mono); font-size: 19px; font-weight: 600; letter-spacing: .04em; word-break: break-all; }
.w-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.w-btn { min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: rgba(255,255,255,.16); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.w-btn:hover { background: rgba(255,255,255,.26); }
.mini-ico { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(180deg, var(--c1), var(--c2)); color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: var(--fill); color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 7px; }
.chip[aria-pressed="true"] { background: var(--accentBg); color: #fff; }
.chip .dot { width: 8px; height: 8px; border-radius: 4px; background: var(--c1); }
.chip[aria-pressed="true"] .dot { box-shadow: 0 0 0 1.5px rgba(255,255,255,.85); }

.launch { list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 4px; border-radius: 24px; background: var(--card); border: .5px solid var(--sep); box-shadow: var(--cardShadow); }
.launch li { display: flex; }
.tile { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 8px 14px; border-radius: 18px; text-align: center; }
.tile:hover { background: var(--fill); }
.tile:hover .ico { transform: translateY(-3px); }
.tile-name { font-size: 13.5px; line-height: 1.35; font-weight: 500; }
.ico { width: 68px; height: 68px; border-radius: 17px; background: linear-gradient(180deg, var(--c1), var(--c2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.16), 0 10px 18px -10px var(--glow); display: flex; align-items: center; justify-content: center; color: #fff; transition: transform .2s ease; flex: 0 0 auto; }
.ico.md { width: 38px; height: 38px; border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.ico.sm { width: 26px; height: 26px; border-radius: 7px; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.18); }
.empty { padding: 48px 24px; text-align: center; border-radius: 24px; }
.empty p { margin: 0; }
.empty p + p { margin-top: 8px; color: var(--text2); }
.empty strong { font-size: 17px; }

.cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.pcard { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.pcard h3 { margin: 4px 0 0; font-size: 17px; font-weight: 600; }
.pcard p { margin: 0; color: var(--text2); font-size: 14.5px; }
.pico { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(180deg, var(--c1), var(--c2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 16px -8px var(--glow); color: #fff; display: flex; align-items: center; justify-content: center; }
.feature { padding: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; border-radius: 22px; }
.feature .f-text { flex: 1 1 320px; min-width: 0; }
.feature h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.feature p { margin: 6px 0 0; color: var(--text2); font-size: 14.5px; }
.btn-primary { min-height: 44px; padding: 0 20px; border-radius: 12px; border: 0; background: var(--accentBg); color: #fff; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; cursor: pointer; }

/* 광고 자리 (애드센스 설정 시에만 출력) */
.ad { margin: 44px 0 0; min-height: 100px; }
.ad-label { display: block; font-size: 11px; color: var(--text2); letter-spacing: .04em; margin-bottom: 6px; }
.sec .ad { margin-top: 0; }

/* 하단 */
.footer { position: relative; z-index: 1; margin-top: 64px; border-top: .5px solid var(--sep); }
.footer-in { max-width: 1240px; margin: 0 auto; padding: 20px 24px 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; font-size: 13px; color: var(--text2); }
.footer nav { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 -8px; }
.footer nav a { min-height: 44px; padding: 0 8px; display: flex; align-items: center; }
.footer nav a:hover { color: var(--text); }
.footer .strong { font-weight: 600; color: var(--text); }

/* 도구 화면: 맥 창 */
.tool-main { padding: 40px clamp(0px, 2vw, 24px) 0; }
.window { max-width: 1240px; margin: 0 auto; border-radius: 16px; overflow: hidden; background: var(--win); box-shadow: var(--shadow); }
.titlebar { min-height: 52px; padding: 4px 12px; display: flex; align-items: center; gap: 8px 12px; background: var(--bar); border-bottom: .5px solid var(--sep); }
.traffic { display: flex; gap: 8px; padding: 0 6px; }
.traffic span { width: 12px; height: 12px; border-radius: 6px; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.traffic .r { background: #FF5F57; } .traffic .y { background: #FEBC2E; } .traffic .g { background: #28C840; }
.titlebar .title { margin: 0; flex: 1 1 auto; min-width: 0; text-align: center; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titlebar .icon-btn { color: var(--text2); }
.win-body { display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: stretch; }
.content { flex: 999 1 560px; min-width: 0; background: var(--group); padding: 28px clamp(16px, 4vw, 48px) 56px; }
.sidebar { flex: 1 1 240px; background: var(--side); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-right: .5px solid var(--sep); padding: 16px 10px 24px; }
.side-sec { margin-bottom: 14px; }
.side-label { margin: 0; padding: 6px 10px 4px; font-size: 11.5px; font-weight: 600; color: var(--text2); letter-spacing: .02em; }
.side-list { list-style: none; margin: 0; padding: 0; }
.side-link { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 9px; font-size: 14px; }
.side-link:hover { background: var(--fill); }
.side-link[aria-current="page"] { background: var(--accentBg); color: #fff; }
.side-link .nm { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-all { color: var(--accent); font-weight: 500; gap: 4px; }
@media (max-width: 860px) {
  .tool-main { padding-top: 12px; }
  .window { border-radius: 0; }
  .sidebar { border-right: 0; border-top: .5px solid var(--sep); }
  .traffic { display: none; }
}

.crumbs { list-style: none; margin: 0 0 18px; padding: 0; font-size: 13px; color: var(--text2); display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--accent); }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--text2); }
.tool-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.tool-head .h-text { flex: 1 1 320px; min-width: 0; }
.tool-head h1 { margin: 0; font-size: clamp(26px, 3.4vw, 32px); line-height: 1.2; font-weight: 700; letter-spacing: -0.025em; }
.tool-head .lead { margin: 6px 0 0; color: var(--text2); font-size: 16px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.meta > span { font-size: 12.5px; padding: 4px 10px; border-radius: 7px; background: var(--fill); color: var(--text2); }
.tool-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px; align-items: flex-start; }
.tool-input { flex: 1 1 340px; min-width: 0; }
.tool-grid > .result { flex: 1 1 300px; min-width: 0; }
.tool-wide { flex: 1 1 100%; min-width: 0; }

/* 입력 묶음 */
.group-label { margin: 0 0 8px 4px; font-size: 13px; font-weight: 600; color: var(--text2); }
.group { background: var(--card); border-radius: 14px; border: .5px solid var(--sep); box-shadow: var(--cardShadow); overflow: hidden; }
.group + .group-label { margin-top: 20px; }
.group + .group { margin-top: 16px; }
.row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; min-height: 58px; padding: 8px 16px; }
.row > label, .row-text { font-size: 15px; flex: 1 1 120px; }
.row-text { display: flex; flex-direction: column; }
.row-text small { font-size: 12.5px; color: var(--text2); }
.sep { height: .5px; background: var(--sep); margin-left: 16px; }
.sep.wide { margin: 4px 0; }
.field { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: auto; }
.field input, .field select { width: 150px; max-width: 52vw; height: 42px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--fill); color: var(--text); font-size: 17px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; outline: none; -webkit-appearance: none; appearance: none; }
.field input[type="date"] { width: auto; min-width: 160px; text-align: left; font-size: 16px; }
.field input[data-num] { width: clamp(var(--minw, 150px), calc(var(--chars, 0) * 0.68em + 30px), 64vw); }
.calc-card .sentence input[data-num] { width: clamp(110px, calc(var(--chars, 0) * 0.68em + 30px), 70vw); }
.field select { text-align: left; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; cursor: pointer; }
.field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }
.unit { color: var(--text2); min-width: 30px; cursor: text; }
.won-hint { flex: 1 0 100%; margin: -2px 2px 2px 0; text-align: right; font-size: 12.5px; color: var(--text2); font-variant-numeric: tabular-nums; }
.won-hint:empty, .big-hint:empty { display: none; }
.big-hint { margin: -6px 0 0; font-size: 14px; color: var(--text2); font-variant-numeric: tabular-nums; }
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 50; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; padding: 10px 16px; border-radius: 12px; background: rgba(30,30,32,.86); color: #fff; font-size: 14px; font-weight: 500; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: opacity .2s, transform .2s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.hint { margin: 10px 4px 0; font-size: 13px; color: var(--text2); }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.quick button { min-height: 44px; padding: 0 14px; border: .5px solid var(--sep); border-radius: 22px; background: var(--card); color: var(--text); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.quick button:hover { background: var(--fill); }

.switch { position: relative; width: 60px; height: 44px; border: 0; padding: 0; background: transparent; cursor: pointer; flex: 0 0 auto; }
.switch::before { content: ""; position: absolute; left: 6px; top: 7px; width: 50px; height: 30px; border-radius: 15px; background: var(--fill2); transition: background .2s; }
.switch[aria-checked="true"]::before { background: var(--accentBg); }
.switch .knob { position: absolute; left: 8px; top: 9px; width: 26px; height: 26px; border-radius: 13px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25); transition: transform .2s; }
.switch[aria-checked="true"] .knob { transform: translateX(20px); }

.seg { display: flex; padding: 2px; border-radius: 10px; background: var(--fill); margin: 0 0 14px; }
.seg-btn { flex: 1 1 0; min-height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--text2); font-size: 14px; font-weight: 500; cursor: pointer; padding: 0 10px; }
.seg-btn[aria-pressed="true"] { background: var(--card); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.14); }

/* 결과 */
.result { padding: 24px; display: flex; flex-direction: column; gap: 12px; border-radius: 18px; }
.result-label { margin: 0; font-size: 13px; font-weight: 600; color: var(--text2); }
.big { margin: 0; font-size: clamp(34px, 4.5vw, 46px); line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.big .suf { font-size: .48em; font-weight: 600; margin-left: 4px; }
.big .pre { font-size: .62em; font-weight: 600; margin-right: 2px; }
.bar { height: 10px; border-radius: 5px; background: var(--fill); overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, #3D8BF0, #1559C4); transition: width .3s ease; }
.bar-legend { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text2); }
.kv { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 15px; }
.kv span { color: var(--text2); }
.kv strong { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.status { margin: 2px 0 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; font-weight: 500; }
.status:empty { display: none; }
.status.ok { color: var(--ok); }
.status.warn { color: var(--warn); }
.status svg { flex: 0 0 auto; margin-top: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.btn { min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--fill); color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { background: var(--fill2); }
.btn.ghost { font-weight: 500; }
.btn.primary { background: var(--accentBg); color: #fff; }
.privacy-note { margin: 20px 4px 0; display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text2); }

/* 도구별 부품 */
.calc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; flex: 1 1 100%; }
.calc-card { padding: 20px; border-radius: 18px; display: flex; flex-direction: column; gap: 12px; }
.calc-card h2 { margin: 0; font-size: 15px; font-weight: 600; }
.sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; }
.sentence input { width: 120px; height: 42px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--fill); font-size: 17px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; outline: none; }
.sentence input:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }
.answer { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.answer small { display: block; font-size: 13px; font-weight: 500; color: var(--text2); letter-spacing: 0; }
.textarea { width: 100%; min-height: 240px; padding: 16px 18px; border: .5px solid var(--sep); border-radius: 14px; background: var(--card); box-shadow: var(--cardShadow); color: var(--text); font-size: 16px; line-height: 1.7; resize: vertical; outline: none; }
.textarea:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.stat { padding: 14px 16px; border-radius: 14px; background: var(--card); border: .5px solid var(--sep); box-shadow: var(--cardShadow); }
.stat span { display: block; font-size: 12.5px; color: var(--text2); }
.stat strong { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat.main strong { color: var(--accent); }
.pw-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pw-item { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 12px; background: var(--fill); }
.pw-item code { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 18px; font-weight: 600; letter-spacing: .03em; overflow-wrap: anywhere; }
.range { width: 160px; accent-color: var(--accentBg); }

/* 본문 */
.article { max-width: 760px; margin-top: 52px; }
.article h2 { margin: 44px 0 12px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.article > h2:first-child { margin-top: 0; }
.article p { margin: 0 0 14px; }
.article ul, .article ol { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.article a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.article .muted { color: var(--text2); font-size: 14.5px; }
.article table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--card); border-radius: 12px; overflow: hidden; }
.article th, .article td { padding: 10px 12px; border-bottom: .5px solid var(--sep); text-align: left; }
.article th { font-weight: 600; color: var(--text2); font-size: 13px; }
.tscroll { overflow-x: auto; margin: 0 0 14px; border-radius: 12px; border: .5px solid var(--sep); }
.formula { padding: 18px 20px; border-radius: 14px; background: var(--card); border: .5px solid var(--sep); box-shadow: var(--cardShadow); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; margin: 0 0 14px; }
.faq { padding: 0 18px; border-radius: 14px; }
.faq details { border-bottom: .5px solid var(--sep); }
.faq details:last-child { border-bottom: 0; }
.faq summary { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-size: 16px; font-weight: 600; list-style: none; padding: 8px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq .chev { flex: 0 0 auto; color: var(--text2); transition: transform .2s; }
.faq details[open] .chev { transform: rotate(90deg); }
.faq p { margin: 0 0 16px; color: var(--text2); }
.note-box { margin-top: 28px; padding: 16px 18px; border-radius: 14px; background: var(--fill); font-size: 13.5px; color: var(--text2); }
.sources { font-size: 14px; }
.related { overflow: hidden; border-radius: 14px; }
.article .rel-link { display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 8px 16px; text-decoration: none; color: inherit; }
.rel-link:hover { background: var(--fill); }
.rel-link + .rel-link { border-top: .5px solid var(--sep); }
.rel-name { flex: 1 1 auto; font-size: 15px; }
.rel-link > svg { color: var(--text2); }

/* 문서 페이지 */
.doc-main { padding: 40px 16px 0; }
.doc { max-width: 860px; margin: 0 auto; padding: clamp(24px, 5vw, 56px); background: var(--win); border-radius: 20px; box-shadow: var(--shadow); }
.doc h1 { margin: 0 0 8px; font-size: clamp(26px, 3.4vw, 32px); line-height: 1.25; letter-spacing: -0.025em; }
.doc h2 { margin: 36px 0 10px; font-size: 19px; letter-spacing: -0.01em; }
.doc h3 { margin: 22px 0 8px; font-size: 16px; }
.doc p, .doc li { color: var(--text); }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin: 4px 0; }
.doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.doc .muted { color: var(--text2); }
.doc table { width: 100%; border-collapse: collapse; font-size: 14px; }
.doc th, .doc td { border: .5px solid var(--sep); padding: 9px 11px; text-align: left; vertical-align: top; }
.doc th { background: var(--fill); font-weight: 600; }
.doc .tscroll { border: 0; }

/* 기준 국가: <html data-region> 은 <head> 스크립트가 정합니다 (IP 미사용) */
html:not([data-region="US"]) [data-for-region="US"],
html[data-region="US"] [data-for-region="KR"] { display: none !important; }
.region-bar { margin-top: 24px; padding: 12px 14px 12px 16px; border-radius: 16px; display: flex; flex-direction: column; gap: 8px; }
.rb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.rb-label { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; }
.rb-label svg { color: var(--accent); }
.region-bar .seg { margin: 0; flex: 0 1 300px; }
html:not([data-region="US"]) .region-bar .seg-btn[data-value="KR"],
html[data-region="US"] .region-bar .seg-btn[data-value="US"] { background: var(--card); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.rb-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text2); }
.rb-auto { display: none; }
html[data-region-auto="1"] .rb-auto { display: inline; }
.region-notice { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--fill); background: color-mix(in srgb, var(--accentBg) 9%, var(--card)); border: .5px solid var(--sep); font-size: 14px; line-height: 1.65; }
.region-notice p { margin: 0; }
.region-notice a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.region-notice .btn { margin-top: 10px; min-height: 40px; font-size: 14px; }
.region-bar + .tool-grid, .region-notice + .tool-grid { margin-top: 18px; }
.row-wrap { display: block; }

/* 결과 아래 주의 문구 (모든 도구) */
.result-note { margin: 2px 0 0; display: flex; gap: 7px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--fill); font-size: 12.5px; line-height: 1.55; color: var(--text2); }
.result-note svg { flex: 0 0 auto; margin-top: 2px; }
.big .pre:empty, .big .suf:empty { display: none; }

/* 한 줄 안의 값 + 단위 선택 */
.field select.unit-select { width: auto; min-width: 92px; font-size: 15px; }
.field .swap { width: 42px; height: 42px; border: 0; border-radius: 9px; background: var(--fill); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.field .swap:hover { background: var(--fill2); }
.field .swap:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }

/* 상환 일정표·전체 단위표 */
.tool-grid > .wide-card { flex: 1 1 100%; min-width: 0; padding: 20px; border-radius: 18px; }
.wide-card h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.wide-card .tscroll { margin: 0; max-height: 420px; overflow: auto; }
.wide-card table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.wide-card th, .wide-card td { padding: 8px 12px; border-bottom: .5px solid var(--sep); text-align: right; white-space: nowrap; }
.wide-card th:first-child, .wide-card td:first-child { text-align: left; }
.wide-card thead th { position: sticky; top: 0; background: var(--card); font-weight: 600; color: var(--text2); font-size: 12.5px; }
.wide-card .more { margin-top: 10px; }
.unit-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.unit-list li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--fill); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.unit-list li span { color: var(--text2); }
.unit-list li strong { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.unit-list li[aria-current="true"] { outline: 2px solid var(--ring); }

/* 이미지 도구: 파일 넣는 곳 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.drop { position: relative; border-radius: 16px; border: 1.5px dashed var(--sep); background: var(--card); box-shadow: var(--cardShadow); transition: border-color .15s ease, background-color .15s ease; }
.drop:hover, .drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accentBg) 6%, var(--card)); }
.drop:focus-within { outline: 3px solid var(--ring); outline-offset: 2px; }
.drop-in { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 168px; padding: 24px 18px; text-align: center; cursor: pointer; }
.drop-in svg { color: var(--accent); }
.drop-in strong { font-size: 16px; font-weight: 600; }
.drop-in small { font-size: 13px; color: var(--text2); }
.file-list, .out-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.file-list:empty, .out-list:empty { display: none; }
.file-list li, .out-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 8px 8px 8px; border-radius: 14px; background: var(--card); border: .5px solid var(--sep); }
.out-list li { background: var(--fill); border: 0; }
.thumb { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--fill); display: block; }
.thumb.none { display: flex; align-items: center; justify-content: center; color: var(--text2); font-size: 11px; font-weight: 600; }
.f-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.f-name { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-sub { font-size: 12.5px; color: var(--text2); font-variant-numeric: tabular-nums; }
.f-sub .save { color: var(--ok); font-weight: 600; }
.f-sub .more { color: var(--warn); font-weight: 600; }
.f-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.f-tag { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--fill); color: var(--text2); }
.f-tag.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); font-weight: 600; }
.f-tag.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); font-weight: 600; }
.f-act { display: flex; gap: 4px; }
.f-act button, .f-act a { width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--text2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.f-act button:hover, .f-act a:hover { background: var(--fill); color: var(--text); }
.f-act button:disabled { opacity: .3; cursor: default; }
.f-act .dl { width: auto; padding: 0 12px; gap: 6px; background: var(--accentBg); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.f-act .dl:hover { background: var(--accentBg); color: #fff; filter: brightness(1.08); }
.run-row { margin-top: 18px; }
.btn.run { width: 100%; min-height: 52px; font-size: 16.5px; justify-content: center; }
.btn.run:disabled { opacity: .45; cursor: default; filter: grayscale(.3); }
.range-field { gap: 10px; }
.range-field .range { width: 150px; }
.range-field output { min-width: 46px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.field input[type="color"] { width: 64px; height: 42px; padding: 4px; border: 0; border-radius: 9px; background: var(--fill); cursor: pointer; }
.img-result .img-empty { margin: 0; font-size: 14px; color: var(--text2); }
.img-result .actions .btn svg { flex: 0 0 auto; }

/* 진행 창 (맥 시트 느낌): 처리하는 동안 링이 돌고, 끝나면 내려받기 버튼 */
dialog.sheet { width: min(380px, calc(100vw - 32px)); padding: 28px 24px 22px; border: .5px solid var(--sep); border-radius: 22px; background: var(--card); color: var(--text); box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12); text-align: center; }
dialog.sheet::backdrop { background: rgba(10, 14, 20, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.sheet[open] { animation: sheet-in .22s cubic-bezier(.2,.9,.3,1.2); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.pg-icon { position: relative; width: 56px; height: 56px; margin: 0 auto 14px; }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 4.5px solid var(--fill2); border-top-color: var(--accentBg); animation: spin .8s linear infinite; }
.pg-done, .pg-fail { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; border-radius: 50%; color: #fff; }
.pg-done { background: var(--ok); }
.pg-fail { background: var(--warn); }
dialog.sheet[data-state="done"] .ring, dialog.sheet[data-state="error"] .ring { display: none; }
dialog.sheet[data-state="done"] .pg-done { display: flex; animation: pop .3s cubic-bezier(.2,.9,.3,1.4); }
dialog.sheet[data-state="error"] .pg-fail { display: flex; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.pg-sub { margin: 6px 0 0; font-size: 14px; color: var(--text2); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pg-bar { margin: 16px 0 0; height: 6px; }
dialog.sheet[data-state="done"] .pg-bar, dialog.sheet[data-state="error"] .pg-bar { display: none; }
.pg-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.pg-actions .btn { justify-content: center; width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .ring { animation-duration: 2.4s; }
  dialog.sheet[open], dialog.sheet[data-state="done"] .pg-done { animation: none; }
}

@media (max-width: 600px) {
  body { font-size: 15.5px; }
  .hero { padding-top: 44px; }
  .sec { padding: 36px 16px 0; }
  .search input { height: 54px; font-size: 17px; }
  .search kbd { display: none; }
  .launch { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px; gap: 2px; }
  .tile { padding: 12px 4px 10px; gap: 8px; }
  .ico { width: 60px; height: 60px; border-radius: 15px; }
  .tile-name { font-size: 12.5px; }
  .lang-banner { padding: 0 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .lang-banner .lb { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; padding: 10px 6px 12px 14px; }
  .lang-banner .lb span { grid-area: 1 / 1; align-self: center; }
  .lang-banner .lb .icon-btn { grid-area: 1 / 2; }
  .lang-banner .lb a { grid-column: 1 / -1; justify-content: center; margin-right: 8px; }
  .footer-in { padding: 16px 16px 32px; }
  .field input, .field select { width: 118px; }
  .field input[data-num] { --minw: 118px; }
  .field input[type="date"] { min-width: 150px; }
  .field select.unit-select { width: auto; min-width: 84px; }
  .region-bar .seg { flex: 1 1 100%; }
  .drop-in { min-height: 140px; }
  .range-field .range { width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
/* 신규 도구: 기존 Daytool 카드·색상·입력 토큰으로 작업 공간 구성 */
.utility { min-width:0; display:flex; flex-direction:column; gap:18px }
.utility [hidden] { display:none!important }
.utility-panel { min-width:0; background:var(--card); border:1px solid var(--sep); border-radius:16px; padding:22px; box-shadow:0 2px 6px #00000004 }
.utility-panel h2 { font-size:18px; margin:0 0 20px; letter-spacing:-.02em }
.utility-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start }
.utility .textarea { width:100%; box-sizing:border-box; min-height:260px; border:1px solid var(--sep); box-shadow:none; border-radius:10px; resize:vertical; line-height:1.7; padding:14px; margin-bottom:8px }
.utility .group-label { display:block; font-size:13px; color:var(--text2); margin:12px 0 8px }
.utility .row { gap:12px; min-height:54px; padding:6px 0; border:0 }
.utility .field { min-width:0 }
.utility .field input,.utility .field select { max-width:100% }
.utility-options { display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center }
.utility-options>.row { flex:1 1 240px }
.utility-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:18px }
.utility .btn { margin:0; transition:background .16s ease,transform .16s ease; border-radius:10px; min-height:44px }
.utility .btn:not(:disabled):active { transform:translateY(1px) }
.utility :is(button,input,select,textarea,summary):focus-visible { outline:3px solid var(--ring); outline-offset:3px }
.utility-hint { font-size:13px; line-height:1.6; color:var(--text2); margin:8px 0 }
.utility-upload { position:relative; border:1px dashed var(--sep); border-radius:14px; padding:28px 20px; background:var(--card); text-align:center; overflow:hidden }
.utility-upload:focus-within,.utility-upload:hover { border-color:var(--accent); background:var(--group) }
.utility-upload label { display:flex; flex-direction:column; align-items:center; gap:10px; font-size:15px; cursor:pointer }
.utility-upload input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer }
.upload-symbol { display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:var(--fill); font-size:25px; color:var(--accent) }
#file-selection:empty { display:none }
.utility-output { overflow:auto; max-width:100%; border-radius:10px }
.utility-output:empty::before { content:'—'; display:block; padding:34px 8px; color:var(--text2); text-align:center }
.utility>.utility-output:empty { display:none }
.utility-output table { width:100%; border-collapse:collapse; font-size:14px; margin:0 }
.utility-output th { font-size:12px; font-weight:500; color:var(--text2); background:var(--group) }
.utility-output :is(th,td) { padding:13px 12px; text-align:start; border-bottom:1px solid var(--sep); overflow-wrap:anywhere }
.utility-output tbody tr:last-child td { border-bottom:0 }
.utility-output tbody tr { animation:utility-appear .26s ease both }
.utility-output tbody tr:nth-child(2) { animation-delay:35ms }
.utility-output tbody tr:nth-child(3) { animation-delay:70ms }
#utility-status { margin:0; font-size:14px; color:var(--text2); scroll-margin-top:90px }
#utility-status:empty { display:none }
.utility .result-note { margin:0 }
.utility .product-row { display:grid; grid-template-columns:1.2fr 1fr .7fr .9fr; gap:12px; border:0; border-top:1px solid var(--sep); border-radius:0; padding:16px 0; margin:12px 0 0; min-width:0 }
.product-row legend { font-size:13px; font-weight:650; padding-right:12px }
.utility .product-row .row { display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:0; min-width:0 }
.product-row label { font-size:12px; color:var(--text2) }
.utility .product-row .row>label,.coordinate-fields .row>label { flex:0 0 auto }
.utility .product-row .field,.coordinate-fields .field { width:100%; margin:0 }
.utility .product-row .field input,.utility .product-row .field select { width:100%; text-align:start }
.price-winner { display:grid; gap:6px; padding:0 0 20px; border-bottom:1px solid var(--sep); margin-bottom:10px }
.price-winner strong { font-size:clamp(24px,3vw,34px); letter-spacing:-.04em; color:var(--accent); line-height:1.3 }
.price-winner small { color:var(--text2) }
.utility-output tr.is-best { background:var(--fill) }
.bill-layout { display:grid; grid-template-columns:minmax(240px,.85fr) minmax(0,1.15fr); gap:18px; align-items:start }
.bill-settings .textarea { min-height:136px; height:136px }
.bill-total { width:100%; border:1px solid var(--sep); border-radius:10px; background:var(--group); color:var(--text); font:650 26px var(--font); padding:14px; box-sizing:border-box }
.bill-settings .row { flex-wrap:wrap }
.bill-stage .utility-actions { margin:16px 0 }
.bill-stage #reveal { width:100% }
.current-share { min-height:88px; display:flex; flex-direction:column; justify-content:center; gap:6px; text-align:center; overflow-wrap:anywhere }
.current-share:empty { display:none }
.current-share strong { font-size:28px; letter-spacing:-.035em; color:var(--accent) }
.current-share span { font-size:16px; font-weight:600 }
.game-visual { overflow:auto; max-height:480px; border-radius:10px; background:var(--group); scrollbar-width:thin }
.game-visual:empty { min-height:180px; background:repeating-linear-gradient(90deg,transparent,transparent 47px,var(--sep) 48px,transparent 49px); opacity:.45 }
.game-visual svg { display:block; margin:auto }
.game-visual .wheel-wrap { width:320px; max-width:100%; margin:16px auto; position:relative }
.wheel-wrap svg { max-width:100%; height:auto }
.wheel-pointer { position:absolute; z-index:1; left:50%; top:-6px; transform:translateX(-50%); color:var(--accent); font-size:22px }
.mask-stage { background:var(--group); border-radius:10px; overflow:auto; max-height:65vh; padding:16px; text-align:center }
.mask-stage canvas { max-width:100%; height:auto; touch-action:none; vertical-align:middle }
#mask-coordinates { margin:18px 0 }
#mask-coordinates summary { cursor:pointer; font-size:14px; padding:8px 0; color:var(--accent) }
.coordinate-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px }
.coordinate-fields .row { flex-direction:column; align-items:stretch }
.coordinate-fields .field input { width:100% }
.utility-example { border-left:3px solid var(--accent); padding:12px 18px; margin:20px 0; color:var(--text2); background:var(--fill); border-radius:0 10px 10px 0 }
@keyframes utility-appear { from { opacity:0; transform:translateY(5px) } to { opacity:1; transform:translateY(0) } }
@media(max-width:1050px) { .bill-layout { grid-template-columns:1fr } }
@media(max-width:700px) {
 .utility-columns { grid-template-columns:1fr }
 .utility-panel { padding:18px 16px }
 .utility .product-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
 .utility .textarea { min-height:200px }
 .bill-settings .textarea { min-height:130px }
 .coordinate-fields { grid-template-columns:repeat(2,minmax(0,1fr)) }
 .utility-actions>.btn { flex:1 1 auto }
 .utility-upload { padding:24px 16px }
 .utility-output :is(th,td) { padding:12px 8px }
 .content:has(.utility) .tool-head { gap:14px; align-items:center; flex-direction:row }
 .content:has(.utility) .tool-head>.ico { width:44px; height:44px; border-radius:12px; flex-shrink:0 }
 .content:has(.utility) .tool-head h1 { font-size:24px }
 .content:has(.utility) .meta { margin-bottom:22px }
 .content:has(.utility) .meta span:first-child { display:none }
}
@media(prefers-reduced-motion:reduce) { .utility *, .utility *::before { animation:none!important; transition:none!important; scroll-behavior:auto!important } }
.utility-output:empty::before { content:attr(data-empty); font-size:14px }

.utility button:disabled { opacity:.45; cursor:not-allowed }
.utility #utility-status { overflow-wrap:anywhere }
.mask-preview { background:repeating-conic-gradient(#aaa 0% 25%,#ddd 0% 50%) 50% / 20px 20px; margin:auto }
.wheel-center { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); display:grid; align-content:center; gap:3px; width:100px; height:100px; padding:8px; box-sizing:border-box; text-align:center; border-radius:50%; background:var(--card); border:1px solid var(--sep); box-shadow:var(--cardShadow); pointer-events:none; font-size:12px; overflow-wrap:anywhere }
.wheel-center strong { color:var(--accent); font-size:13px }
.utility-bill-game .utility-output tbody tr { animation:none }
.utility-bill-game .utility-output tr.is-current { background:var(--fill); font-weight:600; animation:utility-appear .24s ease both }
/* 술값 게임의 참여자 추가·삭제 */
.participant-entry { display:flex; align-items:center; gap:8px }
.participant-entry input { min-width:0; width:100%; height:44px; border:1px solid var(--sep); border-radius:10px; padding:0 12px; background:var(--group); color:var(--text); font:inherit }
.participant-entry .btn { flex-shrink:0 }
.participant-list { list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:12px 0 6px }
.participant-list li { display:inline-flex; align-items:center; gap:4px; min-width:0; max-width:100%; min-height:32px; border:1px solid var(--sep); border-radius:999px; padding:0 2px 0 10px; background:var(--group); font-size:14px; animation:utility-appear .2s ease both }
.participant-list li>span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
.participant-remove { flex:0 0 28px; width:28px; height:28px; border:0; border-radius:50%; background:transparent; color:var(--text2); font-size:20px; cursor:pointer; line-height:1 }
.participant-remove:hover { color:var(--text); background:var(--fill) }
.bill-increment { font-size:18px; padding:10px 14px }
#participant-error,#unit-feedback[data-error=true] { color:var(--warn) }
#participant-error:empty,#unit-feedback:empty { display:none }
.utility [aria-invalid=true] { border-color:var(--warn) }

/* 라운드의 금액 배정과 분리한 공개 순서 */
.reveal-order-panel { padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--sep) }
.order-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap }
.order-heading h3 { font-size:14px; margin:0 }
.utility .order-heading .btn { min-height:36px; font-size:13px; padding:6px 12px }
.reveal-order { display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:8px 0; max-height:150px; overflow:auto }
.reveal-order li { border:1px solid var(--sep); border-radius:999px; padding:4px 9px; max-width:100%; overflow-wrap:anywhere; font-size:12px; background:var(--group) }
.reveal-order li[aria-current=step] { border-color:var(--accent); color:var(--accent); font-weight:600 }
.reveal-order li.is-revealed { color:var(--text2) }
#shuffle-status:empty { display:none }
.reveal-order:focus-visible { outline:3px solid var(--ring); outline-offset:3px }

/* 친구 모임 도구: 한 작업 화면, 작은 이름 태그 */
.party{max-width:800px;margin-inline:auto}.party fieldset{border:0;padding:0;margin:0;min-width:0}.party legend{font-weight:600;margin-bottom:12px}.party label{display:block;margin:12px 0 6px}.party .participant-entry{display:flex;flex-wrap:wrap;align-items:end;gap:8px}.party .participant-entry label{width:100%;margin:0}.party .participant-entry input{flex:1;min-width:100px}.party .participant-entry .btn{flex:none}.party .input,.party select{width:100%;padding:12px;border:1px solid var(--sep);border-radius:10px;background:var(--group);color:var(--text);font:inherit}.party .party-consent{display:flex;align-items:center;gap:10px;margin:18px 0}.party input[type=checkbox],.party input[type=radio]{width:20px;height:20px;flex:none;accent-color:var(--accent)}.party-actions{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.party #start{margin-top:18px}.party #stage{border-top:1px solid var(--sep);padding-top:20px}.party #prompt{font-size:clamp(24px,5vw,36px);overflow-wrap:anywhere;margin:12px 0 24px}.party #play{margin:20px 0;overflow-wrap:anywhere}.party .vote-option{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--sep);padding:14px 0;cursor:pointer}.party-results{list-style:none;padding:0}.party-results li{padding:14px 0;border-bottom:1px solid var(--sep);overflow-wrap:anywhere;animation:utility-appear .2s ease}.party .score-row{display:grid;grid-template-columns:minmax(0,1fr) 50px 44px 44px;align-items:center;gap:8px;border-bottom:1px solid var(--sep);padding:12px 0}.score-row span{overflow-wrap:anywhere}.score-row strong{text-align:center;font-size:24px;font-variant-numeric:tabular-nums}.score-row .btn{padding:0;min-height:44px;font-size:24px}.party-signal{font-size:80px;text-align:center;color:var(--accent)}.party-signal.ended{color:var(--text);transform:scale(1.05)}.party #reset-confirm{border-top:1px solid var(--sep);padding:16px 0}.party #reset-confirm .btn{margin:4px}.photo-slots{list-style:none;display:grid;grid-template-columns:1fr 1fr;padding:0;gap:12px}.photo-slots li{min-width:0;background:var(--group);padding:10px;border-radius:12px;min-height:110px}.photo-slots span{display:block;margin-bottom:8px}.photo-slots canvas{width:100%;height:auto;border-radius:4px;display:block}.photo-slots .btn{padding:8px;font-size:12px;margin:6px 4px 0 0}.party video,.party #photo-preview{width:100%;max-height:600px;object-fit:contain;background:var(--group)}.party #photo-preview{display:block;margin-bottom:16px}.party #photos{max-width:100%;margin:8px 0 16px}.party :focus-visible{outline:3px solid var(--accent);outline-offset:3px}.party [hidden]{display:none!important}

.party{gap:12px}.party #stage{border:0;padding-top:0}.party #party-status:empty,.party #play:empty{display:none}.party #party-status{margin:4px 0}.party .textarea{min-height:120px}.party .participant-entry label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.party .score-row .btn{display:grid;place-items:center}.party .photo-slots,.party #photo-result{width:100%;max-width:560px;margin-inline:auto}.party .party-actions{margin:10px 0}
.party .photo-slots li{background:var(--card);border:1px solid var(--sep)}.party #photos::file-selector-button{border:0;border-radius:8px;background:var(--fill);color:var(--text);padding:10px 14px;margin-right:8px;cursor:pointer}.party #photos:disabled::file-selector-button{opacity:.45;cursor:not-allowed}

/* 공개 품질: 작은 화면 입력, 명확한 포커스와 복사 대안 */
.share-dialog{width:min(480px,calc(100% - 32px));border:1px solid var(--sep);border-radius:16px;background:var(--card);color:var(--text);padding:24px;box-shadow:var(--shadow)}.share-dialog::backdrop{background:#0006}.share-dialog label{display:block;font-size:14px;margin-bottom:8px}.share-dialog textarea{width:100%;min-height:90px;resize:vertical;border:1px solid var(--sep);border-radius:8px;background:var(--group);padding:12px;font-size:16px;color:var(--text);margin-bottom:16px}html{scroll-padding-top:90px}#tools{scroll-margin-top:90px}@media(max-width:600px){input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}}

@media(max-width:600px){.seg{flex-wrap:wrap;gap:2px}.seg-btn{flex:1 1 80px;min-width:0;min-height:44px;padding:6px 8px}}
/* Local workbenches: compact inputs, one clear result, no nested card decoration. */
.workbench{min-width:0}.workbench h2{font-size:17px;margin:12px 0}.wb-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}.wb-columns>section{min-width:0}.wb-field{display:flex;flex-direction:column;gap:7px;margin:12px 0;font-size:14px}.wb-field input,.wb-field textarea,.wb-field select{box-sizing:border-box;min-width:0;max-width:100%;width:100%;font:inherit;font-size:16px;color:inherit;border:1px solid var(--sep);border-radius:10px;background:var(--card,#fff);padding:11px}.wb-field input[type=range]{padding:8px 0}.wb-actions,.wb-inline{display:flex;align-items:end;flex-wrap:wrap;gap:8px;margin:14px 0}.wb-inline>.wb-field{flex:1;min-width:150px;margin:0}.workbench .btn{min-height:44px;white-space:normal}.wb-actions .btn:first-child:not(:disabled){color:var(--accent,#0672e8)}.wb-qr{display:grid;place-items:center;min-height:220px;border:1px dashed var(--sep);border-radius:14px;padding:16px;background:#fff}.wb-qr canvas{max-width:320px}.wb-tags{display:flex;flex-wrap:wrap;gap:6px;max-height:240px;overflow:auto}.wb-tag{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:2px 3px 2px 12px;border:1px solid var(--sep);border-radius:24px;overflow-wrap:anywhere;font-size:14px}.wb-tag button{border:0;background:transparent;color:inherit;min-width:36px;min-height:40px;font-size:20px;cursor:pointer}.wb-members{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0}.wb-members label{display:flex;align-items:center;min-height:44px;gap:6px;overflow-wrap:anywhere;max-width:100%}.workbench fieldset{border:0;padding:0;margin:16px 0;min-width:0}.wb-list{list-style:none;padding:0;margin:16px 0}.wb-expense,.wb-transfer{display:flex;gap:12px;justify-content:space-between;align-items:center;border-bottom:1px solid var(--sep);padding:14px 0;overflow-wrap:anywhere}.wb-expense>div{display:grid;gap:4px;min-width:0}.wb-expense span,.wb-expense small{font-size:13px;opacity:.75}.wb-expense .btn{flex-shrink:0}.wb-total{font-size:clamp(24px,4vw,34px);font-weight:700;letter-spacing:-.04em;margin:6px 0 24px;overflow-wrap:anywhere}.wb-results{border-left:1px solid var(--sep);padding-left:24px}.wb-transfer strong{font-size:17px;text-align:right}.wb-canvas{background:repeating-conic-gradient(#e7e8ea 0 25%,#fff 0 50%) 0/20px 20px;border-radius:12px;overflow:hidden;border:1px solid #bbb}.wb-canvas canvas{display:block;width:100%;height:auto;touch-action:none}.workbench #work-status{min-height:24px;font-size:14px;margin:12px 0;overflow-wrap:anywhere}.workbench [hidden]{display:none!important}.workbench button:focus-visible,.workbench input:focus-visible,.workbench select:focus-visible,.workbench textarea:focus-visible{outline:3px solid #4285ed;outline-offset:3px}
@media(max-width:700px){.wb-columns{grid-template-columns:1fr;gap:20px}.wb-results{border-left:0;border-top:1px solid var(--sep);padding:20px 0 0}.wb-transfer{flex-wrap:wrap}.wb-actions>.btn{flex:1}.wb-tag button{min-width:40px}}
@media(prefers-reduced-motion:no-preference){.wb-expense,.wb-transfer{animation:wb-appear .2s ease-out}@keyframes wb-appear{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}}