:root{--bg-gradient-start: #e8e8e8;--bg-gradient-end: #d0d0d0;--card-bg: #ffffff;--section-bg: #f8f8f8;--item-bg: #ffffff;--text-primary: #2a2a2a;--text-secondary: #6b6b6b;--primary-color: #4a4a4a;--accent-gradient-start: #6a6a6a;--accent-gradient-end: #4a4a4a;--border-color: #d4d4d4;--shadow-color: rgba(0, 0, 0, .08);--shadow-hover: rgba(0, 0, 0, .12);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);--shadow-md: 0 4px 8px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .12);--shadow-xl: 0 12px 24px rgba(0, 0, 0, .15);--input-bg: #ffffff;--input-border: #d4d4d4;--input-focus: #5a5a5a;--overlay-lightest: rgba(0, 0, 0, .05);--overlay-lighter: rgba(0, 0, 0, .08);--overlay-light: rgba(0, 0, 0, .1);--overlay-medium: rgba(0, 0, 0, .2);--overlay-strong: rgba(0, 0, 0, .3);--overlay-heavy: rgba(0, 0, 0, .5);--overlay-intense: rgba(0, 0, 0, .7);--overlay-opaque: rgba(0, 0, 0, .9);--highlight-subtle: rgba(255, 255, 255, .05);--highlight-soft: rgba(255, 255, 255, .1);--highlight-medium: rgba(255, 255, 255, .2);--highlight-strong: rgba(255, 255, 255, .3);--radius-xs: .125rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 50%;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--danger-color: #e74c3c;--danger-hover: #c0392b;--success-color: #27ae60;--warning-color: #faa61a;--info-color: #3498db;--accent-blue: #0071eb;--accent-green: #43b581;--rarity-ur: #e91e8c;--rarity-ur-light: #ffb3d9;--rarity-ur-bg: linear-gradient(135deg, #fdeebb, #ffc8b2, #ffb7c5, #dcb5ff, #fdeebb);--rarity-ur-text: #4a0028;--rarity-ssr: #ffd54f;--rarity-ssr-text: #5d4037;--rarity-sr: #ba68c8;--rarity-sr-text: #ffffff;--rarity-r: #6495ed;--rarity-r-text: #ffffff;--rarity-n: #b0bec5;--rarity-n-text: #37474f;--primary-alpha-10: rgba(0, 113, 235, .1);--primary-alpha-15: rgba(0, 113, 235, .15);--primary-alpha-20: rgba(0, 113, 235, .2);--primary-alpha-30: rgba(0, 113, 235, .3);--island-stamina: #3498db;--island-points: #9b59b6;--island-success: #2ecc71;--surface-card: #ffffff;--surface-elevated: #f5f5f5;--surface-border: #e0e0e0;--text-on-surface: #4a4a4a}body.dark-mode{--bg-gradient-start: #1a1a1a;--bg-gradient-end: #0a0a0a;--card-bg: #2a2a2a;--section-bg: #1f1f1f;--item-bg: #2a2a2a;--text-primary: #e8e8e8;--text-secondary: #a8a8a8;--primary-color: #c0c0c0;--accent-gradient-start: #5a5a5a;--accent-gradient-end: #3a3a3a;--border-color: #3a3a3a;--shadow-color: rgba(0, 0, 0, .4);--shadow-hover: rgba(0, 0, 0, .6);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 8px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .5);--shadow-xl: 0 12px 24px rgba(0, 0, 0, .6);--input-bg: #1f1f1f;--input-border: #3a3a3a;--input-focus: #6a6a6a;--danger-color: #e74c3c;--danger-hover: #c0392b;--success-color: #27ae60;--warning-color: #faa61a;--info-color: #3498db;--accent-blue: #7289da;--accent-green: #43b581;--rarity-ur: #e91e8c;--rarity-ur-light: #ffb3d9;--rarity-ur-bg: linear-gradient(135deg, #fdeebb, #ffc8b2, #ffb7c5, #dcb5ff, #fdeebb);--rarity-ur-text: #4a0028;--rarity-ssr: #ffd54f;--rarity-ssr-text: #5d4037;--rarity-sr: #ba68c8;--rarity-sr-text: #ffffff;--rarity-r: #6495ed;--rarity-r-text: #ffffff;--rarity-n: #b0bec5;--rarity-n-text: #37474f;--primary-alpha-10: rgba(114, 137, 218, .1);--primary-alpha-15: rgba(114, 137, 218, .15);--primary-alpha-20: rgba(114, 137, 218, .2);--primary-alpha-30: rgba(114, 137, 218, .3);--island-stamina: #3498db;--island-points: #9b59b6;--island-success: #2ecc71;--surface-card: #2f3136;--surface-elevated: #3d4148;--surface-border: #4f545c;--text-on-surface: #b9bbbe}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);color:#eaeaea;min-height:100vh;overflow-x:hidden}h1{text-align:center;padding:2rem 1rem 1rem;font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 4px 12px rgba(102,126,234,.3)}#simulation-wrapper{display:flex;flex-direction:column;gap:20px;width:100%;max-width:1800px;margin:0 auto;padding:0 1rem 2rem}#simulation-container{width:100%;height:auto;aspect-ratio:170 / 50;background:linear-gradient(180deg,#0a0e27,#1a1a2e);border:2px solid rgba(102,126,234,.3);border-radius:16px;position:relative;overflow:hidden;box-shadow:0 8px 32px #0006,inset 0 1px #ffffff1a}.ocean-background{z-index:0!important;pointer-events:none!important}#player-area{position:absolute;background-color:#465a7826;height:auto;z-index:1;pointer-events:none;border-right:1px dashed rgba(102,126,234,.2)}#vanguard,#mainfleet,#enemy{position:absolute;height:auto;z-index:10;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}#vanguard{aspect-ratio:226 / 178}#mainfleet{aspect-ratio:253 / 195}#enemy{aspect-ratio:300 / 369}#vanguard img,#mainfleet img,#enemy img{width:100%;height:100%;object-fit:contain}.bullet{background:linear-gradient(135deg,#ffd93d,#fcbf49);position:absolute;border-radius:2px;box-shadow:0 0 12px #ffd93d,0 0 24px #ffd93d80;z-index:5}#visual-log{position:absolute;bottom:8px;left:8px;color:#fff;font-family:Courier New,monospace;font-size:13px;pointer-events:none;text-shadow:2px 2px 4px rgba(0,0,0,.8);z-index:1000;opacity:.9;background:var(--overlay-strong);padding:8px 12px;border-radius:6px;backdrop-filter:blur(4px)}.controls{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 auto;padding:20px;background:linear-gradient(135deg,#2a3031cc,#1a2022cc);border-radius:16px;border:2px solid rgba(102,126,234,.2);max-width:1800px;width:100%;flex-wrap:wrap;backdrop-filter:blur(10px);box-shadow:0 4px 16px #0003;order:2;position:relative;z-index:20}.controls label{font-weight:500;color:#a2d2ff;font-size:15px}.control-group{display:flex;align-items:center;gap:8px;width:100%;max-width:600px}button{height:48px;padding:0 28px;font-size:16px;font-weight:600;cursor:pointer;border:none;border-radius:10px;transition:all var(--transition-slow);position:relative;overflow:hidden;text-transform:uppercase;letter-spacing:.5px}button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:var(--highlight-medium);transform:translate(-50%,-50%);transition:width .6s,height .6s}button:hover:before{width:300px;height:300px}button:active{transform:scale(.95)}#fire-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 16px #667eea66;position:relative;z-index:1001}#fire-button:hover{box-shadow:0 6px 24px #667eea99;transform:translateY(-2px)}#enemy-toggle{background:linear-gradient(135deg,#00b894,#00cec9);color:#fff;box-shadow:0 4px 16px #00b89466;position:relative;z-index:1001}#enemy-toggle:hover{box-shadow:0 6px 24px #00b89499;transform:translateY(-2px)}#enemy-toggle.centered{background:linear-gradient(135deg,#fdcb6e,#e17055);box-shadow:0 4px 16px #fdcb6e66}#enemy-toggle.centered:hover{box-shadow:0 6px 24px #fdcb6e99}#stats-panel{width:100%;max-width:1200px;margin:0 auto;padding:24px;background:linear-gradient(135deg,#2a3031f2,#1a2022f2);border:2px solid rgba(102,126,234,.3);border-radius:16px;backdrop-filter:blur(10px);box-shadow:0 8px 32px #0000004d;order:3}#stats-panel h2{margin:0 0 20px;text-align:center;font-size:1.8rem;font-weight:600;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}#stats-content{display:flex;flex-direction:column;gap:12px}.stats-two-column{display:grid;grid-template-columns:300px 1fr;gap:24px;margin:16px 0}.stats-column-left{display:flex;flex-direction:column;align-items:center;gap:16px}.stats-column-right{display:flex;flex-direction:column;gap:12px}#stats-content p{margin:0;padding:8px 12px;background:var(--highlight-subtle);border-radius:8px;border-left:3px solid rgba(102,126,234,.5);transition:all var(--transition-slow)}#stats-content p:hover{background:var(--highlight-subtle);border-left-color:#667eea;transform:translate(4px)}#stats-content strong{color:#a2d2ff;font-weight:600;margin-right:8px}#stats-content hr{border:none;height:2px;background:linear-gradient(90deg,transparent,rgba(102,126,234,.3),transparent);margin:16px 0;grid-column:1 / -1}.shipgirl-info-card{display:flex;flex-direction:column;align-items:center;gap:20px;padding:24px;background:linear-gradient(135deg,#667eea26,#764ba226);border-radius:16px;cursor:pointer;transition:all var(--transition-slow);border:2px solid rgba(102,126,234,.3);width:100%}.shipgirl-info-card:hover{background:linear-gradient(135deg,#667eea40,#764ba240);border-color:#667eea99;transform:translateY(-4px);box-shadow:0 8px 24px #667eea66}.shipgirl-name-large{font-size:1.8rem;font-weight:700;color:#fff;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.3)}.shipyard-icon-large{height:48px;width:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}.more-info-text{font-size:1rem;opacity:.8;color:#a2d2ff;font-weight:500}.shipgirl-info-card:hover .more-info-text{opacity:1;transform:translate(4px)}.skill-icon-container{text-align:center}.skill-icon-container img{max-width:96px;max-height:96px;border-radius:16px;border:3px solid rgba(102,126,234,.5);box-shadow:0 6px 20px #0006;transition:all var(--transition-slow)}.skill-icon-container img:hover{transform:scale(1.08);border-color:#667eea;box-shadow:0 8px 32px #667eea99}#level-toggle{width:100%;padding:14px 24px;font-size:17px;font-weight:700;border-radius:12px;background:linear-gradient(135deg,#4a5568,#2d3748);color:#fff;border:2px solid var(--highlight-soft);box-shadow:0 4px 12px #0000004d;transition:all var(--transition-slow);position:relative;overflow:hidden}#level-toggle:after{content:"◀ 클릭하여 변경 ▶";display:block;font-size:12px;font-weight:400;margin-top:4px;opacity:.7;text-transform:none;letter-spacing:normal}#level-toggle:hover{background:linear-gradient(135deg,#5a6778,#3d4858);border-color:var(--highlight-medium);box-shadow:0 6px 20px #0006;transform:translateY(-2px)}#level-toggle.level-10{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea4d;box-shadow:0 4px 12px #667eea66}#level-toggle.level-10:hover{background:linear-gradient(135deg,#7a8efc,#8a5bba);border-color:#667eea80;box-shadow:0 6px 20px #667eea99}.choices{width:100%;max-width:600px}.choices__inner{background:linear-gradient(135deg,#3b4245cc,#2d3436cc);border:2px solid rgba(102,126,234,.3);color:#eaeaea;border-radius:10px;padding:1 16px;font-size:16px;height:48px;transition:all var(--transition-slow);backdrop-filter:blur(10px);display:flex;align-items:center}.choices__inner:hover{border-color:#667eea80}.choices.is-focused .choices__inner{border-color:#667eea;box-shadow:0 0 0 3px #667eea33}.choices__list--dropdown,.choices__list[aria-expanded]{background:linear-gradient(135deg,#2a3031fa,#1a2022fa);border:2px solid rgba(102,126,234,.3);border-radius:10px;margin-top:4px;backdrop-filter:blur(10px);box-shadow:0 8px 24px #0006;z-index:1002}.choices__list--dropdown .choices__item--selectable.is-highlighted,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted{background:linear-gradient(135deg,#667eea,#764ba2)}.choices__item{color:#eaeaea;padding:10px 16px}.choices__input{background-color:#49515580;color:#eaeaea;border-radius:6px;padding:8px}.choices[data-type*=select-one]:after{border-color:#eaeaea transparent transparent;margin-top:-2px}.choices[data-type*=select-one].is-open:after{border-color:transparent transparent #eaeaea;margin-top:-7.5px}@media (max-width: 1200px){h1{font-size:2rem}#stats-panel{padding:20px}.stats-two-column{grid-template-columns:250px 1fr;gap:20px}}@media (max-width: 768px){h1{font-size:1.6rem;padding:1.5rem 1rem .5rem}.controls{flex-direction:column;gap:12px}#simulation-container{border-radius:12px}#stats-panel{padding:16px}.stats-two-column{grid-template-columns:1fr;gap:16px}.shipgirl-name-large{font-size:1.4rem}.shipyard-icon-large{height:36px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}#stats-panel,#simulation-container{animation:fadeIn .5s ease-out}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#1a1a2e80;border-radius:10px}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#7a8efc,#8a5bba)}