:root {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #493d32;
  background: #183b43;
  font-synthesis: none;
  --ink: #493d32;
  --muted: #806f5d;
  --teal: #234d56;
  --teal-dark: #173943;
  --teal-line: #48717a;
  --gold: #bc985b;
  --gold-light: #e2c789;
  --paper: #fbf7e9;
  --paper-dark: #eee3c9;
  --line: #d3c39f;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 50% -100px,#3b6570 0,#1d454e 38%,#15343d 100%); }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #b87837; outline-offset: 3px; }
a { color: var(--teal); }

.page-shell { width: min(100%, 820px); min-height: 100vh; margin: auto; padding: 0 16px 128px; }
.topbar { min-height: 70px; display: flex; align-items: center; gap: 10px; }
.brand-icon { width: 42px; height: 42px; flex: none; border: 1px solid #e2c789; border-radius: 11px; object-fit: cover; box-shadow: 0 2px 5px #0a252b80; }
.topbar h1 { margin: 0; color: #fff7df; font-size: 20px; font-weight: 650; letter-spacing: -.025em; text-shadow: 0 1px 2px #102b30; }
.layout { display: grid; gap: 16px; padding-top: 20px; }
.panel { padding: 22px; border: 2px solid var(--gold); border-radius: 15px; background: radial-gradient(circle at 100% 0,#fffdf4 0,transparent 50%),linear-gradient(135deg,#fffdf4,var(--paper) 55%,#f6efdd); box-shadow: inset 0 0 0 3px #fffaf0,inset 0 0 0 4px #dfd0ac,0 6px 20px #071d2370; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-heading h2 { margin: 0; color: #574735; font-size: 20px; font-weight: 650; letter-spacing: -.025em; }
.count-badge { padding: 4px 9px; border: 1px solid #c9ad72; border-radius: 999px; background: #efe1ba; color: #695033; font-size: 12px; font-weight: 600; }

.slots { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin-top: 21px; }
.slot-item { min-width: 0; display: grid; gap: 6px; }
.slot-box { position: relative; min-width: 0; }
.slot { width: 100%; min-width: 0; min-height: 76px; padding: 8px 4px; display: flex; align-items: center; justify-content: center; border: 1px solid #a9a182; border-radius: 9px; background: linear-gradient(#fffdf3,#eae2ca); color: #847665; text-align: center; box-shadow: inset 0 1px #fff,0 2px 3px #745f3822; }
.slot:hover, .slot:focus-visible { border-color: #8a6b37; background: #fff3d4; }
.slot.is-filled { padding-top: 24px; border-color: #aa7f3d; background: linear-gradient(#fff3cd,#f3e0ac); color: #523f2c; box-shadow: inset 0 0 0 2px #fff8e0,0 2px 5px #7b5b332e; }
.slot-number { color: #806438; font-size: 13px; font-weight: 650; text-align: center; }
.slot-remove { position: absolute; top: 3px; right: 3px; width: 25px; height: 25px; padding: 0; border: 1px solid #c6aa79; border-radius: 5px; background: #fff9e9; color: #8d5544; font-size: 19px; line-height: 1; }
.slot-remove:hover { background: #f3d6c4; }
.slot-name { display: -webkit-box; max-width: 100%; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; line-height: 1.2; font-size: 13px; font-weight: 600; }

.rules { margin-top: 12px; }
.rules ul { margin: 0; padding-left: 18px; color: #6f6252; font-size: 12.5px; line-height: 1.4; }
.rules li { margin: 2px 0; }
.rules li::marker { color: #ab8547; }
.fusion-button { min-height: 39px; padding: 3px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #e6cc91; border-radius: 8px; background: linear-gradient(#fff4d3,#e9cb89); color: #4a3829; box-shadow: inset 0 1px #fffaf0,0 2px 0 #886c3e; font-size: 12px; font-weight: 650; white-space: nowrap; }
.fusion-button img { width: 30px; height: 28px; object-fit: contain; }
.fusion-button:hover { background: linear-gradient(#fff9e9,#f1d699); }

.results { scroll-margin-top: 16px; }
.partial-note { margin-top: 16px; padding: 13px 14px; border: 1px solid #c7a170; border-radius: 8px; background: #f5e7cf; color: #765547; }
.partial-note strong { color: #795131; font-size: 14px; font-weight: 650; }
.partial-note p { margin: 5px 0 0; font-size: 12px; line-height: 1.5; }
.summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 18px; }
.total-card, .summary-card { min-height: 64px; padding: 11px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #c9b995; border-radius: 8px; background: #fff9e9; box-shadow: inset 0 1px #fff; }
.total-card { grid-column: 1 / -1; min-height: 68px; flex-direction: row; align-items: center; border-color: #6b8790; background: linear-gradient(#3e6973,#244b55); color: #fff7df; }
.total-card span { color: #f6e9ca; }
.total-card strong { color: #fff4c9; font-size: 29px; font-weight: 650; }
.total-card small { margin-left: 3px; font-size: 12px; }
.summary-card span { color: #806d55; font-size: 11px; font-weight: 550; }
.summary-card strong { color: var(--teal); font-size: 21px; font-weight: 650; }
.filters { display: flex; gap: 7px; overflow: auto; margin-top: 18px; padding-bottom: 4px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filter { flex: none; min-height: 36px; padding: 0 12px; border: 1px solid #bfae87; border-radius: 7px; background: #f6edda; color: #685b4b; font-size: 12px; font-weight: 550; }
.filter.is-active { border-color: #28545e; background: linear-gradient(#416d77,#234d57); color: #fff9e9; }
.combo-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 10px; }
.combo-card { min-width: 0; padding: 13px; border: 1px solid #c9b997; border-radius: 9px; background: #fffaf0; }
.combo-card-title { display: flex; align-items: center; gap: 9px; color: #866541; font-size: 12px; }
.combo-card-title strong { font-weight: 650; }
.combo-card-title span { color: #9b8a72; font-size: 11px; }
.combo-path { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 10px; line-height: 1.5; }
.combo-step { padding: 4px 7px; border: 1px solid #c4c8b9; border-radius: 5px; background: #e8efec; color: #2e5157; font-size: 12px; font-weight: 550; }
.combo-step.is-start { border-color: #bd9955; background: #f5e2ae; color: #64492e; }
.path-arrow { color: #a07f48; }
.no-combos { grid-column: 1 / -1; padding: 25px 8px; color: var(--muted); text-align: center; }
.loading-state, .error-state { min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--muted); text-align: center; }
.loading-state strong, .error-state strong { color: var(--ink); font-weight: 650; }
.loading-state p, .error-state p { margin: 0; font-size: 12px; }
.spinner { width: 28px; height: 28px; margin-bottom: 6px; border: 3px solid #d7bb7544; border-top-color: #a77835; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.picker, .fusion-dialog { max-width: none; max-height: none; padding: 0; border: 2px solid #a88950; border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 3px #fff9e9,0 24px 70px #061a1ec2; }
.picker::backdrop, .fusion-dialog::backdrop { background: #102b31bc; backdrop-filter: blur(3px); }
.picker:not([open]), .fusion-dialog:not([open]) { display: none; }
.picker { width: min(520px,calc(100vw - 28px)); height: min(650px,calc(100dvh - 28px)); margin: auto; }
.picker-shell, .fusion-shell { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.picker-handle { display: none; }
.picker-header, .fusion-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 18px 13px; }
.picker-header h2, .fusion-header h2 { margin: 0; color: #594836; font-size: 20px; font-weight: 650; letter-spacing: -.025em; }
.picker-actions { display: flex; align-items: center; gap: 7px; }
.clear-slot { min-height: 36px; padding: 0 9px; border: 0; background: transparent; color: #8a6250; font-size: 12px; font-weight: 550; }
.icon-button { width: 38px; height: 38px; border: 1px solid #bba679; border-radius: 7px; background: #f4e8cf; color: #624d35; font-size: 23px; line-height: 1; }
.search-box, .fusion-search { min-height: 50px; margin: 0 18px; padding: 0 12px; display: flex; align-items: center; gap: 9px; border: 1px solid #a4916e; border-radius: 8px; background: #fffcf2; color: #a2783c; }
.search-box > span, .fusion-search > span { font-size: 24px; }
.search-box input, .fusion-search input { min-width: 0; flex: 1; border: 0; outline: none; background: transparent; color: var(--ink); font-size: 16px; }
.search-box input::placeholder, .fusion-search input::placeholder { color: #9c8d79; }
.picker-meta { padding: 11px 18px 8px; color: var(--muted); font-size: 12px; }
.general-list { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 12px 12px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; align-content: start; }
.general-option { width: 100%; min-height: 58px; padding: 7px 8px; display: flex; align-items: center; justify-content: center; border: 1px solid #c8b992; border-radius: 8px; background: #fffaf0; color: #4c4033; text-align: center; }
.general-option:not(:disabled):hover, .general-option:not(:disabled):focus-visible { border-color: #967244; background: #f7e8c7; }
.general-option:disabled { opacity: .42; }
.general-option.is-current { border-color: #a67f48; background: #f2dfb5; }
.general-name { font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.general-name mark { background: #f1d585; color: #4b382a; }
.no-match { grid-column: 1 / -1; padding: 25px 8px; color: var(--muted); text-align: center; font-size: 13px; }

.fusion-dialog { width: min(850px,calc(100vw - 28px)); height: min(750px,calc(100dvh - 28px)); margin: auto; }
.fusion-list { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 12px 18px; display: grid; grid-template-columns: minmax(0,1fr); gap: 7px; align-content: start; }
.fusion-card { min-width: 0; border: 1px solid #cbbb99; border-radius: 9px; background: #fffaf0; }
.fusion-card-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 9px 10px 5px; }
.fusion-card h3 { margin: 0; color: #674a34; font-size: 14px; font-weight: 650; }
.fusion-members { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 10px; }
.fusion-member { min-height: 26px; padding: 3px 6px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid #bdad8d; border-radius: 4px; background: #f7efdd; color: #514536; font-size: 11px; font-weight: 550; }
.fusion-member.is-picked { border-color: #9e773f; background: #f4e0ae; color: #533b29; }
.fusion-member.is-search-match { border-color: #a7742e; background: #f2d38a; color: #4a3423; box-shadow: inset 0 0 0 1px #a7742e; }
.fusion-member.is-search-match::before { content: "✓"; color: #785025; font-weight: 700; }
.fusion-member.is-generic { border-style: dashed; background: #f3ebd8; }
.faction-badge { padding: 2px 5px; border-radius: 4px; color: #fff; box-shadow: 0 1px 1px #543d3440,inset 0 1px #ffffff52; font-size: 9px; font-weight: 650; line-height: 1.1; text-shadow: 0 1px 1px #15313b; }
.faction-촉 { background: linear-gradient(#61a64d,#2e6c32); }
.faction-위 { background: linear-gradient(#45b8e4,#216b9d); }
.faction-오 { background: linear-gradient(#e98c72,#ba454a); }
.faction-군웅 { background: linear-gradient(#586c72,#273e48); }
.faction-시공 { background: linear-gradient(#ae7bc9,#6b468e); }
.fusion-empty { grid-column: 1 / -1; padding: 30px 10px; color: var(--muted); text-align: center; font-size: 13px; }

.fusion-page .fusion-search { margin: 16px 0 0; }
.fusion-page .fusion-list { overflow: visible; padding: 14px 0 0; }
.placeholder-page { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.placeholder-art { width: 96px; height: 96px; object-fit: contain; }
.placeholder-page h2 { margin: 13px 0 4px; color: #574735; font-size: 22px; font-weight: 650; }
.placeholder-page p { margin: 0; color: var(--muted); font-size: 14px; }

.bottom-nav { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; width: min(100%,820px); margin: auto; border: 2px solid #ad8958; border-bottom: 0; border-radius: 18px 18px 0 0; background: radial-gradient(circle at 50% -20px,#3c6870,#17424b 65%,#12353d); box-shadow: inset 0 3px 0 #6a8e90,0 -5px 22px #091e2680; }
.bottom-nav-links { min-height: 84px; padding: 4px 7px calc(4px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); align-items: end; gap: 3px; }
.bottom-nav-link { min-width: 0; min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border: 1px solid transparent; border-radius: 10px; color: #f6edd5; text-decoration: none; text-shadow: 0 1px 2px #0b2a30; }
.bottom-nav-link:hover { background: #ffffff18; }
.bottom-nav-link.is-active { min-height: 76px; margin: -4px 0 calc(-4px - env(safe-area-inset-bottom)); border-color: #e5cc91; border-bottom: 0; border-radius: 10px 10px 0 0; background: linear-gradient(#fff2cb,#e8ca86); color: #4b3a2b; box-shadow: inset 0 1px #fff9e5,0 2px 4px #09262e6b; text-shadow: none; }
.nav-icon { width: 54px; height: 52px; display: flex; align-items: center; justify-content: center; }
.nav-icon img { width: 54px; height: 52px; object-fit: contain; }
.nav-icon-generals img { width: 47px; }
.nav-icon-fusion img { height: 45px; }
.nav-label { font-size: 14px; font-weight: 650; white-space: nowrap; }

@media (max-width: 699px) {
  .page-shell { padding: 0 12px 124px; }
  .topbar { min-height: 62px; padding: 8px 0; }
  .brand-icon { width: 40px; height: 40px; border-radius: 10px; }
  .topbar h1 { font-size: 18px; }
  .layout { gap: 12px; padding-top: 13px; }
  .panel { padding: 16px; border-radius: 11px; }
  .slots { gap: 5px; margin-top: 17px; }
  .slot { min-height: 70px; }
  .slot-name { font-size: 12px; }
  .rules { margin-top: 10px; }
  .rules ul { font-size: 12px; }
  .combo-list { grid-template-columns: 1fr; }
  .picker, .fusion-dialog { position: fixed; inset: auto 0 0; width: 100%; height: min(82dvh,700px); margin: 0; border-radius: 15px 15px 0 0; border-bottom: 0; }
  .picker-shell, .fusion-shell { padding-bottom: env(safe-area-inset-bottom); }
  .picker-handle { display: block; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 4px; background: #9b865d; }
  .general-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fusion-dialog { height: min(90dvh,800px); }
  .fusion-list { padding: 12px 12px 10px; }
  .bottom-nav-links { min-height: 81px; padding-inline: 3px; gap: 1px; }
  .bottom-nav-link { min-height: 69px; }
  .bottom-nav-link.is-active { min-height: 73px; }
  .nav-icon { width: 49px; height: 49px; }
  .nav-icon img { width: 49px; height: 49px; }
  .nav-icon-generals img { width: 44px; }
  .nav-icon-fusion img { height: 42px; }
}
@media (max-width: 360px) {
  .page-shell { padding-inline: 9px; }
  .panel { padding-inline: 12px; }
  .slots { gap: 6px; }
  .slot-name { font-size: 11px; }
}