/* ===== KOTOON Mobile Responsive CSS ===== */
/* Applied to all pages via <link> before </head> */

/* ===== Desktop (>900px): hide mobile-only elements ===== */
@media(min-width:901px){
  .mobile-menu,.mobile-overlay{display:none!important}
  .mobile-toggle{display:none!important}
}

/* ===== Tablet & below (<=900px) ===== */
@media(max-width:900px){
  /* Container & sections */
  .container{padding:0 16px}
  .section{padding:48px 0}
  .section-title{font-size:1.4rem}
  .section-subtitle{font-size:0.95rem}

  /* Navigation */
  .nav-inner{padding:0 16px;height:56px}
  .nav-menu,.nav-phone{display:none!important}
  .mobile-toggle{display:flex!important;align-items:center;justify-content:center;width:40px;height:40px;font-size:1.3rem;background:none;border:none;cursor:pointer;color:var(--slate,#1E293B)}
  .logo img{height:30px!important}
  .logo-tag{display:none}
  .nav-right{gap:8px}
  .btn-coral,.nav-cta{padding:6px 14px;font-size:0.78rem}

  /* Topbar */
  .topbar{font-size:0.72rem;padding:6px 16px;line-height:1.5}

  /* Mobile menu overlay */
  .mobile-menu{display:none;position:fixed;top:0;right:0;width:80%;max-width:320px;height:100vh;background:#fff;z-index:9999;overflow-y:auto;box-shadow:-4px 0 24px rgba(0,0,0,0.15);padding:60px 0 24px;transform:translateX(100%);transition:transform 0.3s ease}
  .mobile-menu.open{display:block;transform:translateX(0)}
  .mobile-menu-close{position:absolute;top:16px;right:16px;font-size:1.6rem;background:none;border:none;cursor:pointer;color:#333;line-height:1}
  .mobile-menu ul{list-style:none;padding:0;margin:0}
  .mobile-menu>ul>li{border-bottom:1px solid #f0f0f0}
  .mobile-menu>ul>li>a,.mobile-menu>ul>li>.mm-toggle{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;font-size:0.95rem;color:#1E293B;text-decoration:none;font-weight:500;cursor:pointer;width:100%;background:none;border:none;text-align:left}
  .mobile-menu>ul>li>a:active{background:#f8f9fa}
  .mobile-menu .mm-sub{display:none;background:#f8f9fa}
  .mobile-menu .mm-sub.open{display:block}
  .mobile-menu .mm-sub a{display:block;padding:12px 40px;font-size:0.88rem;color:#475569;text-decoration:none}
  .mobile-menu .mm-sub a:active{background:#f1f5f9}
  .mobile-menu .mm-arrow{font-size:0.7rem;transition:transform 0.2s}
  .mobile-menu .mm-arrow.rotate{transform:rotate(180deg)}
  .mobile-menu .mm-cta{margin:16px 24px;padding:12px;text-align:center;background:#F43F5E;color:#fff;border-radius:8px;font-weight:600;text-decoration:none;display:block}
  .mobile-menu .mm-phone{text-align:center;padding:16px 24px;font-size:0.9rem;color:#64748B}
  .mobile-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);z-index:9998}
  .mobile-overlay.open{display:block}
  body.menu-open{overflow:hidden}

  /* Hero sections */
  .hero{padding:40px 0 48px}
  .hero-grid,.hero-inner{grid-template-columns:1fr!important;gap:24px}
  .hero-title{font-size:1.6rem!important}
  .hero-subtitle{font-size:0.92rem}
  .hero-card{display:none}
  .ahero{padding:60px 0 70px}
  .ahero h1{font-size:1.8rem!important}
  .ahero p{font-size:0.92rem}

  /* Grids → single column */
  .svc-grid,.pricing-grid,.case-grid,.trust-grid,.proc-grid,
  .mission-grid,.values-grid,.cert-grid,.team-grid,
  .contact-grid,.qr-inner,.address-grid,.form-row,
  .footer-grid,.content-split,.j-results,
  .stats-grid,.feature-grid,.step-grid,
  .tl-grid,.recruit-grid,.download-grid{grid-template-columns:1fr!important;gap:20px!important}
  .mission-grid,.tl-grid{grid-template-columns:1fr!important;gap:32px!important}

  /* Trust items */
  .trust-grid{grid-template-columns:repeat(2,1fr)!important;gap:16px!important}
  .trust-item::after{display:none!important}

  /* Service tabs */
  .svc-tabs{display:flex;overflow-x:auto;gap:6px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .svc-tab{white-space:nowrap;padding:8px 14px;font-size:0.78rem;flex-shrink:0}

  /* Process grid */
  .proc-grid::before{display:none!important}

  /* CTA */
  .wx-cta{flex-direction:column;text-align:center;padding:24px 16px;gap:16px}
  .wx-cta-qr{width:100px;height:100px}
  .cta-title{font-size:1.3rem!important}

  /* Cards */
  .svc-card,.pricing-card,.case-card{padding:20px 16px}

  /* Journal search */
  .j-search,.j-filters,.news-form{flex-direction:column;gap:8px}
  .j-search input,.j-search select{width:100%}

  /* Tables */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{font-size:0.82rem;min-width:600px}

  /* Footer */
  .footer-grid{grid-template-columns:1fr!important;gap:24px!important;padding:40px 16px}
  .footer-brand{margin-bottom:16px}
  .footer-bottom{flex-direction:column;gap:12px;text-align:center;padding:16px}

  /* About page */
  .intro{padding:48px 0}
  .intro-text{padding:0 4px}
  .intro-text .section-title{font-size:1.3rem}
  .intro-text p{font-size:0.92rem;line-height:1.85}
  .mission-text p{font-size:0.9rem}
  .mission-stat-num{font-size:1.8rem}

  /* Timeline */
  .timeline{padding-left:0}
  .timeline::before{left:20px!important}
  .tl-item{grid-template-columns:1fr!important;padding-left:50px!important;gap:8px}
  .tl-item:nth-child(even){grid-template-columns:1fr!important;padding-left:50px!important}

  /* Contact form */
  .form-input,.form-select,.form-textarea{width:100%;font-size:16px;padding:10px 12px}
  .form-label{font-size:0.85rem}

  /* Upload page */
  .upload-zone{padding:24px 16px}
  .upload-grid{grid-template-columns:1fr!important}

  /* General */
  h1{font-size:1.5rem}
  h2{font-size:1.25rem}
  h3{font-size:1.05rem}
  p{font-size:0.92rem}
  .btn{padding:10px 20px;font-size:0.88rem}
  img{max-width:100%;height:auto}
}

/* ===== Phone (<=480px) ===== */
@media(max-width:480px){
  .container{padding:0 12px}
  .section{padding:36px 0}
  .section-title{font-size:1.2rem}
  .hero-title{font-size:1.35rem!important}
  .ahero h1{font-size:1.5rem!important}
  .ahero{padding:48px 0 56px}
  .topbar{font-size:0.66rem;padding:5px 12px}
  .nav-inner{padding:0 12px;height:52px}
  .logo img{height:26px!important}
  .btn-coral,.nav-cta{padding:5px 12px;font-size:0.74rem}
  .mobile-toggle{width:36px;height:36px;font-size:1.2rem}
  .svc-grid,.pricing-grid,.case-grid{gap:12px!important}
  .svc-card,.pricing-card,.case-card{padding:16px 12px}
  .trust-grid{grid-template-columns:1fr!important}
  .footer-grid{padding:32px 12px;gap:20px!important}
  .cta-title{font-size:1.1rem!important}
  .mission-stat-num{font-size:1.5rem}
  .intro-text p{font-size:0.85rem}
  .tl-item{padding-left:44px!important}
  .timeline::before{left:16px!important}
  .mobile-menu{width:85%}
  .proc-step{padding:16px}
  .faq-item{padding:12px}
  .faq-q{font-size:0.9rem}
}