*{box-sizing:border-box}
    body{margin:0;font-family:Arial,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;background:#f5f7fb;color:#1f2937}
    a{text-decoration:none;color:inherit}
    button,input,textarea,select{font:inherit}
    .container{width:min(1180px,92%);margin:0 auto}
    .site-header{position:sticky;top:0;z-index:50;background:#ffffffdd;backdrop-filter:blur(10px);border-bottom:1px solid #e5e7eb}
    .top-brand{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:14px 0 12px}
    .brand-stack{display:flex;flex-direction:column;gap:4px}
    .brand-3d{
      font-size:52px;
      font-weight:1000;
      letter-spacing:-1px;
      line-height:1;
      color:#0f172a;
      text-shadow:0 2px 0 rgba(255,255,255,.55);
    }
    .brand-3d .accent{
      color:#16a34a;
    }
    .brand-sub{
      font-size:18px;
      font-weight:800;
      color:#334155;
      margin-left:4px;
    }
    nav{display:flex;gap:18px;flex-wrap:wrap;padding-top:10px}
    nav a{font-weight:700;color:#374151}
    .hero{padding:56px 0 34px}
    .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:30px;align-items:center}
    .badge{display:inline-block;background:#dcfce7;color:#166534;padding:8px 12px;border-radius:999px;font-size:13px;font-weight:800;margin-bottom:14px}
    h1{font-size:50px;line-height:1.1;margin:0 0 16px;color:#102a4b}
    h2{font-size:32px;line-height:1.2;margin:0 0 16px}
    h3{font-size:20px;margin:0 0 10px}
    .lead{font-size:18px;line-height:1.75;color:#4b5563;max-width:740px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
    .btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border-radius:14px;font-weight:800;border:none;cursor:pointer}
    .btn.primary{background:#0f172a;color:#fff}
    .btn.secondary{background:#e5e7eb;color:#111827}
    .btn.blue{background:#2563eb;color:#fff}
    .panel,.tactic-wrap,.board-list-card,.contact-box,.banner-3d{background:#fff;border-radius:24px;box-shadow:0 14px 40px rgba(0,0,0,.08)}

    .banner-3d{padding:18px;background:linear-gradient(135deg,#0f172a 0%,#1e293b 45%,#0f766e 100%);color:#fff;overflow:hidden;position:relative}
    .banner-title{font-size:14px;font-weight:800;color:#93c5fd;margin-bottom:10px}
    .banner-stage{position:relative;height:520px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));overflow:hidden;border:1px solid rgba(255,255,255,.12)}
    .banner-pitch{position:absolute;inset:14px;border-radius:22px;background:linear-gradient(180deg,#34d399 0%,#10b981 100%);box-shadow:inset 0 0 0 4px rgba(255,255,255,.9)}
    .banner-pitch::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;background:rgba(255,255,255,.85);transform:translateY(-50%)}
    .banner-pitch::after{content:"";position:absolute;left:50%;top:50%;width:110px;height:110px;border-radius:50%;border:4px solid rgba(255,255,255,.88);transform:translate(-50%,-50%)}
    .goal-line-top,.goal-line-bottom{position:absolute;left:22%;width:56%;height:14%;border:4px solid rgba(255,255,255,.88)}
    .goal-line-top{top:0;border-top:none}
    .goal-line-bottom{bottom:0;border-bottom:none}
    .player-3d{position:absolute;width:118px;height:168px;filter:drop-shadow(0 18px 20px rgba(0,0,0,.28))}
    .player-3d.left{left:18%;top:23%;transform:translateX(-50%) rotateY(8deg)}
    .player-3d.right{left:72%;top:23%;transform:translateX(-50%) rotateY(-8deg)}
    .player-body{position:absolute;left:50%;top:48px;transform:translateX(-50%);width:86px;height:104px;border-radius:22px 22px 28px 28px;border:5px solid #fff;background:linear-gradient(180deg,#16a34a 0%,#15803d 100%)}
    .player-right .player-body{background:linear-gradient(180deg,#f97316 0%,#ea580c 100%)}
    .player-head{position:absolute;left:50%;top:16px;transform:translateX(-50%);width:38px;height:38px;border-radius:50%;background:linear-gradient(180deg,#f5d0a5,#eab676);border:4px solid rgba(255,255,255,.9)}
    .player-arm{position:absolute;top:56px;width:46px;height:24px;border-radius:14px;border:5px solid #fff}
    .player-3d.left .arm-l{left:4px;transform:rotate(-30deg);background:linear-gradient(180deg,#16a34a 0%,#15803d 100%)}
    .player-3d.left .arm-r{right:4px;transform:rotate(25deg);background:linear-gradient(180deg,#16a34a 0%,#15803d 100%)}
    .player-3d.right .arm-l{left:4px;transform:rotate(-25deg);background:linear-gradient(180deg,#f97316 0%,#ea580c 100%)}
    .player-3d.right .arm-r{right:4px;transform:rotate(30deg);background:linear-gradient(180deg,#f97316 0%,#ea580c 100%)}
    .player-leg{position:absolute;top:146px;width:24px;height:42px;border-radius:14px;background:linear-gradient(180deg,#f5d0a5,#eab676);border:4px solid rgba(255,255,255,.85)}
    .player-3d .leg-l{left:38px}
    .player-3d .leg-r{right:38px}
    .player-ball{position:absolute;left:38%;top:39%;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff 0 26%,#111827 27% 31%,#fff 32% 40%,#111827 41% 45%,#fff 46% 100%);box-shadow:0 8px 16px rgba(0,0,0,.3);animation:ballMove 2.8s ease-in-out infinite alternate}
    .pass-line{position:absolute;left:31%;top:43%;width:36%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:passGlow 1.4s ease-in-out infinite}
    .banner-caption{position:absolute;left:22px;right:22px;bottom:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-weight:800;color:#ecfeff}
    @keyframes ballMove{
      0%{left:31%;top:41%;transform:scale(1)}
      50%{left:60%;top:38%;transform:translateY(-8px) scale(1.08)}
      100%{left:31%;top:41%;transform:scale(1)}
    }
    @keyframes passGlow{
      0%,100%{opacity:.18;transform:scaleX(.9)}
      50%{opacity:.7;transform:scaleX(1)}
    }

    .ad-wrap{padding:10px 0 0}
    .ad-box{min-height:118px;border-radius:22px;padding:20px 24px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;text-align:center;background:linear-gradient(135deg,#0f172a 0%,#1d4ed8 40%,#06b6d4 100%);color:#fff;box-shadow:0 14px 40px rgba(0,0,0,.12)}
    .ad-icon{font-size:42px;line-height:1;animation:floatIcon 2.4s ease-in-out infinite}
    .ad-text{font-weight:900;line-height:1.55;font-size:clamp(18px,2vw,28px)}
    .ad-highlight{color:#fde68a}
    @keyframes floatIcon{
      0%,100%{transform:translateY(0)}
      50%{transform:translateY(-6px)}
    }

    .section{padding:52px 0}
    .section.alt{background:#eef2ff}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:20px}
    .section-text{font-size:16px;color:#6b7280;line-height:1.7}
    .tactic-wrap{padding:20px}
    .board-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
    .controls{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
    .small-btn{border:none;border-radius:12px;padding:10px 14px;font-size:14px;font-weight:800;cursor:pointer;background:#111827;color:#fff}
    .small-btn.gray{background:#e5e7eb;color:#111827}
    .small-btn.blue{background:#2563eb}
    .color-btn{border:none;border-radius:12px;padding:10px 14px;font-size:14px;font-weight:800;color:#fff;cursor:pointer}
    .green-btn{background:#16a34a}.orange-btn{background:#f97316}.pink-btn{background:#ec4899}
    .count{font-weight:800;color:#111827}
    .field-wrap{display:flex;justify-content:center}
    .field{position:relative;width:min(100%,520px);aspect-ratio:.72/1;min-height:720px;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#34d399 0%,#10b981 100%);border:5px solid #fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);user-select:none;touch-action:none}
    .field::before,.field::after{content:"";position:absolute;pointer-events:none}
    .field::before{top:50%;left:0;transform:translateY(-50%);width:100%;height:3px;background:rgba(255,255,255,.95)}
    .field::after{left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:120px;border:3px solid rgba(255,255,255,.95);border-radius:50%}
    .penalty,.goal-area{position:absolute;border:3px solid rgba(255,255,255,.95);pointer-events:none}
    .penalty.top{top:0;left:18%;width:64%;height:15%;border-top:none}
    .penalty.bottom{bottom:0;left:18%;width:64%;height:15%;border-bottom:none}
    .goal-area.top{top:0;left:34%;width:32%;height:7%;border-top:none}
    .goal-area.bottom{bottom:0;left:34%;width:32%;height:7%;border-bottom:none}
    .jersey{position:absolute;width:132px;height:146px;cursor:grab;touch-action:none;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;z-index:5}
    .jersey.dragging{cursor:grabbing;z-index:1000;filter:brightness(1.03)}
    .jersey-svg{width:100%;height:100%;filter:drop-shadow(0 8px 8px rgba(0,0,0,.2));pointer-events:none}
    .name-input{position:absolute;top:39%;left:50%;transform:translate(-50%,-50%);width:94px;border:none;background:transparent;text-align:center;font-size:16px;font-weight:900;color:#000;outline:none;z-index:2;padding:1px 2px;line-height:1}
    .name-input::placeholder{color:rgba(0,0,0,.5)}

    .match-shell{display:grid;grid-template-columns:320px 1fr;gap:20px}
    .board-list-card{padding:20px}
    .match-category{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
    .chip{padding:10px 14px;border-radius:999px;background:#e5e7eb;color:#374151;font-weight:800;font-size:14px;cursor:pointer;border:none}
    .chip.on{background:#111827;color:#fff}
    .board-meta{font-size:14px;color:#6b7280;line-height:1.7;margin-bottom:14px}
    .board-list{display:grid;gap:12px;max-height:900px;overflow:auto;padding-right:4px}
    .post-item{border:1px solid #e5e7eb;border-radius:18px;padding:16px;background:#fff}
    .post-item.urgent{border:2px solid #ef4444;box-shadow:0 8px 20px rgba(239,68,68,.12)}
    .post-item h4{margin:0 0 8px;font-size:17px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .urgent-label{display:inline-flex;padding:5px 9px;border-radius:999px;background:#ef4444;color:#fff;font-size:12px;font-weight:900}
    .sub{font-size:13px;color:#6b7280;margin-bottom:8px;line-height:1.6}
    .post-item p{margin:0;color:#374151;line-height:1.65}
    .post-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
    .tiny-btn{border:none;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:800;cursor:pointer;background:#e5e7eb;color:#111827}
    .tiny-btn.primary{background:#111827;color:#fff}
    .tiny-btn.red{background:#fee2e2;color:#991b1b}
    .post-comments{margin-top:14px;padding-top:12px;border-top:1px solid #e5e7eb}
    .comment{background:#f8fafc;border-radius:12px;padding:10px 12px;margin-top:8px;font-size:14px;line-height:1.6;color:#374151}
    .comment-form{display:flex;gap:8px;margin-top:10px}
    .comment-form input{flex:1;border:1px solid #d1d5db;border-radius:12px;padding:10px 12px}
    .board-empty{padding:22px;border:1px dashed #cbd5e1;border-radius:18px;background:#fff;color:#64748b;text-align:center}

    .contact-box{padding:24px}
    .contact-box p{margin:0;color:#374151;line-height:1.8;font-size:17px}
    .modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;padding:18px;z-index:100}
    .modal-backdrop.show{display:flex}
    .modal{width:min(680px,100%);background:#fff;border-radius:24px;box-shadow:0 20px 60px rgba(0,0,0,.18);padding:22px}
    .modal h3{margin:0 0 14px}
    .form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    .field-box{display:flex;flex-direction:column;gap:6px}
    .field-box.full{grid-column:1/-1}
    .field-box label{font-size:14px;font-weight:800;color:#374151}
    .field-box input,.field-box textarea,.field-box select{border:1px solid #d1d5db;border-radius:14px;padding:12px 14px;background:#fff}
    .field-box textarea{min-height:110px;resize:vertical}
    .modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;flex-wrap:wrap}
    .site-footer{margin-top:30px;padding:24px 0;background:#111827;color:#fff}
    .footer-grid{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
    .footer-links{display:flex;gap:16px;flex-wrap:wrap}

    @media (max-width:980px){
      .hero-grid,.match-shell{grid-template-columns:1fr}
      h1{font-size:40px}
      h2{font-size:28px}
      .banner-stage{height:420px}
    }
    @media (max-width:640px){
      .top-brand{flex-direction:column;align-items:flex-start;padding:12px 0}
      .brand-3d{font-size:40px}
      .brand-sub{font-size:16px}
      nav{gap:12px;padding-top:0}
      .hero{padding:34px 0 24px}
      .lead{font-size:16px}
      .field{width:min(100%,380px);min-height:540px}
      .jersey{width:116px;height:128px}
      .name-input{width:82px;font-size:15px}
      .form-grid{grid-template-columns:1fr}
      .ad-text{font-size:20px}
      .banner-stage{height:360px}
      .player-3d.left{left:20%}
      .player-3d.right{left:72%}
    }