:root{
  --navy-1:#314066;
  --navy-2:#1a2338;
  --navy-3:#071536;
  --navy-hover:#243156;
  --white:#ffffff;
  --g50:#f8fafc;
  --g100:#eef2f7;
  --g200:#dfe6ef;
  --g300:#cbd5e1;
  --g400:#94a3b8;
  --g500:#64748b;
  --g600:#475569;
  --g700:#334155;
  --g900:#0f172a;
  --border:#e6ebf2;
  --soft-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05);
  --card-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 40px rgba(15,23,42,.06);
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --container:1240px;
}

.h-only-mobile{display:none}

.utilbar{background:var(--navy-3);color:rgba(255,255,255,.85);font-size:12.5px}
.utilbar .row{display:flex;justify-content:space-between;align-items:center;height:36px}
.utilbar a,.utilbar button{display:inline-flex;align-items:center;gap:6px;padding:0 14px;color:rgba(255,255,255,.78);transition:color .15s;background:transparent;border:none;font-size:12.5px;height:36px;cursor:pointer}
.utilbar a:hover,.utilbar button:hover{color:#fff}
.utilbar .left{display:flex;align-items:center;margin-left:-14px}
.utilbar .right{display:flex;align-items:center;margin-right:-14px}
.utilbar .right a.join{color:#fff;font-weight:500}
.utilbar .sep{width:1px;height:11px;background:rgba(255,255,255,.16)}
.utilbar .lang-btn .caret{width:10px;height:10px}

.header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.header .row{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{height:30px;width:auto;display:block}
nav.main-nav{display:flex;gap:6px}
nav.main-nav a{position:relative;padding:10px 18px;font-size:15px;font-weight:500;color:var(--navy-2);letter-spacing:.005em;border-radius:8px;transition:all .15s}
nav.main-nav a:hover{color:var(--navy-1);background:var(--g50)}
nav.main-nav a.active{color:var(--navy-1)}
nav.main-nav a.active::after{content:"";position:absolute;left:18px;right:18px;bottom:-26px;height:2px;background:var(--navy-1);border-radius:2px}
.head-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.icon-btn{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--navy-2);transition:background .15s}
.icon-btn:hover{background:var(--g100)}
.mypage-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--navy-2);font-weight:500;font-size:14px;transition:all .15s}
.mypage-btn:hover{border-color:var(--navy-1);color:var(--navy-1)}
.mobile-tabbar{display:none}

footer{background:var(--navy-3);color:rgba(255,255,255,.7);padding:56px 0 32px;font-size:13px}
footer .grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;margin-bottom:40px}
footer h5{color:#fff;font-size:13px;font-weight:600;letter-spacing:.04em;margin:0 0 14px;text-transform:uppercase}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
footer ul a{color:rgba(255,255,255,.65);font-size:13px}
footer ul a:hover{color:#fff}
footer .brandcol img{height:32px;width:auto;filter:brightness(0) invert(1)}
footer .brandcol p{color:rgba(255,255,255,.5);font-size:12.5px;line-height:1.6;margin:16px 0 0;max-width:260px}
footer .bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:rgba(255,255,255,.45);gap:16px;flex-wrap:wrap}
footer .bottom .links{display:flex;gap:18px}

.modal-overlay{position:fixed;inset:0;background:rgba(7,21,54,.55);backdrop-filter:blur(6px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{background:#fff;border-radius:20px;padding:32px;max-width:440px;width:100%;box-shadow:0 20px 80px rgba(7,21,54,.4);transform:translateY(10px);transition:transform .25s;border:1px solid var(--border)}
.modal-overlay.open .modal{transform:translateY(0)}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
.modal-head h3{margin:0;font-size:20px;font-weight:700;color:var(--navy-3);letter-spacing:-.01em}
.modal-head p{margin:4px 0 0;font-size:13px;color:var(--g500)}
.modal-close{width:32px;height:32px;border-radius:50%;border:none;background:var(--g50);color:var(--navy-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}
.modal-close:hover{background:var(--g100)}
.lang-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.lang-option{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--border);background:#fff;cursor:pointer;transition:all .15s;text-align:left;width:100%}
.lang-option:hover{border-color:var(--navy-1);background:var(--g50)}
.lang-option.selected{border-color:var(--navy-1);background:#f3f6fb}
.lang-option .flag{width:36px;height:36px;border-radius:50%;background:var(--g100);display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;overflow:hidden}
.lang-option .info{flex:1}
.lang-option .info .name{font-weight:600;color:var(--navy-2);font-size:15px}
.lang-option .info .native{font-size:12.5px;color:var(--g500);margin-top:2px}
.lang-option .check{color:var(--navy-1);opacity:0}
.lang-option.selected .check{opacity:1}

.drawer-overlay{position:fixed;inset:0;background:rgba(7,21,54,.4);z-index:998;opacity:0;pointer-events:none;transition:opacity .2s}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:320px;max-width:90%;background:#fff;z-index:999;transform:translateX(100%);transition:transform .25s;display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border)}
.drawer-head img{height:24px}
.drawer-nav{padding:16px 8px;flex:1;overflow:auto}
.drawer-nav a{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;color:var(--navy-2);font-size:16px;font-weight:500;border-radius:10px}
.drawer-nav a:hover{background:var(--g50)}
.drawer-nav a.active{color:var(--navy-1);background:var(--g50)}
.drawer-foot{padding:18px 24px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px}
.drawer-foot button{height:44px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--navy-2);font-size:14px;font-weight:500;cursor:pointer}
.drawer-foot button.primary{background:var(--navy-1);color:#fff;border-color:var(--navy-1)}

@media (max-width: 1080px){
  footer .grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .utilbar .left a:nth-child(n+3){display:none!important}
  nav.main-nav{display:none}
  .head-actions{display:none}
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .mobile-tabbar{
    display:flex;position:fixed;left:10px;right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));z-index:80;
    background:#fff;border:1px solid var(--border);border-radius:20px;
    box-shadow:0 10px 30px rgba(15,23,42,.16);padding:6px 4px;
    justify-content:space-between;gap:2px;
  }
  .mobile-tabbar a,.mobile-tabbar button{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;height:auto;min-height:0;padding:8px 2px 7px;margin:0;border-radius:14px;color:var(--g500);
    font-size:10px;font-weight:600;letter-spacing:-.01em;background:none;border:none;
    font-family:inherit;line-height:1.2;text-decoration:none;cursor:pointer;white-space:nowrap;
  }
  .mobile-tabbar svg{width:20px;height:20px;flex-shrink:0}
  .mobile-tabbar .tabbar-mark{width:20px;height:20px;border-radius:50%;background:var(--navy-1);display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:3px;box-sizing:border-box}
  .mobile-tabbar .tabbar-mark img{width:100%;height:100%;object-fit:contain;display:block}
  .mobile-tabbar a.active{color:var(--navy-1);background:var(--g50)}
  footer .grid{grid-template-columns:1fr}
  .h-only-mobile{display:initial}
}

.lang-option .flag { background: #f1f3f7 !important; }
.lang-option .flag svg { border-radius: 50%; }
nav.main-nav a.active { background: #eef2f7; color: var(--navy-1); }
nav.main-nav a.active::after { display: none !important; }
footer .designer-credit {
  font-size: 11.5px;
  color: rgba(255,255,255,.4);
  margin-top: 14px;
  letter-spacing: .04em;
  font-weight: 500;
}
.utilbar .left, .utilbar .right { align-items: stretch; }
.utilbar svg { display: block; flex-shrink: 0; }
.utilbar .lang-btn .caret { width: 10px; height: 10px; }