:root{
  --bg:#f7f7f9;
  --card:#fff;
  --muted:#676e7c;
  --accent:#3b82f6;
  --border:#eeeeee;
  font-family: 'Noto Sans KR', system-ui, sans-serif;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:#111;}
table{border-collapse:collapse}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:24px 5vw 16px;border-bottom:1px solid var(--border);background:#fff;position:sticky;top:0;z-index:10;}
.site-header h1{margin:0;font-size:2rem;}
.site-header .eyebrow{margin:0;font-size:.85rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);}
.site-header .header-note{margin:0;font-size:.95rem;color:var(--muted);}
.tabs{display:flex;overflow-x:auto;gap:6px;padding:12px 5vw 12px;background:#fff;border-bottom:1px solid var(--border);margin:0;flex-wrap:nowrap;}
.tab{background:#fff;border:1px solid transparent;border-radius:999px;padding:10px 16px;font-size:.9rem;color:var(--muted);cursor:pointer;transition:.2s;white-space:nowrap;}
.tab.active{border-color:var(--accent);color:#0f172a;background:rgba(59,130,246,.1);}
.content{padding:20px 5vw 40px;}
.panel{background:var(--card);border-radius:16px;padding:24px;margin-top:20px;box-shadow:0 14px 40px rgba(15,23,42,.08);}
.panel-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px;}
.panel-head .panel-controls{margin-left:auto;justify-content:flex-end;}
.panel-head h2{margin:4px 0 0;font-size:1.4rem;}
.eyebrow{margin:0;font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);}
.panel-controls{display:flex;gap:12px;align-items:center;}
.panel-controls label{display:flex;flex-direction:column;font-size:.75rem;color:var(--muted);}
.panel-controls input{margin-top:4px;border:1px solid var(--border);border-radius:8px;padding:6px 8px;background:#fff;}
.panel-controls .primary{border:none;background:var(--accent);color:#fff;font-weight:600;box-shadow:0 8px 16px rgba(59,130,246,.25);}
.panel-controls select,
.panel-controls button.primary{
  height:36px;
  display:flex;
  align-items:center;
  padding:0 16px;
}
.panel-controls button#syncButton,
.panel-controls button#finalEntryButton{
  border-radius:10px;
  background:#f4f5f7;
  color:#1f2937;
  border:1px solid #d9d9d9;
  box-shadow:none;
}
.panel-controls button#syncButton:hover,
.panel-controls button#finalEntryButton:hover{
  background:#e5e7eb;
}
.panel-controls button#finalEntryButton{
  margin-left:auto;
}
.panel-controls button.primary.neutral,
button.primary.neutral{
  background:#f4f5f7;
  border:1px solid var(--border);
  color:#111;
  box-shadow:none;
}
.panel-controls button.primary.neutral:hover,
button.primary.neutral:hover{
  background:#e5e7eb;
}
.panel-controls select{
  border-radius:8px;
  border:1px solid var(--border);
  background:#fff;
}
.status{font-size:.9rem;}
.muted{color:var(--muted);}
.hint{margin:4px 0 0;font-size:.75rem;color:var(--muted);}
.status.muted{color:var(--muted);margin-bottom:8px;}
.final-block:not(:last-child) {
  margin-bottom:40px;
}
.final-meta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:12px;}
.final-meta h3{margin:0;font-size:1.2rem;}
.log-buttons{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.final-log-btn{background:#e5e7eb;border:1px solid var(--border);border-radius:8px;padding:6px 14px;font-size:.85rem;font-weight:600;color:#111;cursor:pointer;transition:.2s;}
.final-log-btn:hover{background:#d4d4d8;}
.team-league-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}
.team-league-column{display:flex;flex-direction:column;gap:16px;}
.team-league-history{
  display:flex;
  flex-direction:column;
}
.team-league-card {
  padding: 20px 10px;
}
.team-league-card:not(:last-child) {
  border-bottom:1px solid var(--border);
}
.team-league-card-teams{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
  align-items:stretch;
}
.team-league-player-list{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow-y:auto;padding-right:4px;}
.team-league-player{align-items:center;gap:6px;padding:6px 8px;border-radius:8px;border:1px solid #e5e7eb;background:#f9fafb;}
.team-league-player span{font-size:.9rem;color:#111;}
.team-league-games{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:16px;
  max-height:420px;
  overflow:auto;
  padding-right:4px;
  flex:1 1 auto;
}
.team-league-game{border:1px solid var(--border);border-radius:20px;padding:16px;background:#fff;margin-bottom:16px;position:relative;}
.team-league-game-error{
  background:#fff1f0;
  border-color:#fecdd3;
}
.team-league-game-header{font-weight:700;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.team-league-game-fields{display:flex;flex-direction:column;gap:0px;max-height:320px;overflow:auto;padding-right:8px;}
.team-league-game-row{display:grid;grid-template-columns:50px 1fr 120px 90px 70px;gap:12px;align-items:center;padding:10px 0;border-top:1px solid #eef2f7;}
.team-league-game-row:first-child{border-top:none;}
.team-league-row-team{font-weight:600;}
.team-league-player-select,.team-league-score-input,.team-league-rank-select{
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  background:#fff;
  font-size:.9rem;
}
.team-league-player-select{
  width:100%;
}
.team-league-score-input{
  width:120px;
}
.team-league-rank-select{
  width:110px;
}
.team-league-score-display,.team-league-uma-value{
  font-size:.9rem;
  color:#101828;
}
.team-league-score-display{
  font-weight:600;
}
.team-league-game-remove{
  border:none;
  background:#f8fafc;
  color:#dc2626;
  font-weight:600;
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
  transition:.2s;
}
.team-league-game-remove:hover{
  background:#fee2e2;
}
.team-league-entry-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding-right:8px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.team-league-stats{
  margin-top:24px;
  background:#fff;
}
.team-league-stats-head{
  display:flex;
  justify-content:flex-end;
}
.team-league-stats-head label{
  display:flex;
  flex-direction:column;
  font-size:.85rem;
  color:#475569;
  gap:4px;
}
.team-league-stats-head input{
  width:150px;
  font-size:.9rem;
  border-radius:8px;
  border:1px solid var(--border);
  padding:6px 10px;
  background:#fff;
}
.team-league-stats-head small{
  color:#94a3b8;
  font-size:.7rem;
}
.team-league-stats-table{
  margin-top:14px;
}
.team-league-stats-table table{
  width:100%;
  font-size:.9rem;
}
.team-league-stats-table th,
.team-league-stats-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  text-align:left;
}
.team-league-stats-table th{
  background:#f4f5f7;
  cursor:pointer;
  position:relative;
  font-weight:600;
  color:#1f2937;
  user-select:none;
}
.team-league-stats-table th .sort-indicator{
  margin-left:6px;
  font-size:.75rem;
}
.team-league-stats-table tbody tr:hover{
  background:rgba(15,23,42,.04);
}
.team-league-liveBoard{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  background:#fff;
}
.team-preview-grid{
  display:grid;
  gap:12px;
  padding-top: 12px;
}
.team-preview-title{
  margin:0 0 10px;
  font-size:1.1rem;
  font-weight:700;
}
.team-league-validation{
  font-size:.85rem;
  margin-top:6px;
}
.team-league-validation:empty{
  display:none;
}
.team-league-validation-error{
  color:#b91c1c;
  font-weight:700;
}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 6px 18px rgba(15,23,42,.08);}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.card-subtext{font-size:.8rem;color:#6b7280;}
.primary.subtle{background:#eef2ff;color:#1d4ed8;border:1px solid #c7d2fe;}
.team-league-game-row{display:flex;gap:6px;align-items:center;margin-top:10px;}
.team-league-game-row input,.team-league-game-row select{width:100%;border:1px solid var(--border);border-radius:8px;padding:6px 10px;background:#fff;}
.team-league-game-row .team-label{font-size:.85rem;font-weight:600;color:#0f172a;}
.radio-group{
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
  align-items:center;
}
.radio-group label{
  border-radius:10px;
  border:1px solid #dfe2ec;
  background:#f8fafc;
  cursor:pointer;
  transition:.15s;
  display:flex;
  flex:1 1 0;
  min-width:0;
  justify-content:center;
}
.radio-group span{
  display:block;
  padding:6px 10px;
  border-radius:8px;
  font-size:.8rem;
  color:#475569;
  width:100%;
  text-align:center;
}
.radio-group input{
  display:none;
}
.radio-group input:checked + span{
  background:#0f172a;
  color:#fff;
  font-weight:700;
  box-shadow:0 0 0 1px rgba(15,23,42,.3);
}
.team-league-history h3{margin:0 0 8px;font-size:1.1rem;}
.final-log-btn--disabled{background:#f3f4f6;color:#a1a1aa;border-style:dashed;cursor:not-allowed;}
.final-log-btn--disabled:hover{background:#f3f4f6;}
.value-high{color:#f42828;font-weight:600;}
.value-low{color:#2665f6;font-weight:600;}
.rating-tier-green{font-weight:600;background:#e8f5de;padding:2px 6px;}
.rating-tier-yellow{font-weight:600;background:#fff9d4;padding:2px 6px;}
.rating-tier-orange{font-weight:600;background:#ffe8c3;padding:2px 6px;}
.rating-tier-red{font-weight:600;background:#fbe1e1;padding:2px 6px;}
.rating-tier-blue{font-weight:600;background:#dfe8ff;padding:2px 6px;}
.match-table{width:100%;margin-top:12px;}
.match-table th,.match-table td{border-bottom:1px solid var(--border);padding:10px 6px;}
.match-table .placement-group{border: none;}
.match-table .placement-group-border{border-right:2px solid var(--border);border-left:2px solid var(--border);padding:12px 6px 0;}
.match-table .placement-column{border-top:0;border-left:0;border-right:0;border-bottom:1px solid var(--border);white-space:nowrap;}
.match-table .placement-column-border-left{border-left:2px solid var(--border);padding-left:8px;}
.match-table .placement-column-border-right{border-right:2px solid var(--border);padding-right:8px;}
.detail-controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:16px;}
.detail-controls label{display:flex;flex-direction:column;font-size:.85rem;color:#4a5568;}
.detail-controls select{margin-top:4px;padding:8px 10px;border-radius:8px;border:1px solid var(--border);}
.detail-summary{margin-bottom:16px;}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;font-size:.85rem;}
.detail-grid div{background:#f9fafb;border-radius:8px;padding:10px;border:1px solid rgba(0,0,0,.05);}
.detail-grid strong{display:block;font-size:.75rem;color:#555;margin-bottom:4px;}
.detail-grid span{font-size:1.05rem;font-weight:600;}
.detail-graphs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:16px;}
.graph-card{background:#fff;border-radius:12px;padding:12px;border:1px solid var(--border);}
.graph-card h3{margin:0 0 8px;font-size:1rem;}
.detail-pie{width:160px;height:160px;border-radius:50%;margin:0 auto;position:relative;background:#e2e8f0;}
.detail-pie .pie-center{position:absolute;inset:30px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.8rem;}
.detail-pie .pie-center strong{font-size:1rem;}
.detail-pie .pie-label{position:absolute;font-size:1rem;font-weight:700;color:#ffffff;transform:translate(-50%,-50%);}
.detail-history h3{margin:20px 0 12px;font-size:1.05rem;}

.record-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px;}
.record-card{
  background:#f9fafb;
  border: 1px solid var(--border);
  border-radius:12px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:90px;
}
.record-card strong{font-size:.8rem;color:#4a5568;}
.record-card span{font-size:1.2rem;font-weight:700;}
.yakuman-header{
  margin-top: 40px;
  margin-bottom:12px;
}
.yakuman-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.yakuman-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:row;
}
.yakuman-card-image{width:70%;background:#e5e7eb;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;}
.yakuman-card-image img{
  max-width:100%;
  height: 100%;
  object-fit:cover;
}

.yakuman-placeholder{padding:16px;text-align:center;color:#94a3b8;}
.yakuman-card-body{padding:16px;display:flex;flex-direction:column;gap:8px;width:30%;min-height:220px;overflow:hidden;}
.yakuman-card-body strong{font-size:1.1rem;}
.yakuman-card-body span{font-size:.85rem;color:#4a5568;}
.yakuman-card-body p{margin:0;font-size:.9rem;color:#1f2933;min-height:58px;}
.yakuman-card-actions{margin-top:auto;display:flex;align-items:center;gap:8px;}
.yakuman-card-actions .final-log-btn{font-size:.75rem;padding:4px 12px;}
.yakuman-card-body .meta{font-size:.82rem;color:#475569;display:flex;flex-direction:column;gap:2px;}
.yakuman-card-body .meta span{display:block;}
.hule-stats-table{width:100%;font-size:.9rem;}
.hule-stats-table th,.hule-stats-table td{border:1px solid var(--border);padding:10px;text-align:center;background:#fff;}
.hule-stats-table th{background:#f5f7fb;font-weight:600;}
.hule-cell{display:flex;flex-direction:column;gap:4px;}
.hule-count{font-weight:700;}
.hule-percent{font-size:.75rem;color:#475569;}
.percent-high{color:#b91c1c;font-weight:700;}

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.65);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:30;
}
.modal-overlay.active{
  display:flex;
}
.modal-content{
  width:100%;
  max-width:960px;
  max-height:calc(100vh - 80px);
  background:#fff;
  border-radius:20px;
  padding:24px;
  position:relative;
  box-shadow:0 18px 40px rgba(15,23,42,.25);
  overflow:auto;
}
.team-league-entry{
  max-width:960px;
}
.team-league-entry-body{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
  margin-top:18px;
  min-height:0;
}
.team-league-entry-section{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:0 12px 24px rgba(15,23,42,.08);
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:0;
  flex:1 1 0;
}
.team-league-entry-section h4{
  margin:0;
  font-size:1.1rem;
}
.team-league-action{
  border:none;
  border-radius:10px;
  padding:10px 16px;
  font-weight:600;
  background:#0f172a;
  color:#fff;
  cursor:pointer;
  transition:.2s;
}
.team-league-action.subtle{
  background:#1d4ed8;
  box-shadow:none;
}
.team-league-action:hover{
  opacity:.9;
}
.modal-close{
  position:absolute;
  top:12px;
  right:12px;
  border:none;
  background:transparent;
  font-size:1.6rem;
  cursor:pointer;
  color:#4a5568;
}
.modal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;
  margin-top:16px;
}
.modal-grid label{
  display:flex;
  flex-direction:column;
  font-size:.8rem;
  color:#4a5568;
}
.modal-grid input{
  margin-top:6px;
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  font-size:.95rem;
  background:#fefefe;
}
.modal-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}
.modal-preview{
  margin-top:20px;
}
.modal-preview-header{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.modal-preview-header strong{
  font-size:1rem;
}
.modal-log-links a{
  margin-left:8px;
  text-decoration:none;
  font-size:.85rem;
  color:#2563eb;
  font-weight:600;
}
.modal-preview table{
  width:100%;
  font-size:.85rem;
  margin-top:12px;
}
.modal-preview table th,
.modal-preview table td{
  padding:10px 8px;
  border-bottom:1px solid var(--border);
  text-align:center;
}
.modal-preview table th{
  background:#f5f7fb;
  font-size:.75rem;
}
.status-error{
  color:#dc2626;
}

@media (max-width:900px){
  .yakuman-card{
    flex-direction:column;
  }
  .yakuman-card-image{
    width:100%;
    aspect-ratio:auto;
    height:auto;
    min-height:220px;
  }
  .yakuman-card-body{
    width:100%;
  }
}

@media (max-width:900px){
  .site-header{padding:16px 12px 12px;}
  .site-header h1{font-size:1.6rem;}
  .tabs{padding:10px 12px;gap:4px;}
  .content{padding:16px 12px 32px;}
  .panel{padding:16px;margin-top:16px;}
  .panel-head{flex-direction:column;align-items:flex-start;}
  .panel-controls{width:100%;justify-content:flex-start;}
  .detail-graphs{grid-template-columns:1fr;}
}

/* 경기 기록 모바일 카드 뷰 */
.match-cards{
  display:none;
}
.match-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  margin-bottom:16px;
}
.match-card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background:#f8fafc;
  border-bottom:1px solid var(--border);
  font-weight:600;
}
.match-card-header .header-left{
  display:flex;
  align-items:center;
  gap:10px;
}
.match-card-header .round{
  font-size:1rem;
  color:#0f172a;
  font-weight:700;
}
.match-card-header .date{
  font-size:.85rem;
  color:#64748b;
  font-weight:400;
}
.match-card-players{
  display:flex;
  flex-direction:column;
}
.match-card-player{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid #f1f5f9;
}
.match-card-player:last-child{
  border-bottom:none;
}
.match-card-rank{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:10px;
  font-weight:700;
  font-size:1rem;
}
.match-card-rank.rank-1{background:rgba(var(--gold), 0.3);color:#92600a;}
.match-card-rank.rank-2{background:rgba(var(--silver), 0.4);color:#4b4b5a;}
.match-card-rank.rank-3{background:rgba(var(--bronze), 0.25);color:#7a4a20;}
.match-card-rank.rank-4{background:rgba(var(--default), 0.2);color:#3030a0;}
.match-card-info{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.match-card-name{
  font-weight:600;
  font-size:.95rem;
  color:#0f172a;
}
.match-card-stats{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  font-size:.8rem;
  color:#64748b;
}
.match-card-stats span{
  display:flex;
  align-items:center;
  gap:4px;
}
.match-card-stats .label{
  color:#94a3b8;
}
.match-card-stats .value{
  color:#334155;
  font-weight:500;
}
.match-card-stats .value.positive{color:#16a34a;}
.match-card-stats .value.negative{color:#dc2626;}

@media (max-width:768px){
  .match-table{
    display:none;
  }
  .match-cards{
    display:block;
    margin-top:12px;
  }
  .team-league-game-fields{
    max-height:none;
    overflow:visible;
  }
  .team-league-game-row{
    display:grid;
    grid-template-columns:40px 1fr 70px 40px;
    grid-template-rows:auto auto;
    gap:6px 8px;
    padding:6px 0;
  }
  .team-league-row-team{
    grid-column:1;
    grid-row:1;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
    font-weight:700;
  }
  .team-league-player-select{
    grid-column:2 / 5;
    grid-row:1;
    width:100%;
  }
  .team-league-score-input{
    grid-column:1 / 3;
    grid-row:2;
    width:100%;
  }
  .team-league-rank-select{
    grid-column:3;
    grid-row:2;
    width:100%;
  }
  .team-league-uma-value{
    grid-column:4;
    grid-row:2;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    font-size:.9rem;
  }
}

/* Footer */
.site-footer{
  background:#fff;
  border-top:1px solid var(--border);
  padding:24px 5vw;
  text-align:center;
}
.footer-content{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.footer-content a{
  color:var(--muted);
  text-decoration:none;
  font-size:.9rem;
  transition:.2s;
}
.footer-content a:hover{
  color:var(--accent);
}
.footer-divider{
  color:#d1d5db;
}
.footer-copy{
  margin:12px 0 0;
  font-size:.8rem;
  color:#94a3b8;
}

/* Guide page */
.guide-panel{
  max-width:800px;
  margin:20px auto;
}
.guide-intro{
  font-size:1rem;
  line-height:1.7;
  color:#374151;
  margin-bottom:32px;
}
.guide-section{
  margin-bottom:32px;
}
.guide-section h3{
  font-size:1.15rem;
  color:#0f172a;
  margin:0 0 16px;
  padding-bottom:8px;
  border-bottom:2px solid var(--accent);
}
.guide-list{
  list-style:none;
  padding:0;
  margin:0;
}
.guide-list li{
  background:#f9fafb;
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  margin-bottom:12px;
  line-height:1.6;
  color:#374151;
}
.guide-list li strong{
  display:block;
  color:#0f172a;
  margin-bottom:6px;
}
.guide-list a{
  color:var(--accent);
  text-decoration:none;
  font-weight:500;
}
.guide-list a:hover{
  text-decoration:underline;
}
.guide-outro{
  font-size:1rem;
  line-height:1.7;
  color:#374151;
  margin-top:40px;
  padding:20px;
  background:#eef2ff;
  border-radius:12px;
  text-align:center;
}