@charset "UTF-8";

/* 토토갤 블랙라벨 오리경주 - 원본 게임 배치/애니메이션 보존 */
:root {
  --bl-bg:#0c1422; --bl-panel:#131e30; --bl-panel-light:#1b2a40;
  --bl-border:#30435e; --bl-blue:#4b91f5;
  --bl-blue-light:#a7d0ff; --bl-text:#edf4ff; --bl-muted:#91a5c1;
}

/* 1. 일반오리 / 블랙라벨 탭 */
.duck-category { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:15px; }
.duck-category a {
  display:inline-flex; align-items:center; justify-content:center; min-height:42px;
  padding:9px 18px; border:1px solid #d5e5f8; border-radius:11px;
  background:#f1f7ff; color:#587493; font-size:13px; font-weight:800;
  text-decoration:none; box-shadow:0 2px 0 #d0e1f4; transition:background .2s,color .2s;
}
.duck-category a:hover { background:#dfedff; color:#245d9f; }
.duck-category a.duck-active {
  border-color:#4388e9; background:linear-gradient(135deg,#579fff,#2868c9);
  color:#fff; box-shadow:0 3px 0 #1d4e9b;
}
.duck-category a.duck-active::before { content:"🦆"; margin-right:6px; }
.duck-category a:not(.duck-active)::before { content:"🐤"; margin-right:6px; }

/* 2. SEO 이용안내: 평소 제목 + 2줄, 클릭하면 전체 내용 */
.duck-info, .duck-info * { box-sizing:border-box; }
.duck-info {
  width:100%; margin:0 0 16px; overflow:hidden;
  border:1px solid #dce7f7; border-radius:13px; background:#fff;
  box-shadow:0 3px 14px rgba(31,76,133,.06);
}
.duck-info > h1 {
  display:flex; align-items:center; gap:9px;
  margin:0; padding:15px 18px 6px; border:0; background:#f8fbff;
  color:#213e66; font-size:20px; font-weight:800;
  line-height:1.4; letter-spacing:-.4px;
}
.duck-info > h1::before { content:"🦆"; font-size:20px; flex:none; }
.duck-info-details { margin:0; padding:0; border:0; background:#f8fbff; }
.duck-info-details > summary {
  display:flex; align-items:center; gap:12px; min-height:68px;
  padding:5px 18px 13px; cursor:pointer; list-style:none;
}
.duck-info-details > summary::-webkit-details-marker { display:none; }
.duck-info-preview {
  display:-webkit-box; flex:1 1 0; min-width:0; overflow:hidden;
  -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
  color:#60728a; font-size:13px; line-height:1.7; overflow-wrap:anywhere;
}
.duck-info-toggle {
  display:inline-flex; align-items:center; justify-content:center; gap:7px; flex:none;
  min-height:34px; padding:7px 11px; border:1px solid #cce0fb;
  border-radius:30px; background:#eaf3ff; color:#246bbd;
  font-size:12px; font-weight:800; white-space:nowrap;
}
.duck-info-toggle::after {
  content:""; display:inline-block; width:7px; height:7px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .2s;
}
.duck-info-details > summary:hover .duck-info-toggle { background:#dcecff; }
.duck-info-open { display:none; }
.duck-info-details[open] > summary { justify-content:flex-end; min-height:46px; padding:5px 18px 10px; }
.duck-info-details[open] .duck-info-preview { display:none; }
.duck-info-details[open] .duck-info-close { display:none; }
.duck-info-details[open] .duck-info-open { display:inline; }
.duck-info-details[open] .duck-info-toggle::after { transform:translateY(2px) rotate(225deg); }
.duck-info-content {
  padding:17px 19px 20px; border-top:1px solid #e5ecf6;
  background:#fff; color:#475c76; font-size:13px; line-height:1.85;
}
.duck-info-content p { margin:0 0 11px; }
.duck-info-content h2 {
  margin:20px 0 9px; padding:0 0 0 10px; border-left:3px solid #579bff;
  color:#285083; font-size:16px; font-weight:800; line-height:1.5;
}
.duck-info-content ol { margin:0 0 15px; padding-left:25px; }
.duck-info-content li { padding-left:3px; margin:7px 0; }
.duck-info-content li strong { color:#28619b; }
.duck-info-content .duck-info-notice {
  margin:16px 0 0; padding:10px 12px; border-radius:8px;
  background:#f3f7fc; color:#6e829b; font-size:12px;
}

/* 3. 경주 트랙: 최초 원본 CSS 그대로 */
#race-track {
  position:relative; width:100%; padding:10px; padding-bottom:45%;
  margin-bottom:20px; overflow:hidden;
  border:2px solid #cbd5e1; border-radius:12px;
  background:url('/raceduck/img/bg.png');
  background-size:100% 100%; background-position:bottom;
}
#start-line {
  position:absolute; bottom:5%; left:15%; width:120px; height:48%; overflow:hidden;
  background:url('/raceduck/img/line.png') no-repeat;
  background-size:78%; transition:transform 1s ease;
}
#end-line {
  position:absolute; right:0; bottom:5%; width:120px; height:48%; overflow:hidden;
  background:url('/raceduck/img/line.png') no-repeat;
  background-size:78%; transform:translateX(250%); transition:transform 10s linear;
}
.horse { position:absolute; left:0; font-size:2rem; transition:transform .1s ease-in-out; }
.horse img { width:100%; }
.horse.running { animation:runMove .7s infinite alternate; }
@keyframes runMove { 0% { transform:translateY(0); } 100% { transform:translateY(-5px); } }
#horse1 { top:30%; left:10%; width:10%; }
#horse2 { top:40%; left:8%; width:10%; }
#horse3 { top:50%; left:6%; width:10%; }
#horse4 { top:60%; left:4%; width:10%; }
#horse5 { top:70%; left:2%; width:10%; }
#result div {
  position:absolute; top:50%; left:50%; width:max-content; max-width:90%;
  padding:1rem; transform:translate(-50%,-50%); border:1px solid #dce8f8;
  border-radius:12px; background:#fff; color:#1c2d45; text-align:center;
  box-shadow:0 8px 30px #0006;
}
#result div button {
  display:block; width:100%; margin-top:5px; padding:8px 12px;
  border:0; outline:0; border-radius:50rem;
  background:#3568dc; color:#fff; cursor:pointer;
}
#result div button:hover { background:#2452b5; }
#soundToggle {
  position:absolute; top:5px; left:5px; z-index:2; width:33px; padding:4px 0;
  border:1px solid #ffffff30; outline:0; border-radius:50rem;
  background:#00000070; color:#fff; cursor:pointer;
}

/* 4. 게임 정보: 원래 세로 배치 유지, 모서리/간격만 정돈 */
.game-box-con {
  padding:16px; border:1px solid #2b3c55; border-radius:14px;
  background:linear-gradient(145deg,#151f30,#0e1725); color:var(--bl-text);
}
.game-info-box {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:15px; padding-bottom:13px; border-bottom:1px solid #2b3a50;
  color:#dce7f8;
}
.game-my-history, .game-info-admin {
  display:inline-flex; align-items:center; gap:7px; min-width:0;
}
.game-my-history span a, .game-info-admin span a {
  position:relative; top:0; display:inline-flex; align-items:center; justify-content:center;
  min-height:36px; padding:7px 11px; border:1px solid #3a5578;
  border-radius:9px; background:#1b2c44; color:#d7e9ff;
  font-size:12px; font-weight:700; text-decoration:none; transition:all .2s ease;
}
.game-my-history span a:hover, .game-info-admin span a:hover {
  border-color:#75b0ff; background:#29466a; color:#fff;
}
.game-info-admin > a { color:#a8caff; text-decoration:none; }
.game-info-admin > a:hover { color:#fff; }

/* 5. 쿠폰 카드 */
#my_coupon_list {
  padding:15px; border:1px solid #2c3e58; border-radius:12px;
  background:linear-gradient(145deg,#19263a,#121c2c); margin-top:0;
}
#my_coupon_list > span {
  display:block; margin-bottom:11px; color:#c5d5e9; font-size:13px; font-weight:700;
}
#my_coupon_list > div {
  display:flex; align-items:stretch; flex-wrap:wrap; gap:10px;
  margin:10px 0 0; max-height:110px; overflow-y:auto; overflow-x:hidden;
  padding:3px 5px 3px 0; scrollbar-width:thin;
  scrollbar-color:#526b8b #182438;
}
#my_coupon_list > div::-webkit-scrollbar { width:6px; }
#my_coupon_list > div::-webkit-scrollbar-track { background:#182438; border-radius:10px; }
#my_coupon_list > div::-webkit-scrollbar-thumb { background:#526b8b; border-radius:10px; }
#my_coupon_list > div::-webkit-scrollbar-thumb:hover { background:#79adf3; }
.my_coupon_ea { flex:0 0 calc(25% - 8px); min-width:0; }
.my_coupon_ea input[type="radio"] { display:none; }
.my_coupon_ea label {
  position:relative; display:flex; flex-direction:column; justify-content:center; gap:7px;
  width:100%; min-height:78px; padding:13px 16px; overflow:hidden;
  border:1px solid #394d68; border-radius:10px;
  background:linear-gradient(145deg,#24334a,#19263a);
  color:#f0f5ff; cursor:pointer;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.my_coupon_ea label::before {
  content:""; position:absolute; top:0; left:0; width:100%; height:3px;
  background:linear-gradient(90deg,#518fe9,#a9d3ff);
}
.my_coupon_ea label::after {
  content:""; position:absolute; top:50%; right:-8px; width:15px; height:25px;
  border:1px solid #4b607d; border-radius:50%; background:#131e30;
  transform:translateY(-50%);
}
.my_coupon_ea label .cp_name {
  display:block; margin:0; color:#f0f5ff; font-size:13px; font-weight:800;
  line-height:1.5; overflow-wrap:anywhere;
}
.my_coupon_ea label .cp_expire {
  display:block; color:#9ebfe9; font-size:11px; font-weight:600;
  line-height:1.4; opacity:1;
}
.my_coupon_ea label:hover {
  border-color:#679ee7; background:linear-gradient(145deg,#293e5a,#1b2c44);
}
.my_coupon_ea input[type="radio"]:checked + label {
  border-color:#81baff; background:linear-gradient(135deg,#294f7c,#1a3453);
  box-shadow:inset 0 0 0 1px #78b4ff20, 0 0 12px #4488e51a;
}
.my_coupon_ea input[type="radio"]:checked + label::before {
  background:linear-gradient(90deg,#77b6ff,#d1e8ff);
}
.my_coupon_ea input[type="radio"]:checked + label .cp_name { color:#fff; }
.my_coupon_ea input[type="radio"]:checked + label .cp_expire { color:#b9d9ff; }

/* 6. 오리 선택 + 시작 버튼 */
.game-bet-box { display:flex; align-items:stretch; gap:10px; margin-top:14px; }
.game-bet-box > div { flex:auto; min-width:0; }
.duck-options { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; text-align:center; }
.duck-options input[type="radio"] { display:none; }
.duck-options label {
  display:inline-block; flex:1; margin:0; padding:10px 0;
  border:1px solid #3a4c65; border-radius:9px; background:#243248;
  color:#bdcbe0; font-weight:700; cursor:pointer; transition:all .2s ease;
}
.duck-options label:hover { border-color:#6da8f5; background:#2c4260; color:#fff; }
.duck-options input[type="radio"]:checked + label {
  border-color:#85baff; background:linear-gradient(135deg,#438df0,#285eb0);
  color:#fff; font-weight:800;
}
.startbtncs {
  flex:0 0 20%; padding:10px 12px; border:1px solid #6da7ff;
  border-radius:9px; background:linear-gradient(135deg,#438ff5,#245bb4);
  color:#fff; font-weight:800; cursor:pointer; transition:all .2s ease;
}
.startbtncs:hover { background:linear-gradient(135deg,#62a5ff,#3475d7); }
.startbtncs:active { transform:translateY(2px); }
.startbtncs:disabled { opacity:.55; cursor:not-allowed; }

/* 7. 하단 당첨 내역 */
.windetails {
  margin:20px 0; overflow:hidden; border:1px solid #dbe4ef;
  border-radius:12px; background:#fff; color:#2c3e55;
  box-shadow:0 4px 16px rgba(24,48,80,.05);
}
.windetails > p {
  margin:0; padding:15px 17px; border-bottom:1px solid #dce6f2;
  background:linear-gradient(135deg,#f5f9ff,#eaf2fc);
  color:#254f83; font-size:14px; font-weight:800;
}
.windetails ul {
  display:flex; align-items:center; margin:0; border:0;
  border-bottom:1px solid #e7edf5; background:#fff;
  font-size:12px; list-style:none;
}
.windetails .windehead ul { background:#f2f6fc; color:#70819a; font-size:11px; font-weight:800; }
.windetails ul li {
  flex:1; min-width:0; padding:11px 7px; border-right:1px solid #edf1f6;
  color:#465971; text-align:center; overflow-wrap:anywhere;
}
.windetails ul li:last-child { border-right:0; }
.windetails > ul li:first-child { color:#245d9f; font-weight:800; }
.windetails > ul li:nth-child(3) {
  color:#2869b5; font-weight:800; font-variant-numeric:tabular-nums;
}
.windetails > ul li:last-child { color:#8190a5; font-size:11px; }
.windetails > ul:hover { background:#f5f9ff; }
.windetails > ul:last-child { border-bottom:0; }

/* 8. 관리자 설정: 기존 요소 유지 */
.checkerbtn {
  display:block; width:100px; margin:0 auto; padding:7px 0;
  border:1px solid #3568dc; border-radius:5px;
  background:#3568dc; color:#fff; font-weight:800; cursor:pointer;
}
.checkerbtn:hover { opacity:.8; }
#setform {
  padding:3rem; border:1px solid #dce4ef;
  border-radius:10px; background:#f4f7fb;
}
#setform p { margin-bottom:2rem; padding:8px; border-radius:5px; background:#e4eaf3; }
.set-title { font-size:18px; font-weight:800; }
.set-title #loseaddBtn, .set-title #winaddBtn {
  padding:8px 10px; border:0; outline:0; background:#3568dc;
  color:#fff; font-size:12px; font-weight:800; cursor:pointer;
}
.set-title #loseaddBtn:hover, .set-title #winaddBtn:hover { opacity:.8; }
.form-set {
  display:flex; align-items:center; gap:10px; margin-bottom:.5rem;
  padding:8px 10px; border-radius:5px; background:#e4eaf3;
}
.form-set label { display:inline-flex; margin:0; }
.form-set label input { flex:auto; margin-left:.2rem; border:0; outline:0; box-shadow:none; }
.form-set .deleteBtn {
  padding:8px 5px; border:0; outline:0; background:transparent;
  color:#34445a; font-size:12px; cursor:pointer;
}
.form-set .deleteBtn:hover { color:#d33; }
.lose-con { margin-bottom:2rem; }
.win-con { margin-bottom:1rem; }
.gameback { display:block; width:200px; margin:2rem auto 0; text-align:center; }

/* 9. 태블릿: 원래 2열 쿠폰 유지 */
@media (max-width:991px) {
  .my_coupon_ea { flex:0 0 calc(50% - 5px); }
  .my_coupon_ea label { padding:10px 12px; text-align:center; }
  .my_coupon_ea label .cp_name { font-size:12px; }
}

/* 10. 모바일: 원본 화면 구성 유지 */
@media (max-width:768px) {
  .duck-category { gap:7px; }
  .duck-category a { padding:9px 14px; border-radius:10px; font-size:13px; }
  .duck-info > h1 { padding:13px 13px 5px; font-size:17px; }
  .duck-info > h1::before { font-size:17px; }
  .duck-info-details > summary { min-height:64px; padding:4px 13px 11px; gap:8px; }
  .duck-info-preview { font-size:12px; line-height:1.6; }
  .duck-info-toggle { padding:7px 8px; font-size:11px; }
  .duck-info-details[open] > summary { padding:5px 13px 10px; min-height:42px; }
  .duck-info-content { padding:13px 14px 15px; font-size:12px; line-height:1.8; }
  .duck-info-content h2 { margin-top:16px; font-size:14px; }
  .game-box-con { padding:10px; border-radius:11px; }
  .game-info-box { gap:6px; padding-bottom:10px; }
  .game-my-history, .game-info-admin { gap:5px; }
  .game-my-history span a, .game-info-admin span a { padding:6px 8px; font-size:11px; }
  #my_coupon_list { padding:11px; }
  #my_coupon_list > div { gap:7px; }
  .my_coupon_ea { flex:0 0 calc(50% - 4px); }
  .my_coupon_ea label { min-height:65px; padding:10px; text-align:left; }
  .my_coupon_ea label .cp_name { font-size:12px; }
  .my_coupon_ea label .cp_expire { font-size:10px; }
  .game-bet-box { gap:7px; margin-top:11px; }
  .duck-options { gap:5px; }
  .duck-options label { padding:10px 2px; border-radius:7px; font-size:12px; }
  .startbtncs { padding:9px 7px; font-size:12px; }
  .windetails { margin:14px 0; border-radius:10px; }
  .windetails > p { padding:12px; font-size:13px; }
  .windetails ul li { padding:10px 4px; font-size:10px; }
  .windetails .windehead ul { font-size:10px; }
  .windetails ul li:last-child { font-size:9px; }
  #setform { padding:1rem; }
}

/* 11. 작은 모바일: 원본 규칙 보존 */
@media (max-width:480px) {
  #start-line, #end-line { background-size:40%; }
  #result div { width:60%; padding:10px; font-size:12px; }
  .game-box-con { font-size:12px; }
  .duck-options { gap:2px; }
  .duck-options label { font-size:11px; }
  .duck-mo-none { display:none; }
  .windetails ul li:nth-child(1) { flex:0 0 70px; }
  .windetails ul li:nth-child(2) { flex:0 0 70px; }
  .windetails ul li:nth-child(3) { flex:0 0 70px; }
  .windetails ul li:nth-child(4) { flex:1; }
  .windetails ul li { padding:9px 3px; font-size:9px; overflow-wrap:anywhere; }
  .windetails ul li:last-child { font-size:9px; }
  .game-info-admin > a { font-size:12px; }
}
@media (max-width:380px) {
  .duck-category a { padding:8px 11px; font-size:12px; }
  .duck-info > h1 { font-size:16px; }
  #my_coupon_list { padding:9px; }
  .my_coupon_ea label { padding:9px 7px; }
  .windetails ul li:nth-child(1),
  .windetails ul li:nth-child(2),
  .windetails ul li:nth-child(3) { flex:0 0 58px; }
  .windetails ul li:nth-child(4) { flex:1; }
  .windetails ul li { padding:8px 2px; font-size:9px; }
}