/* ==========================================================================
   Mobile / responsive optimizations  (Galaxy, iPhone, all small screens)
   Loaded via header.php with media="(max-width: 768px)"
   ========================================================================== */

/* Never allow accidental horizontal scrolling on phones.
   (clip keeps position:sticky header working, unlike overflow:hidden) */
html, body { overflow-x: clip; }

@media (max-width: 768px) {

  /* ---- Global rhythm ---------------------------------------------------- */
  :root { --header-h: 62px; --max-w: 100%; }
  body { font-size: 15px; }
  .container { padding: 0 16px; max-width: 100%; }

  /* ---- Header ----------------------------------------------------------- */
  .site-header .container { padding: 0 14px; }
  .site-header .logo img { height: 42px !important; }

  .header-actions { gap: 6px; }
  .lang-btn { padding: 7px 10px; font-size: 14px; }

  /* Slide-down mobile nav */
  .primary-nav {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex-direction: column; gap: 0; flex-wrap: nowrap;
    align-items: stretch;
    background: #fff;
    border-bottom: 1px solid var(--c-line);
    padding: 4px 0;
    transform: translateY(-120%);
    transition: transform .25s ease;
    box-shadow: var(--shadow-md);
  }
  .primary-nav.open { transform: translateY(0); }
  .primary-nav > a,
  .primary-nav .nav-item.has-sub > a {
    display: block;
    padding: 15px 20px; min-height: 48px;
    border-bottom: 1px solid var(--c-line-2);
    font-size: 16px; font-weight: 600;
  }
  .primary-nav > a:last-child { border-bottom: 0; }

  /* 회사소개 submenu — expanded & indented inside the drawer */
  .primary-nav .nav-item.has-sub { display: block; position: static; }
  .primary-nav .nav-sub {
    position: static; display: block; box-shadow: none;
    border-radius: 0; padding: 0; background: #f8fafc;
    border-bottom: 1px solid var(--c-line-2);
  }
  .primary-nav .nav-sub a {
    padding: 13px 20px 13px 36px; min-height: 46px;
    font-size: 15px; font-weight: 500; white-space: normal;
    border-bottom: 1px solid var(--c-line-2);
  }
  .primary-nav .nav-sub a:last-child { border-bottom: 0; }

  /* Hamburger → animated X */
  .nav-toggle { display: flex; width: 42px; height: 42px; padding: 9px; }
  .nav-toggle span { transition: transform .25s ease, opacity .2s ease; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Language dropdown: bigger touch targets, aligned to the right edge */
  .lang-switcher ul { right: 0; min-width: 160px; }
  .lang-switcher li a { padding: 12px 14px; min-height: 44px; display: flex; align-items: center; }

  /* ---- Forms: 16px prevents iOS Safari auto-zoom on focus --------------- */
  input, select, textarea,
  .search input, .write-form input, .write-form textarea,
  .comment-form input, .comment-form textarea,
  .cf-field input, .cf-field textarea,
  .secret-form input { font-size: 16px !important; }

  /* ---- Hero slider ------------------------------------------------------ */
  .hero-slider { aspect-ratio: auto; height: auto; min-height: 340px; }
  .hero-slider .hslide {
    background-size: cover !important;
    background-position: center;
    padding: 28px 0;
  }
  .hslide-caption {
    max-width: 100%; margin: 0 16px; text-align: center;
  }
  .hslide-caption .hs-h { font-size: 26px; }
  .hslide-caption .hs-sub { font-size: 16px; }
  .hslide-caption .hs-decor { margin-left: auto; margin-right: auto; }
  .hslide-caption .hs-p { font-size: 14px; }
  .hslider-dots { bottom: 14px; }

  /* ---- Home: company intro --------------------------------------------- */
  .intro-section { padding: 48px 16px; overflow: hidden; }
  .intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .intro-title { font-size: 28px; }
  .intro-quote { font-size: 18px; }
  .intro-media-accent { display: none; }       /* avoids off-canvas overhang */
  .intro-media-tag { right: 12px; bottom: -12px; padding: 9px 14px; }

  /* ---- Home: product categories ---------------------------------------- */
  .category-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .category-grid .category-card div[style*="height:190px"],
  .category-grid .category-card > div:first-child { height: 130px !important; font-size: 40px !important; }
  .category-grid .category-card > div:last-child { padding: 12px 14px !important; }
  .category-grid .category-card div[style*="font-size:19px"] { font-size: 15px !important; }

  /* ---- Home: contact section ------------------------------------------- */
  .contact-section { padding: 48px 16px; background-attachment: scroll; }
  .contact-phone { font-size: 22px; line-height: 1.5; }
  .contact-phone .cp-ico { display: inline; }
  .contact-bank { font-size: 13px; line-height: 1.9; }
  .cf-row { grid-template-columns: 1fr; gap: 12px; }
  .cf-submit { width: 100%; padding: 15px 20px; }

  /* ---- Sub hero & page hero -------------------------------------------- */
  .sub-hero { padding: 40px 16px; }
  .page-hero { padding: 56px 16px 46px; }
  .greeting-section { padding: 48px 16px; overflow: hidden; }
  .greeting-wrap { grid-template-columns: 1fr; gap: 36px; }
  .greeting-frame { left: -10px; bottom: -10px; }

  /* ---- Boards: list table ---------------------------------------------- */
  .board-page { padding: 28px 16px 64px; }
  .board-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .board-head.board-head-tools-only { justify-content: stretch; }
  .board-title { font-size: 22px; }
  .board-tools { flex-direction: column; align-items: stretch; gap: 8px; }
  .search { width: 100%; }
  .search input { flex: 1; min-width: 0; }
  .board-tools .btn-primary { width: 100%; }

  .board-table th, .board-table td { font-size: 13px; padding: 11px 6px; }
  .board-table .subj a { font-weight: 600; }
  /* Keep no., subject, date; drop author + hits to give the subject room */
  .board-table th:nth-child(1):not(.adm-col),
  .board-table .num-col { width: 36px; }
  .board-table thead th.meta-col:nth-last-child(1),   /* hits */
  .board-table tbody td:nth-last-child(1):not(.empty),
  .board-table thead th.meta-col:nth-last-child(3),   /* author */
  .board-table tbody td:nth-last-child(3):not(.empty) { display: none; }

  /* ---- Boards: photo grid ---------------------------------------------- */
  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .photo-meta { padding: 10px; }
  .photo-title { font-size: 13px; }

  /* ---- Boards: schedule calendar --------------------------------------- */
  .calendar td { min-height: 64px; height: 64px; padding: 4px; }
  .calendar td .d { font-size: 12px; }
  .cal-event { font-size: 10px; padding: 1px 4px; }
  .cal-nav { font-size: 14px; }

  /* ---- Post view -------------------------------------------------------- */
  .post-view { padding: 24px 16px 56px; }
  .post-head h1 { font-size: 22px; }
  .post-meta { font-size: 13px; }
  .post-body { font-size: 16px; padding: 18px 0; }
  .post-body img { width: 100%; height: auto; }
  .post-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .prev-next { flex-direction: column; gap: 8px; }
  .prev-next a { font-size: 13px; }
  .post-actions { gap: 8px; }
  .post-actions .btn, .post-actions .btn-danger { flex: 1; }

  /* ---- Write form ------------------------------------------------------- */
  .post-write { padding: 28px 16px 64px; }
  .write-form .row { grid-template-columns: 1fr; }
  .write-form .form-actions { flex-direction: column; }
  .write-form .form-actions .btn,
  .write-form .form-actions .btn-primary { width: 100%; }

  /* ---- Pager: thumb-friendly ------------------------------------------- */
  .pager a { min-width: 42px; height: 42px; }

  /* ---- Popups: centered, image auto-fit -------------------------------- */
  .popup-stack {
    left: 16px !important; right: 16px !important; top: 50% !important;
    transform: translateY(-50%) !important; align-items: center;
  }
  .popup { width: calc(100vw - 32px) !important; max-width: 480px; margin: 0 auto; }
  .popup img { width: 100%; height: auto; }

  /* ---- Footer ----------------------------------------------------------- */
  .site-footer { padding: 36px 0; margin-top: 56px; }
  .footer-grid { gap: 24px; }
  .footer-contacts li { font-size: 13.5px; }

  /* Scroll-to-top */
  .to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; font-size: 20px; }
}

/* ---- Very small phones (≤480px: iPhone SE, older Galaxy) --------------- */
@media (max-width: 480px) {
  .hslide-caption .hs-h { font-size: 22px; }
  .category-grid { grid-template-columns: 1fr !important; }
  .category-grid .category-card > div:first-child { height: 150px !important; }
  .calendar { font-size: 11px; }
  .calendar td { min-height: 52px; height: 52px; }
  .contact-phone { font-size: 19px; }
  .secret-card { padding: 32px 22px; }
  .secret-form { flex-direction: column; }
  .secret-form input[type=password] { max-width: 100%; }
  .secret-form button { width: 100%; }
}

/* ---- Landscape phones: shorter hero so content shows ------------------- */
@media (max-width: 900px) and (orientation: landscape) {
  .hero-slider { min-height: 78vh; }
  .sub-hero, .page-hero { padding-top: 36px; padding-bottom: 30px; }
}

/* iOS notch / safe-area padding */
@supports (padding: env(safe-area-inset-bottom)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  .site-header .container { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}