/* HAKOPRO JOB — Design System
   Inspired by hakopro.jp visual DNA (orange/cyan, box/container motif)
   but independent as a dedicated job portal.
*/

:root{
  /* Brand */
  --brand-orange: #F28E1C;      /* Hakopro primary orange */
  --brand-orange-dark: #E57A0A;
  --brand-orange-light: #FDE9CC;
  --brand-navy: #1A3A5C;        /* Trust navy (job portal standard) */
  --brand-navy-dark: #0F2742;
  --brand-cyan: #2FB6C7;        /* Hakopro accent cyan */
  --brand-cyan-light: #D9F1F4;

  /* Neutrals */
  --ink-900: #1a1a1a;
  --ink-700: #3a3a3a;
  --ink-500: #6b6b6b;
  --ink-400: #8a8a8a;
  --ink-300: #bdbdbd;
  --ink-200: #e4e4e4;
  --ink-100: #f2f2f0;
  --ink-50:  #f9f8f5;
  --paper:   #ffffff;

  /* Semantic */
  --success: #3FA873;
  --warn: #E8A531;
  --danger: #D94B4B;

  /* White logistics ribbon */
  --white-cert: #2FB6C7;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(20,20,20,.06), 0 1px 1px rgba(20,20,20,.04);
  --sh-md: 0 6px 18px rgba(20,20,20,.08), 0 2px 4px rgba(20,20,20,.04);
  --sh-lg: 0 20px 50px rgba(20,20,20,.12), 0 6px 12px rgba(20,20,20,.06);

  /* Type */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --font-en: "Inter", system-ui, sans-serif;
  --font-display: "Noto Sans JP", system-ui, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--ink-900);background:var(--ink-50);font-family:var(--font-jp);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;max-width:100%}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}

/* ---------- Utility ---------- */
.hk-container{max-width:1200px;margin:0 auto;padding:0 24px}
.hk-narrow{max-width:960px;margin:0 auto;padding:0 24px}

/* ---------- Header ---------- */
.hk-header{background:#fff;border-bottom:1px solid var(--ink-200);position:sticky;top:0;z-index:50}
.hk-header-top{background:var(--brand-navy);color:#fff;font-size:11px;padding:6px 0;letter-spacing:.02em}
.hk-header-top-inner{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:0 24px}
.hk-header-top a{opacity:.85;margin-left:16px;transition:opacity .15s}
.hk-header-top a:hover{opacity:1}
.hk-header-main{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1200px;margin:0 auto;gap:32px}
.hk-logo{display:flex;align-items:center;gap:8px;font-weight:900;letter-spacing:-.01em;color:var(--brand-navy)}
.hk-logo-img{height:34px;width:auto;display:block}
.hk-logo-sub{font-family:var(--font-en);font-size:18px;font-weight:900;color:var(--brand-orange);letter-spacing:.05em;background:var(--brand-orange-light);padding:2px 8px;border-radius:4px;line-height:1.2}
.hk-nav{display:flex;align-items:center;gap:24px}
.hk-nav a{font-size:14px;font-weight:600;color:var(--ink-700);transition:color .15s;position:relative;padding:6px 0}
.hk-nav a:hover{color:var(--brand-orange)}
.hk-nav a.is-active{color:var(--brand-orange)}
.hk-nav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-18px;height:3px;background:var(--brand-orange);border-radius:2px 2px 0 0}
.hk-header-cta{display:flex;align-items:center;gap:10px}

/* ---------- Buttons ---------- */
.hk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;font-weight:700;font-size:14px;border-radius:var(--r-md);transition:all .15s;white-space:nowrap;border:1.5px solid transparent}
.hk-btn-primary{background:var(--brand-orange);color:#fff;box-shadow:0 2px 0 var(--brand-orange-dark)}
.hk-btn-primary:hover{background:var(--brand-orange-dark);transform:translateY(-1px);box-shadow:0 3px 0 #b86500}
.hk-btn-navy{background:var(--brand-navy);color:#fff}
.hk-btn-navy:hover{background:var(--brand-navy-dark)}
.hk-btn-outline{background:#fff;color:var(--brand-navy);border-color:var(--ink-300)}
.hk-btn-outline:hover{border-color:var(--brand-orange);color:var(--brand-orange)}
.hk-btn-ghost{background:transparent;color:var(--ink-700)}
.hk-btn-ghost:hover{background:var(--ink-100)}
.hk-btn-lg{padding:14px 28px;font-size:16px;border-radius:var(--r-md)}
.hk-btn-xl{padding:18px 40px;font-size:17px;border-radius:var(--r-md)}
.hk-btn-sm{padding:7px 12px;font-size:12px}

/* ---------- Badges / chips ---------- */
.hk-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;font-size:11px;font-weight:700;border-radius:var(--r-full);line-height:1.4;letter-spacing:.02em}
.hk-badge-orange{background:var(--brand-orange-light);color:var(--brand-orange-dark)}
.hk-badge-cyan{background:var(--brand-cyan-light);color:#197E8A}
.hk-badge-navy{background:#E3EAF2;color:var(--brand-navy)}
.hk-badge-gray{background:var(--ink-100);color:var(--ink-700)}
.hk-badge-green{background:#DCF2E5;color:#1F7A4A}
.hk-badge-new{background:var(--danger);color:#fff}
.hk-badge-white{background:linear-gradient(135deg,#2FB6C7,#1C8A97);color:#fff;padding:4px 10px}

.hk-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:#fff;border:1.5px solid var(--ink-200);border-radius:var(--r-full);font-size:13px;font-weight:600;color:var(--ink-700);transition:all .15s;cursor:pointer}
.hk-chip:hover{border-color:var(--brand-orange);color:var(--brand-orange)}
.hk-chip.is-active{background:var(--brand-orange);border-color:var(--brand-orange);color:#fff}

/* ---------- Cards ---------- */
.hk-card{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-lg);transition:all .15s}
.hk-card-hover:hover{border-color:var(--brand-orange);box-shadow:var(--sh-md);transform:translateY(-2px)}

/* ---------- Footer ---------- */
.hk-footer{background:var(--brand-navy-dark);color:#cfd8e3;padding:56px 0 24px;margin-top:80px}
.hk-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;max-width:1200px;margin:0 auto;padding:0 24px}
.hk-footer h4{color:#fff;font-size:13px;font-weight:700;margin:0 0 16px;letter-spacing:.05em}
.hk-footer ul{list-style:none;padding:0;margin:0}
.hk-footer li{margin-bottom:10px;font-size:13px}
.hk-footer a{color:#a8b5c4;transition:color .15s}
.hk-footer a:hover{color:#fff}
.hk-footer-bottom{max-width:1200px;margin:48px auto 0;padding:20px 24px 0;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;font-size:12px;color:#8295a8}

/* ---------- Icons ---------- */
.hk-ico{width:1em;height:1em;flex-shrink:0;stroke-width:2;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Search Forms ---------- */
.hk-searchbar{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:8px;display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:1px;align-items:stretch}
.hk-searchbar-field{padding:14px 20px;display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--ink-200)}
.hk-searchbar-field:last-of-type{border-right:none}
.hk-searchbar-field label{font-size:11px;font-weight:700;color:var(--brand-orange);letter-spacing:.05em}
.hk-searchbar-field input,.hk-searchbar-field select{border:none;outline:none;font-size:15px;font-weight:600;color:var(--ink-900);padding:2px 0;background:transparent;font-family:inherit;width:100%}

/* ---------- Misc ---------- */
.hk-divider{height:1px;background:var(--ink-200);margin:24px 0}
.hk-kbd{display:inline-block;padding:2px 6px;font-size:11px;font-family:ui-monospace,monospace;background:var(--ink-100);border:1px solid var(--ink-200);border-radius:4px}

/* Logistics truck silhouette pattern (for hero bg accents) */
.hk-box-pattern{background-image:
  linear-gradient(90deg, transparent 49%, rgba(242,142,28,.05) 49%, rgba(242,142,28,.05) 51%, transparent 51%),
  linear-gradient(0deg,  transparent 49%, rgba(242,142,28,.05) 49%, rgba(242,142,28,.05) 51%, transparent 51%);
  background-size: 32px 32px;
}

/* Section title */
.hk-section-title{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 20px}
.hk-section-title h2{font-size:24px;font-weight:900;margin:0;letter-spacing:-.01em}
.hk-section-title .hk-en{color:var(--brand-orange);font-size:12px;font-weight:700;letter-spacing:.15em;margin-right:10px;text-transform:uppercase}
.hk-section-title h2 .hk-accent{color:var(--brand-orange)}

/* Scroll snap for chip rows */
.hk-chiprow{display:flex;gap:8px;overflow-x:auto;padding:4px 0}
.hk-chiprow::-webkit-scrollbar{display:none}

/* ---------- Hero (from index.html local styles) ---------- */
/* TOP の各セクション余白 (index.html の section padding をここで付与) */
section{padding:72px 0}
section.hk-tight{padding:48px 0}
.hk-hero{position:relative;background:linear-gradient(135deg,#FFF7EB 0%,#FFEBD1 45%,#FFE5C0 100%);padding:56px 0 80px;overflow:hidden}
.hk-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 15% 20%, rgba(242,142,28,.08) 0, transparent 40%),radial-gradient(circle at 85% 70%, rgba(47,182,199,.08) 0, transparent 45%);pointer-events:none}
.hk-hero-inner{position:relative;max-width:1200px;margin:0 auto;padding:0 24px}
.hk-hero-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;padding:8px 16px;border-radius:999px;font-size:12px;font-weight:700;color:var(--brand-navy);border:1.5px solid var(--brand-orange-light);margin-bottom:20px}
.hk-hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--brand-orange);box-shadow:0 0 0 4px var(--brand-orange-light);animation:hk-pulse 2s infinite}
@keyframes hk-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.hk-hero h1{font-size:52px;font-weight:900;line-height:1.15;margin:0 0 16px;letter-spacing:-.02em;color:var(--brand-navy-dark)}
.hk-hero h1 .hk-hl{background:linear-gradient(180deg,transparent 65%,rgba(242,142,28,.35) 65%);padding:0 4px}
.hk-hero .hk-en-sub{font-family:var(--font-en);color:var(--brand-orange);font-weight:600;letter-spacing:.02em;font-size:16px;margin-bottom:8px}
.hk-hero .hk-lead{font-size:17px;line-height:1.8;color:var(--ink-700);max-width:620px;margin:0 0 32px}
.hk-hero-stats{display:flex;gap:40px;margin-top:36px;flex-wrap:wrap}
.hk-hero-stat strong{display:block;font-size:32px;font-weight:900;color:var(--brand-orange);line-height:1;font-family:var(--font-en)}
.hk-hero-stat span{font-size:12px;color:var(--ink-500);font-weight:600;margin-top:4px;display:block}
.hk-hero-search{margin-top:32px;position:relative;z-index:2}
.hk-hero-search-tabs{display:flex;gap:4px;margin-bottom:-2px;position:relative;z-index:3}
.hk-hero-search-tab{padding:12px 24px;background:rgba(255,255,255,.7);border-radius:12px 12px 0 0;font-weight:700;font-size:14px;color:var(--ink-500);cursor:pointer;border:1.5px solid transparent;border-bottom:none}
.hk-hero-search-tab.is-active{background:#fff;color:var(--brand-navy);border-color:var(--ink-200)}
.hk-hero-search-tab .hk-count{display:inline-block;margin-left:8px;font-size:11px;color:var(--brand-orange);font-family:var(--font-en)}
/* ヒーロークイックリンク (検索バーと独立したボタン) */
.hk-hero-quick-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;margin-bottom:20px}
.hk-hero-quick-link{display:inline-flex;align-items:center;gap:10px;padding:10px 20px;background:#fff;border:1.5px solid var(--ink-200);border-radius:999px;color:var(--brand-navy);font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 1px 2px rgba(20,20,20,.04);transition:all .15s}
.hk-hero-quick-link:hover{border-color:var(--brand-orange);color:var(--brand-orange);transform:translateY(-1px);box-shadow:var(--sh-sm)}
.hk-hero-quick-link .label{line-height:1}
.hk-hero-quick-link .count{font-family:var(--font-en);font-size:12px;color:var(--brand-orange);font-weight:700;padding:2px 8px;background:var(--brand-orange-light);border-radius:999px;line-height:1.4}
.hk-searchbar .hk-ico-wrap{display:flex;align-items:center;gap:8px}
.hk-searchbar-submit{padding:0 32px;background:var(--brand-orange);color:#fff;font-weight:800;font-size:16px;border-radius:var(--r-md);box-shadow:0 2px 0 var(--brand-orange-dark);display:flex;align-items:center;gap:8px;border:none;cursor:pointer}
.hk-searchbar-submit:hover{background:var(--brand-orange-dark)}
.hk-hero-tags{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap;font-size:13px}
.hk-hero-tags .label{color:var(--ink-500);font-weight:600;margin-right:4px}
.hk-hero-tag{background:rgba(255,255,255,.8);border:1px solid var(--ink-200);padding:5px 12px;border-radius:999px;color:var(--ink-700);font-weight:600;cursor:pointer;transition:all .15s}
.hk-hero-tag:hover{background:#fff;border-color:var(--brand-orange);color:var(--brand-orange)}
.hk-hero-grid{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start}
.hk-hero-card-stack{position:relative;padding-top:20px}
.hk-card-float{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh-md);position:relative}
.hk-card-float + .hk-card-float{margin-top:-8px;margin-left:40px}
.hk-card-float .co-avatar{width:40px;height:40px;border-radius:8px;background:linear-gradient(135deg,#F28E1C,#E57A0A);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:16px}

/* ---------- Area / Type / Cond grids (index) ---------- */
.hk-area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hk-area-card{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;background:#fff;border:1.5px solid var(--ink-200);border-radius:var(--r-md);transition:all .15s;cursor:pointer}
.hk-area-card:hover{border-color:var(--brand-orange);background:#FFFBF4;transform:translateY(-2px)}
.hk-area-card .name{font-weight:700;font-size:16px}
.hk-area-card .en{font-size:11px;color:var(--ink-400);letter-spacing:.08em;margin-top:2px;font-family:var(--font-en)}
.hk-area-card .count{display:flex;align-items:baseline;gap:3px;color:var(--brand-orange)}
.hk-area-card .count b{font-size:22px;font-weight:900;font-family:var(--font-en)}
.hk-area-card .count span{font-size:11px;font-weight:600}

.hk-type-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.hk-type-card{padding:20px 16px;background:#fff;border:1.5px solid var(--ink-200);border-radius:var(--r-md);text-align:center;cursor:pointer;transition:all .15s}
.hk-type-card:hover{border-color:var(--brand-orange);background:#FFFBF4}
.hk-type-ico{width:48px;height:48px;margin:0 auto 10px;background:var(--brand-orange-light);color:var(--brand-orange-dark);border-radius:12px;display:grid;place-items:center}
.hk-type-ico svg{width:24px;height:24px}
.hk-type-card .name{font-weight:700;font-size:14px;margin-bottom:2px}
.hk-type-card .desc{font-size:11px;color:var(--ink-500);margin-bottom:6px}
.hk-type-card .count{font-size:12px;color:var(--brand-orange);font-weight:700;font-family:var(--font-en)}

.hk-cond-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.hk-cond-card{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#fff;border:1.5px solid var(--ink-200);border-radius:var(--r-md);cursor:pointer;transition:all .15s}
.hk-cond-card:hover{border-color:var(--brand-cyan);background:var(--brand-cyan-light)}
.hk-cond-card .name{font-weight:700;font-size:14px}
.hk-cond-card .en{font-size:10px;color:var(--ink-400);font-family:var(--font-en);margin-top:1px}
.hk-cond-card .count{font-size:13px;color:var(--brand-orange);font-weight:800;font-family:var(--font-en)}

/* ---------- Featured job card (index) ---------- */
.hk-job-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hk-job-card{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-lg);overflow:hidden;transition:all .15s;display:flex;flex-direction:column}
.hk-job-card:hover{border-color:var(--brand-orange);box-shadow:var(--sh-md);transform:translateY(-2px)}
.hk-job-card{flex-direction:row;align-items:stretch}
.hk-job-card-link{display:flex;flex:1;color:inherit;text-decoration:none;align-items:stretch;padding:18px 20px;gap:16px}
.hk-job-card-right{flex:1;display:flex;flex-direction:column;min-width:0;order:1}
.hk-job-card .hk-media{position:relative;background:var(--ink-50);overflow:hidden;order:2;flex:0 0 180px;width:180px;aspect-ratio:4/3;height:auto;align-self:flex-start;border-radius:var(--r-sm)}
.hk-job-card .hk-media-fallback{background:var(--brand-orange-light);padding:8px;display:flex;align-items:flex-end;justify-content:flex-start}
.hk-job-card .hk-media-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;background:var(--ink-50)}
.hk-job-card .hk-media-tags{position:absolute;left:8px;bottom:8px;display:flex;gap:4px;flex-wrap:wrap;z-index:1}
.hk-job-card .hk-media-fallback .hk-media-tags{position:static}
.hk-job-grid{grid-template-columns:repeat(2,1fr)}
.hk-job-card .hk-body{padding:0;flex:1;display:flex;flex-direction:column;gap:8px}
.hk-job-card .hk-body h3{margin:0;font-size:15px;font-weight:800;line-height:1.45;color:var(--brand-navy-dark)}
.hk-job-card .hk-meta{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ink-700)}
.hk-job-card .hk-meta-row{display:flex;align-items:center;gap:8px}
.hk-job-card .hk-meta-row svg{color:var(--brand-orange)}
.hk-job-card .hk-salary{font-size:18px;font-weight:900;color:var(--brand-navy-dark);font-family:var(--font-en)}
.hk-job-card .hk-salary small{font-size:11px;color:var(--ink-500);margin-left:4px;font-weight:600;font-family:var(--font-jp)}
.hk-job-card .hk-foot{padding:8px 0 0;margin-top:auto;display:flex;justify-content:space-between;align-items:center;background:transparent}
.hk-job-card .hk-co{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-700);font-weight:600}
.hk-job-card .hk-co-mark{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:11px}
.hk-job-card .hk-save-btn{background:transparent;border:none;cursor:pointer;padding:4px;color:var(--ink-300);transition:color .15s}
.hk-job-card .hk-save-btn:hover{color:var(--brand-orange)}
.hk-job-card .hk-save-btn.is-saved{color:var(--danger)}

/* ---------- Company list (index) ---------- */
.hk-co-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hk-co-item{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-md);padding:18px 20px;display:flex;gap:14px;align-items:flex-start;cursor:pointer;transition:all .15s}
.hk-co-item:hover{border-color:var(--brand-orange);box-shadow:var(--sh-sm)}
.hk-co-item .co-avatar{width:44px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:16px;flex-shrink:0}
.hk-co-item .co-info h4{margin:0 0 4px;font-size:14px;font-weight:800;line-height:1.3}
.hk-co-item .co-info .ruby{font-size:10px;color:var(--ink-400);margin-bottom:6px}
.hk-co-item .co-info .meta{display:flex;gap:10px;font-size:11px;color:var(--ink-500);margin-bottom:6px;flex-wrap:wrap}

/* ---------- How it works (index) ---------- */
.hk-how{background:var(--brand-navy-dark);color:#fff;padding:72px 0;border-radius:24px;margin:40px 0}
.hk-how h2{color:#fff}
.hk-how-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
.hk-how-step{padding:28px 24px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);position:relative}
.hk-how-step .num{font-family:var(--font-en);font-size:40px;font-weight:900;color:var(--brand-orange);line-height:1;margin-bottom:12px}
.hk-how-step h3{font-size:17px;font-weight:800;margin:0 0 8px;color:#fff}
.hk-how-step p{font-size:13px;color:#a8b5c4;line-height:1.6;margin:0}

/* White ribbon (index) */
.hk-white-banner{background:linear-gradient(135deg,#2FB6C7 0%, #197E8A 100%);color:#fff;border-radius:24px;padding:40px 48px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;margin:40px 0}
.hk-white-banner h2{color:#fff;margin:0 0 8px;font-size:26px;font-weight:900}
.hk-white-banner p{margin:0;font-size:14px;line-height:1.7;opacity:.9}
.hk-white-banner .hk-btn{background:#fff;color:#197E8A}

/* Column */
.hk-col-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hk-col-card{display:flex;flex-direction:column;gap:8px;cursor:pointer}
.hk-col-card .thumb{aspect-ratio:16/10;border-radius:var(--r-md);background:var(--ink-100);overflow:hidden;position:relative}
.hk-col-card .tag{position:absolute;top:10px;left:10px;background:#fff;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:700;color:var(--brand-navy)}
.hk-col-card h3{font-size:15px;font-weight:700;line-height:1.5;margin:4px 0 0}
.hk-col-card .date{font-size:11px;color:var(--ink-400);font-family:var(--font-en)}

/* ---------- Search page ---------- */
.hk-searchbar-top{background:var(--ink-100);padding:16px 0;border-bottom:1px solid var(--ink-200)}
.hk-searchbar-top .hk-searchbar{box-shadow:var(--sh-sm);border:1px solid var(--ink-200)}
.hk-results-layout{display:grid;grid-template-columns:280px 1fr;gap:24px;max-width:1200px;margin:0 auto;padding:24px}
.hk-sidebar{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-md);padding:20px;position:sticky;top:100px;align-self:start;max-height:calc(100vh - 120px);overflow-y:auto}
.hk-sidebar-group{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--ink-200)}
.hk-sidebar-group:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.hk-sidebar-group h4{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:800;margin:0 0 12px;color:var(--brand-navy)}
.hk-sidebar-group h4 small{font-size:10px;color:var(--ink-400);font-family:var(--font-en);letter-spacing:.1em;font-weight:600}
.hk-check{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px;color:var(--ink-700);cursor:pointer}
.hk-check input{accent-color:var(--brand-orange)}
.hk-check .count{margin-left:auto;color:var(--ink-400);font-size:11px;font-family:var(--font-en)}
.hk-sidebar-group .hk-chiprow{flex-wrap:wrap}
.hk-chip-sm{padding:5px 10px;font-size:12px;border:1.5px solid var(--ink-200);border-radius:999px;background:#fff;cursor:pointer;font-weight:600;color:var(--ink-700)}
.hk-chip-sm.is-active{background:var(--brand-orange);color:#fff;border-color:var(--brand-orange)}
.hk-salary-range{display:flex;align-items:center;gap:8px;margin-top:8px}
.hk-salary-range input{width:100%;padding:6px 10px;border:1px solid var(--ink-200);border-radius:6px;font-size:12px;font-family:var(--font-en)}
.hk-results-header{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-md);padding:16px 20px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}
.hk-results-count{font-size:14px;color:var(--ink-700)}
.hk-results-count strong{font-size:22px;color:var(--brand-orange);font-weight:900;font-family:var(--font-en);margin-right:4px}
.hk-results-sort{display:flex;align-items:center;gap:12px;font-size:13px}
.hk-results-sort select{padding:6px 12px;border:1px solid var(--ink-200);border-radius:6px;font-size:13px;font-weight:600;font-family:inherit}
.hk-result-card{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-md);margin-bottom:12px;display:grid;grid-template-columns:140px 1fr 180px;overflow:hidden;transition:all .15s}
.hk-result-card:hover{border-color:var(--brand-orange);box-shadow:var(--sh-sm)}
.hk-result-media{background:linear-gradient(135deg,#F28E1C,#E57A0A);position:relative;padding:10px}
.hk-result-media-tags{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.hk-result-body{padding:16px 20px;display:flex;flex-direction:column;gap:8px}
.hk-result-body .co{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-500);font-weight:600}
.hk-result-body h3{margin:2px 0 4px;font-size:17px;font-weight:800;color:var(--brand-navy-dark);line-height:1.4}
.hk-result-meta{display:grid;grid-template-columns:repeat(3,auto);gap:12px 20px;font-size:12px;color:var(--ink-700);margin-top:4px}
.hk-result-meta > div{display:flex;align-items:center;gap:6px}
.hk-result-meta svg{color:var(--brand-orange);flex-shrink:0}
.hk-result-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.hk-result-side{background:var(--ink-50);border-left:1px solid var(--ink-200);padding:16px 18px;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;gap:10px}
.hk-result-salary{font-size:11px;color:var(--ink-500);font-weight:600}
.hk-result-salary strong{display:block;font-size:19px;color:var(--brand-navy-dark);font-weight:900;font-family:var(--font-en);margin-top:2px;line-height:1.1}
.hk-result-applicants{font-size:11px;color:var(--ink-500);display:flex;align-items:center;gap:4px}
.hk-pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin:32px 0}
.hk-page{width:36px;height:36px;border:1px solid var(--ink-200);border-radius:6px;background:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--ink-700);cursor:pointer}
.hk-page.is-active{background:var(--brand-orange);color:#fff;border-color:var(--brand-orange)}
.hk-page:hover:not(.is-active){border-color:var(--brand-orange);color:var(--brand-orange)}
.hk-breadcrumb{max-width:1200px;margin:0 auto;padding:12px 24px;font-size:12px;color:var(--ink-500)}
.hk-breadcrumb a{color:var(--brand-orange);margin:0 6px}
.hk-active-filters{display:flex;gap:6px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--ink-200);margin-top:12px}
.hk-af{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:var(--brand-orange-light);color:var(--brand-orange-dark);border-radius:999px;font-size:11px;font-weight:700;cursor:pointer}
.hk-af svg{width:10px;height:10px;stroke-width:3}

/* ---------- Browse page ---------- */
.hk-page-hero{background:linear-gradient(135deg,#FFF7EB,#FFEBD1);padding:40px 0}
.hk-page-hero h1{margin:0 0 8px;font-size:34px;font-weight:900;color:var(--brand-navy-dark);letter-spacing:-.01em}
.hk-page-hero .en{color:var(--brand-orange);font-size:12px;font-weight:700;letter-spacing:.15em;font-family:var(--font-en);margin-bottom:10px}
.hk-page-hero p{margin:0;font-size:14px;color:var(--ink-700)}
.hk-tab-row{display:flex;gap:4px;border-bottom:2px solid var(--ink-200);max-width:1200px;margin:0 auto;padding:0 24px}
.hk-tab{padding:14px 24px;font-size:14px;font-weight:700;color:var(--ink-500);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px}
.hk-tab.on{color:var(--brand-orange);border-color:var(--brand-orange)}
.hk-area-map{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hk-area-big{padding:22px 24px;background:#fff;border:1.5px solid var(--ink-200);border-radius:var(--r-md);cursor:pointer;transition:all .15s}
.hk-area-big:hover{border-color:var(--brand-orange);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.hk-area-big-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--ink-200)}
.hk-area-big-head h3{margin:0;font-size:18px;font-weight:900}
.hk-area-big-head .en{font-size:10px;color:var(--ink-400);letter-spacing:.08em;font-family:var(--font-en);font-weight:600;margin-top:2px}
.hk-area-big-head .count{color:var(--brand-orange);font-weight:900;font-family:var(--font-en);font-size:20px}
.hk-area-big-head .count small{font-size:11px;font-weight:600;font-family:var(--font-jp)}
.hk-pref-list{display:flex;flex-wrap:wrap;gap:5px}
.hk-pref{padding:5px 10px;background:var(--ink-100);border-radius:4px;font-size:11px;font-weight:600;color:var(--ink-700);cursor:pointer;transition:all .15s}
.hk-pref:hover{background:var(--brand-orange);color:#fff}
.hk-pref .n{color:var(--brand-orange);font-weight:700;font-family:var(--font-en);margin-left:4px;font-size:10px}
.hk-pref:hover .n{color:#fff}
.hk-type-big-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hk-type-big{background:#fff;border:1.5px solid var(--ink-200);border-radius:var(--r-md);padding:24px;cursor:pointer;transition:all .15s;display:flex;gap:14px;align-items:flex-start}
.hk-type-big:hover{border-color:var(--brand-orange);background:#FFFBF4}
.hk-type-big .ico{width:56px;height:56px;background:var(--brand-orange-light);color:var(--brand-orange-dark);border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.hk-type-big .info h3{margin:0 0 2px;font-size:16px;font-weight:800}
.hk-type-big .info .en{font-size:10px;color:var(--ink-400);font-family:var(--font-en);font-weight:600;letter-spacing:.05em}
.hk-type-big .info .desc{font-size:12px;color:var(--ink-500);margin:6px 0 8px}
.hk-type-big .info .count{font-size:14px;color:var(--brand-orange);font-weight:900;font-family:var(--font-en)}
.hk-co-browse-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hk-co-browse{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-md);padding:18px;display:flex;gap:12px;align-items:flex-start;transition:all .15s}
.hk-co-browse:hover{border-color:var(--brand-orange);box-shadow:var(--sh-sm)}
.hk-co-browse .avatar{width:48px;height:48px;border-radius:8px;color:#fff;font-weight:900;font-size:20px;display:grid;place-items:center;flex-shrink:0}
.hk-co-browse h4{margin:0 0 4px;font-size:14px;font-weight:800;line-height:1.3;color:var(--brand-navy-dark)}
.hk-co-browse .meta{font-size:11px;color:var(--ink-500);margin-bottom:6px}
.hk-co-browse .tags{display:flex;gap:4px;flex-wrap:wrap}

/* ---------- Job Detail (job.html) ---------- */
.hk-job-hero{background:linear-gradient(180deg,#FFF7EB,transparent);padding:24px 0 0}
.hk-breadcrumb{max-width:1200px;margin:0 auto;padding:0 24px 16px;font-size:12px;color:var(--ink-500)}
.hk-breadcrumb a{color:var(--brand-orange);margin:0 4px}
.hk-job-hero-inner{max-width:1200px;margin:0 auto;padding:0 24px}
.hk-job-hero-top{background:#fff;border-radius:var(--r-lg);border:1px solid var(--ink-200);overflow:hidden;display:grid;grid-template-columns:380px 1fr;align-items:start}
.hk-job-hero-top--no-image{grid-template-columns:1fr}
.hk-job-hero-img-wrap{display:flex;flex-direction:column}
.hk-job-hero-img{aspect-ratio:4/3;width:380px;min-height:0;background-size:cover;background-position:center;background-color:var(--ink-50);position:relative}
.hk-job-hero-caption{padding:14px 18px;border-top:1px solid var(--ink-200);background:var(--ink-50)}
.hk-job-hero-caption-id{font-family:var(--font-en);font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--ink-500);margin-bottom:6px}
.hk-job-hero-caption-text{font-size:13px;font-weight:700;line-height:1.6;color:var(--brand-navy-dark)}
.hk-job-hero-img-tags{position:absolute;top:16px;left:16px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.hk-job-hero-img-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.hk-job-hero-img-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5)}
.hk-job-hero-img-dots span.on{background:#fff;width:24px;border-radius:4px}
.hk-job-hero-right{padding:28px 32px;display:flex;flex-direction:column;gap:14px}
.hk-job-hero-right .co{display:flex;align-items:center;gap:10px}
.hk-job-hero-right .co .mark{width:32px;height:32px;border-radius:6px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:14px}
.hk-job-hero-right .co a{font-size:13px;color:var(--brand-navy);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.hk-job-hero-right h1{margin:0;font-size:26px;font-weight:900;letter-spacing:-.01em;line-height:1.35;color:var(--brand-navy-dark)}
.hk-job-hero-right .tags{display:flex;gap:6px;flex-wrap:wrap}
.hk-job-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px 0;border-top:1px solid var(--ink-200);border-bottom:1px solid var(--ink-200)}
.hk-job-summary-cell label{display:block;font-size:10px;color:var(--ink-400);font-weight:700;letter-spacing:.08em;margin-bottom:2px;font-family:var(--font-en)}
.hk-job-summary-cell .v{font-size:13px;font-weight:700;color:var(--ink-900)}
.hk-job-summary-cell .v.salary{font-size:17px;color:var(--brand-orange);font-family:var(--font-en)}
.hk-job-hero-actions{display:flex;gap:10px;align-items:center}
.hk-job-hero-actions .hk-btn-xl{flex:1;justify-content:center}
.hk-ico-btn{width:52px;height:52px;border:1.5px solid var(--ink-200);border-radius:var(--r-md);display:grid;place-items:center;background:#fff;cursor:pointer;color:var(--ink-500);transition:all .15s}
.hk-ico-btn:hover{border-color:var(--brand-orange);color:var(--brand-orange)}
.hk-ico-btn.is-saved{border-color:var(--danger);color:var(--danger);background:#FEF1F1}
.hk-job-tabs{position:sticky;top:89px;background:#fff;border-bottom:1px solid var(--ink-200);z-index:40;margin-top:24px}
.hk-job-tabs-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;gap:28px}
.hk-job-tab{padding:16px 0;font-size:14px;font-weight:700;color:var(--ink-500);cursor:pointer;border-bottom:3px solid transparent}
.hk-job-tab.on{color:var(--brand-orange);border-color:var(--brand-orange)}
.hk-job-layout{display:grid;grid-template-columns:1fr 320px;gap:32px;max-width:1200px;margin:0 auto;padding:32px 24px}
.hk-block{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-lg);padding:28px 32px;margin-bottom:20px}
.hk-block h2{margin:0 0 18px;font-size:20px;font-weight:900;color:var(--brand-navy-dark);display:flex;align-items:center;gap:8px}
.hk-block h2::before{content:"";width:4px;height:22px;background:var(--brand-orange);border-radius:3px}
.hk-block h2 small{font-size:11px;color:var(--ink-400);font-family:var(--font-en);font-weight:600;letter-spacing:.1em;margin-left:6px}
.hk-dl{display:grid;grid-template-columns:140px 1fr}
.hk-dl dt,.hk-dl dd{padding:14px 0;border-bottom:1px solid var(--ink-200)}
.hk-dl dt{font-size:13px;font-weight:700;color:var(--ink-500)}
.hk-dl dd{font-size:14px;color:var(--ink-900);margin:0;line-height:1.7}
.hk-dl dt:last-of-type,.hk-dl dd:last-of-type{border-bottom:none}
.hk-welfare-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.hk-welfare-item{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--ink-50);border-radius:var(--r-sm);font-size:13px;font-weight:600}
.hk-welfare-item svg{color:var(--success);flex-shrink:0}
.hk-ceomsg{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:20px;background:var(--ink-50);border-radius:var(--r-md);margin-top:12px}
.hk-ceomsg-avatar{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,#F28E1C,#E57A0A);display:grid;place-items:center;color:#fff;font-weight:900;font-size:36px}
.hk-ceomsg-name{font-size:13px;font-weight:700;color:var(--brand-navy);margin-top:8px}
.hk-ceomsg-quote{font-size:14px;line-height:1.9;color:var(--ink-700);position:relative;padding-left:24px}
.hk-ceomsg-quote::before{content:"“";position:absolute;left:0;top:-10px;font-size:40px;color:var(--brand-orange);font-family:serif;line-height:1}
.hk-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hk-gallery-item{aspect-ratio:4/3;border-radius:var(--r-sm);background:var(--ink-200)}
.hk-map{height:260px;border-radius:var(--r-sm);background:linear-gradient(135deg,#D9F1F4 0%,#E3EAF2 100%);position:relative;overflow:hidden;background-image:
  linear-gradient(90deg, transparent 49.5%, rgba(26,58,92,.1) 49.5%, rgba(26,58,92,.1) 50.5%, transparent 50.5%),
  linear-gradient(0deg, transparent 49.5%, rgba(26,58,92,.1) 49.5%, rgba(26,58,92,.1) 50.5%, transparent 50.5%),
  linear-gradient(135deg,#D9F1F4,#E3EAF2);
  background-size:48px 48px,48px 48px,auto}
.hk-map-pin{position:absolute;top:45%;left:55%;transform:translate(-50%,-100%);background:var(--brand-orange);color:#fff;padding:6px 12px;border-radius:var(--r-full);font-size:12px;font-weight:700;display:flex;align-items:center;gap:4px;box-shadow:0 4px 12px rgba(242,142,28,.4)}
.hk-map-pin::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--brand-orange)}
.hk-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.hk-flow-step{background:var(--brand-orange-light);border-radius:var(--r-sm);padding:14px;position:relative}
.hk-flow-step .t{font-size:12px;color:var(--brand-orange-dark);font-weight:700;margin-bottom:4px;font-family:var(--font-en)}
.hk-flow-step .d{font-size:13px;font-weight:700;color:var(--brand-navy-dark)}
.hk-flow-step::after{content:"▸";position:absolute;right:-14px;top:50%;transform:translateY(-50%);color:var(--brand-orange);font-size:20px;z-index:1}
.hk-flow-step:last-child::after{display:none}
.hk-side{position:sticky;top:110px;align-self:start;display:flex;flex-direction:column;gap:16px}
.hk-side-cta{background:linear-gradient(135deg,#1A3A5C,#0F2742);color:#fff;border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:12px}
.hk-side-cta .s{font-size:12px;opacity:.85}
.hk-side-cta .v{font-size:26px;font-weight:900;font-family:var(--font-en);color:var(--brand-orange);line-height:1.1}
.hk-side-cta .hk-btn{justify-content:center}
.hk-related{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-lg);padding:20px}
.hk-related h3{margin:0 0 14px;font-size:14px;font-weight:800}
.hk-related-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--ink-200);cursor:pointer}
.hk-related-item:last-child{border-bottom:none}
.hk-related-item .thumb{width:56px;height:56px;border-radius:6px;flex-shrink:0}
.hk-related-item .info h4{margin:0 0 3px;font-size:12px;font-weight:700;line-height:1.4;color:var(--brand-navy-dark)}
.hk-related-item .info .sal{font-size:13px;font-weight:900;color:var(--brand-orange);font-family:var(--font-en)}
.hk-related-item .info .meta{font-size:10px;color:var(--ink-500);margin-top:2px}
.hk-sticky-apply{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--ink-200);padding:12px 0;z-index:45;box-shadow:0 -4px 12px rgba(0,0,0,.06)}
.hk-sticky-apply-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:16px}
.hk-sticky-apply .title{flex:1;font-size:13px;font-weight:700;color:var(--ink-700);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hk-sticky-apply .salary{color:var(--brand-orange);font-family:var(--font-en);font-weight:900;font-size:18px;white-space:nowrap}

/* ---------- Company Detail (company.html) ---------- */
.hk-co-cover{height:260px;background:linear-gradient(135deg,#F28E1C 0%, #E57A0A 60%, #1A3A5C 100%);position:relative;overflow:hidden}
.hk-co-cover::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.15) 0,transparent 40%),radial-gradient(circle at 80% 70%,rgba(47,182,199,.2) 0,transparent 40%)}
.hk-breadcrumb{max-width:1200px;margin:0 auto;padding:12px 24px;font-size:12px;color:var(--ink-500)}
.hk-breadcrumb a{color:var(--brand-orange);margin:0 4px}
.hk-co-header{max-width:1200px;margin:-100px auto 0;padding:0 24px;position:relative;z-index:2}
.hk-co-identity{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-lg);padding:32px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;box-shadow:var(--sh-md)}
.hk-co-logo{width:100px;height:100px;border-radius:16px;background:linear-gradient(135deg,#F28E1C,#E57A0A);color:#fff;font-size:44px;font-weight:900;display:grid;place-items:center;box-shadow:0 4px 0 var(--brand-orange-dark)}
.hk-co-title .ruby{font-size:12px;color:var(--ink-500);font-weight:600;margin-bottom:4px}
.hk-co-title h1{margin:0 0 8px;font-size:30px;font-weight:900;color:var(--brand-navy-dark);letter-spacing:-.01em}
.hk-co-title .tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.hk-co-title .meta{display:flex;gap:16px;font-size:13px;color:var(--ink-700)}
.hk-co-actions{display:flex;flex-direction:column;gap:10px;min-width:200px}
/* Metrics strip */
.hk-co-metrics{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-lg);padding:24px;margin-top:16px;display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.hk-co-metric label{font-size:10px;color:var(--ink-400);font-weight:700;letter-spacing:.1em;font-family:var(--font-en)}
.hk-co-metric .v{font-size:24px;font-weight:900;color:var(--brand-navy-dark);line-height:1.1;margin-top:4px;font-family:var(--font-en)}
.hk-co-metric .s{font-size:11px;color:var(--ink-500);margin-top:2px}
/* Tabs */
.hk-co-tabs{background:#fff;border-bottom:1px solid var(--ink-200);position:sticky;top:89px;z-index:40;margin-top:24px}
.hk-co-tabs-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;gap:28px}
.hk-co-tab{padding:16px 4px;font-size:14px;font-weight:700;color:var(--ink-500);cursor:pointer;border-bottom:3px solid transparent}
.hk-co-tab.on{color:var(--brand-orange);border-color:var(--brand-orange)}
.hk-co-tab .c{font-size:11px;color:var(--ink-400);margin-left:6px;font-family:var(--font-en)}
/* Layout */
.hk-co-layout{display:grid;grid-template-columns:1fr 320px;gap:32px;max-width:1200px;margin:0 auto;padding:32px 24px}
.hk-block{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-lg);padding:28px 32px;margin-bottom:20px}
.hk-block h2{margin:0 0 18px;font-size:20px;font-weight:900;color:var(--brand-navy-dark);display:flex;align-items:center;gap:8px}
.hk-block h2::before{content:"";width:4px;height:22px;background:var(--brand-orange);border-radius:3px}
.hk-block h2 small{font-size:11px;color:var(--ink-400);font-family:var(--font-en);font-weight:600;letter-spacing:.1em;margin-left:6px}
.hk-dl{display:grid;grid-template-columns:140px 1fr}
.hk-dl dt,.hk-dl dd{padding:14px 0;border-bottom:1px solid var(--ink-200)}
.hk-dl dt{font-size:13px;font-weight:700;color:var(--ink-500)}
.hk-dl dd{font-size:14px;color:var(--ink-900);margin:0;line-height:1.7}
.hk-dl dt:last-of-type,.hk-dl dd:last-of-type{border-bottom:none}
.hk-ceo{display:grid;grid-template-columns:140px 1fr;gap:20px}
.hk-ceo-avatar{width:140px;height:140px;border-radius:50%;background:linear-gradient(135deg,#F28E1C,#E57A0A);color:#fff;font-size:42px;font-weight:900;display:grid;place-items:center}
.hk-ceo-quote{font-size:14px;line-height:1.9;color:var(--ink-700);position:relative;padding-left:28px}
.hk-ceo-quote::before{content:"“";position:absolute;left:0;top:-16px;font-size:52px;color:var(--brand-orange);font-family:serif;line-height:1}
.hk-vehicles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hk-vehicle{padding:16px;background:var(--ink-50);border-radius:var(--r-sm);text-align:center}
.hk-vehicle .ico{width:48px;height:48px;margin:0 auto 8px;background:#fff;color:var(--brand-orange);border-radius:10px;display:grid;place-items:center}
.hk-vehicle .n{font-size:22px;font-weight:900;color:var(--brand-navy-dark);font-family:var(--font-en)}
.hk-vehicle .t{font-size:12px;color:var(--ink-500);font-weight:600}
.hk-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hk-gallery-item{aspect-ratio:4/3;border-radius:var(--r-sm)}
.hk-interview{display:grid;grid-template-columns:100px 1fr;gap:18px;padding:20px;background:var(--ink-50);border-radius:var(--r-md);margin-bottom:12px}
.hk-interview-avatar{width:100px;height:100px;border-radius:12px;color:#fff;font-size:32px;font-weight:900;display:grid;place-items:center}
.hk-interview h4{margin:0 0 4px;font-size:14px;font-weight:800}
.hk-interview .role{font-size:11px;color:var(--ink-500);margin-bottom:8px}
.hk-interview .q{font-size:14px;font-weight:800;color:var(--brand-navy-dark);margin-bottom:4px}
.hk-interview .a{font-size:13px;color:var(--ink-700);line-height:1.75}
.hk-job-list .hk-result-card{display:grid;grid-template-columns:100px 1fr 140px;margin-bottom:10px}
.hk-job-list .hk-result-media{min-height:100px}
.hk-map{height:240px;border-radius:var(--r-sm);background:linear-gradient(135deg,#D9F1F4 0%,#E3EAF2 100%);position:relative;overflow:hidden;background-image:
  linear-gradient(90deg, transparent 49.5%, rgba(26,58,92,.1) 49.5%, rgba(26,58,92,.1) 50.5%, transparent 50.5%),
  linear-gradient(0deg, transparent 49.5%, rgba(26,58,92,.1) 49.5%, rgba(26,58,92,.1) 50.5%, transparent 50.5%),
  linear-gradient(135deg,#D9F1F4,#E3EAF2);
  background-size:48px 48px,48px 48px,auto}
.hk-map-pin{position:absolute;top:45%;left:55%;transform:translate(-50%,-100%);background:var(--brand-orange);color:#fff;padding:6px 12px;border-radius:var(--r-full);font-size:12px;font-weight:700;display:flex;align-items:center;gap:4px;box-shadow:0 4px 12px rgba(242,142,28,.4)}
.hk-side{position:sticky;top:110px;align-self:start;display:flex;flex-direction:column;gap:16px}
.hk-side-card{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-lg);padding:20px}
.hk-side-card h3{margin:0 0 14px;font-size:14px;font-weight:800}
.hk-mini-stat{display:flex;justify-content:space-between;font-size:13px;padding:8px 0;border-bottom:1px dashed var(--ink-200)}
.hk-mini-stat:last-child{border-bottom:none}
.hk-mini-stat b{font-weight:800;color:var(--brand-navy-dark);font-family:var(--font-en)}

/* ---------- Apply Form (apply.html) ---------- */
.hk-apply-hero{background:linear-gradient(180deg,#FFF7EB,transparent);padding:32px 0 24px}
.hk-breadcrumb{font-size:12px;color:var(--ink-500);max-width:900px;margin:0 auto;padding:0 24px 12px}
.hk-breadcrumb a{color:var(--brand-orange);margin:0 4px}
.hk-steps{max-width:900px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:0}
.hk-step{flex:1;display:flex;align-items:center;gap:10px;padding:16px 0}
.hk-step .num{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-family:var(--font-en);font-size:14px;background:#fff;border:2px solid var(--ink-200);color:var(--ink-400)}
.hk-step.on .num{background:var(--brand-orange);border-color:var(--brand-orange);color:#fff}
.hk-step.done .num{background:var(--success);border-color:var(--success);color:#fff}
.hk-step .lbl{font-size:13px;font-weight:700;color:var(--ink-500)}
.hk-step.on .lbl{color:var(--brand-navy-dark)}
.hk-step-sep{flex:1;height:2px;background:var(--ink-200)}
.hk-step-sep.done{background:var(--success)}
.hk-apply-layout{display:grid;grid-template-columns:1fr 300px;gap:24px;max-width:1100px;margin:0 auto;padding:16px 24px 60px}
.hk-apply-main{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-lg);padding:40px 44px}
.hk-apply-main h1{margin:0 0 8px;font-size:26px;font-weight:900;color:var(--brand-navy-dark)}
.hk-apply-main .sub{font-size:13px;color:var(--ink-500);margin-bottom:28px}
.hk-fieldset{border:none;padding:0;margin:0 0 28px}
.hk-fieldset legend{font-size:15px;font-weight:900;color:var(--brand-navy-dark);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.hk-fieldset legend::before{content:"";width:4px;height:18px;background:var(--brand-orange);border-radius:2px}
.hk-form-row{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px 0;align-items:flex-start;border-bottom:1px solid var(--ink-200)}
.hk-form-row:last-child{border-bottom:none}
.hk-form-label{font-size:13px;font-weight:700;color:var(--ink-700);padding-top:10px;display:flex;align-items:center;gap:6px}
.hk-form-label .req{background:var(--danger);color:#fff;font-size:9px;font-weight:700;padding:2px 5px;border-radius:3px}
.hk-form-label .opt{background:var(--ink-200);color:var(--ink-500);font-size:9px;font-weight:700;padding:2px 5px;border-radius:3px}
.hk-input, .hk-select, .hk-textarea{width:100%;padding:10px 14px;border:1.5px solid var(--ink-200);border-radius:var(--r-sm);font-size:14px;font-family:inherit;background:#fff;outline:none;transition:border-color .15s}
.hk-input:focus, .hk-select:focus, .hk-textarea:focus{border-color:var(--brand-orange)}
.hk-textarea{min-height:100px;resize:vertical}
.hk-double{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hk-radio-group{display:flex;gap:16px}
.hk-radio{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}
.hk-radio input{accent-color:var(--brand-orange)}
.hk-hint{font-size:11px;color:var(--ink-500);margin-top:4px}
.hk-apply-footer{margin-top:32px;padding-top:24px;border-top:2px solid var(--ink-200);display:flex;justify-content:space-between;align-items:center;gap:16px}
.hk-apply-actions{display:flex;gap:10px;align-items:center}
.hk-apply-postal{display:grid;grid-template-columns:160px 1fr;gap:8px}
.hk-apply-agree{font-size:12px;color:var(--ink-500);line-height:1.6}
.hk-apply-agree a{color:var(--brand-orange);text-decoration:underline;text-underline-offset:2px}
/* Side */
.hk-apply-side{position:sticky;top:110px;align-self:start}
.hk-apply-job{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-lg);padding:18px;margin-bottom:16px}
.hk-apply-job .label{font-size:10px;color:var(--ink-400);letter-spacing:.1em;font-weight:700;font-family:var(--font-en);margin-bottom:8px}
.hk-apply-job .title{font-size:14px;font-weight:800;line-height:1.5;margin-bottom:10px;color:var(--brand-navy-dark)}
.hk-apply-job .co{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-500);margin-bottom:12px}
.hk-apply-job .co-mark{width:24px;height:24px;border-radius:5px;background:linear-gradient(135deg,#F28E1C,#E57A0A);color:#fff;font-weight:900;font-size:11px;display:grid;place-items:center}
.hk-apply-job .sal{font-size:18px;font-weight:900;color:var(--brand-orange);font-family:var(--font-en);padding-top:10px;border-top:1px solid var(--ink-200)}
.hk-trust-box{background:var(--brand-cyan-light);border-radius:var(--r-md);padding:16px}
.hk-trust-box h4{margin:0 0 8px;font-size:12px;font-weight:900;color:#0F5660;display:flex;align-items:center;gap:6px}
.hk-trust-box ul{margin:0;padding-left:18px;font-size:11px;line-height:1.8;color:#1F7A8A}

/* ---------- Auth (login/signup) ---------- */
.hk-auth-layout{min-height:calc(100vh - 80px);display:grid;grid-template-columns:1fr 1fr}
.hk-auth-side{background:linear-gradient(135deg,#1A3A5C 0%,#0F2742 100%);color:#fff;padding:60px 56px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.hk-auth-side::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20% 20%,rgba(242,142,28,.15) 0,transparent 40%),radial-gradient(circle at 80% 80%,rgba(47,182,199,.15) 0,transparent 40%)}
.hk-auth-side-inner{position:relative}
.hk-auth-side .en{font-family:var(--font-en);color:var(--brand-orange);font-size:12px;font-weight:700;letter-spacing:.2em;margin-bottom:16px}
.hk-auth-side h2{margin:0 0 16px;font-size:32px;font-weight:900;line-height:1.3;color:#fff}
.hk-auth-side .lead{font-size:14px;line-height:1.8;color:#cfd8e3;margin:0 0 36px}
.hk-auth-benefit{padding:16px 18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);margin-bottom:10px;display:flex;gap:12px;align-items:center}
.hk-auth-benefit .ico{width:40px;height:40px;background:var(--brand-orange);color:#fff;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.hk-auth-benefit h4{margin:0 0 2px;font-size:13px;font-weight:800;color:#fff}
.hk-auth-benefit p{margin:0;font-size:11px;color:#a8b5c4;line-height:1.5}
.hk-auth-testimonial{padding:20px;background:rgba(255,255,255,.04);border-radius:var(--r-md);margin-top:auto;position:relative}
.hk-auth-testimonial .q{font-size:12px;font-style:italic;color:#cfd8e3;margin-bottom:12px;line-height:1.7}
.hk-auth-testimonial .who{display:flex;gap:10px;align-items:center}
.hk-auth-testimonial .who .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#F28E1C,#E57A0A);color:#fff;font-weight:900;display:grid;place-items:center;font-size:14px}
.hk-auth-testimonial .who .info{font-size:11px}
.hk-auth-testimonial .who .info strong{display:block;color:#fff;font-size:12px;font-weight:700}
.hk-auth-main{padding:60px 56px;display:flex;flex-direction:column;justify-content:center;background:#fff}
.hk-auth-inner{max-width:420px;width:100%;margin:0 auto}
.hk-auth-tabs{display:flex;background:var(--ink-100);padding:4px;border-radius:var(--r-md);margin-bottom:28px}
.hk-auth-tab{flex:1;padding:10px;text-align:center;font-weight:700;font-size:13px;color:var(--ink-500);cursor:pointer;border-radius:calc(var(--r-md) - 4px);transition:all .15s}
.hk-auth-tab.on{background:#fff;color:var(--brand-navy-dark);box-shadow:var(--sh-sm)}
.hk-auth-main h1{margin:0 0 6px;font-size:24px;font-weight:900;color:var(--brand-navy-dark)}
.hk-auth-main .sub{font-size:13px;color:var(--ink-500);margin-bottom:24px}
.hk-auth-field{margin-bottom:14px}
.hk-auth-field label{display:block;font-size:12px;font-weight:700;color:var(--ink-700);margin-bottom:6px}
.hk-auth-field input{width:100%;padding:12px 14px;border:1.5px solid var(--ink-200);border-radius:var(--r-sm);font-size:14px;font-family:inherit;outline:none}
.hk-auth-field input:focus{border-color:var(--brand-orange)}
.hk-auth-option-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin:10px 0 20px}
.hk-auth-option-row label{display:flex;align-items:center;gap:6px;color:var(--ink-500)}
.hk-auth-option-row a{color:var(--brand-orange);font-weight:700}
.hk-auth-submit{width:100%;padding:14px;background:var(--brand-orange);color:#fff;font-weight:800;font-size:15px;border-radius:var(--r-md);box-shadow:0 2px 0 var(--brand-orange-dark);cursor:pointer;border:none}
.hk-auth-submit:hover{background:var(--brand-orange-dark)}
.hk-auth-divider{display:flex;align-items:center;gap:10px;margin:24px 0;color:var(--ink-400);font-size:11px;font-weight:600;letter-spacing:.1em}
.hk-auth-divider::before,.hk-auth-divider::after{content:"";flex:1;height:1px;background:var(--ink-200)}
.hk-auth-sso{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}
.hk-auth-sso button{padding:12px;border:1.5px solid var(--ink-200);border-radius:var(--r-sm);font-size:13px;font-weight:700;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--ink-700)}
.hk-auth-sso button:hover{border-color:var(--brand-orange)}
.hk-auth-foot{text-align:center;font-size:12px;color:var(--ink-500)}
.hk-auth-foot a{color:var(--brand-orange);font-weight:700}

/* ---------- MyPage ---------- */
.hk-mp-hero{background:linear-gradient(135deg,#FFF7EB,#FFEBD1);padding:32px 0}
.hk-mp-hero-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;gap:24px;align-items:center}
.hk-mp-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#F28E1C,#E57A0A);color:#fff;font-weight:900;font-size:32px;display:grid;place-items:center;box-shadow:0 4px 0 var(--brand-orange-dark)}
.hk-mp-hero h1{margin:0 0 2px;font-size:22px;font-weight:900;color:var(--brand-navy-dark)}
.hk-mp-hero .meta{font-size:12px;color:var(--ink-700)}
.hk-mp-stats{display:flex;gap:24px;margin-left:auto}
.hk-mp-stat{text-align:center}
.hk-mp-stat b{display:block;font-size:26px;font-weight:900;color:var(--brand-orange);font-family:var(--font-en);line-height:1}
.hk-mp-stat span{font-size:11px;color:var(--ink-500);font-weight:600;margin-top:2px;display:block}
.hk-mp-layout{display:grid;grid-template-columns:220px 1fr;gap:24px;max-width:1200px;margin:0 auto;padding:24px}
.hk-mp-side{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-md);padding:8px;height:fit-content;position:sticky;top:100px}
.hk-mp-nav{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r-sm);font-size:13px;font-weight:700;color:var(--ink-700);cursor:pointer}
.hk-mp-nav:hover{background:var(--ink-100)}
.hk-mp-nav.on{background:var(--brand-orange-light);color:var(--brand-orange-dark)}
.hk-mp-nav .c{margin-left:auto;font-size:11px;background:var(--ink-200);padding:2px 7px;border-radius:10px;font-family:var(--font-en)}
.hk-mp-nav.on .c{background:var(--brand-orange);color:#fff}
.hk-mp-main h2{margin:0 0 16px;font-size:20px;font-weight:900;color:var(--brand-navy-dark);display:flex;align-items:center;gap:8px}
.hk-mp-main h2::before{content:"";width:4px;height:20px;background:var(--brand-orange);border-radius:2px}
.hk-mp-panel{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-md);margin-bottom:16px}
.hk-mp-panel-head{padding:16px 20px;border-bottom:1px solid var(--ink-200);display:flex;justify-content:space-between;align-items:center}
.hk-mp-panel-head h3{margin:0;font-size:14px;font-weight:800}
.hk-app-row{padding:18px 20px;border-bottom:1px solid var(--ink-200);display:grid;grid-template-columns:60px 1fr 130px 160px;gap:16px;align-items:center}
.hk-app-row:last-child{border-bottom:none}
.hk-app-row .thumb{width:60px;height:60px;border-radius:8px;background:var(--brand-orange);color:#fff;font-weight:900;display:grid;place-items:center}
.hk-app-row .title{font-size:14px;font-weight:800;margin-bottom:4px;color:var(--brand-navy-dark);line-height:1.4}
.hk-app-row .meta{font-size:11px;color:var(--ink-500)}
.hk-app-row .sal{font-size:15px;font-weight:900;color:var(--brand-orange);font-family:var(--font-en)}
.hk-app-status{padding:5px 10px;border-radius:999px;font-size:11px;font-weight:800;text-align:center;display:inline-block}
.hk-s-review{background:#E3EAF2;color:var(--brand-navy)}
.hk-s-interview{background:var(--brand-orange-light);color:var(--brand-orange-dark)}
.hk-s-offered{background:#DCF2E5;color:#1F7A4A}
.hk-s-declined{background:var(--ink-100);color:var(--ink-500)}
.hk-fav-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:20px}
.hk-fav{border:1px solid var(--ink-200);border-radius:var(--r-sm);overflow:hidden;transition:all .15s;cursor:pointer}
.hk-fav:hover{border-color:var(--brand-orange);box-shadow:var(--sh-sm)}
.hk-fav .img{height:90px}
.hk-fav .body{padding:12px 14px}
.hk-fav .body h4{margin:0 0 4px;font-size:13px;font-weight:800;line-height:1.4;color:var(--brand-navy-dark)}
.hk-fav .body .sal{font-size:14px;color:var(--brand-orange);font-weight:900;font-family:var(--font-en);margin-top:6px}
.hk-alert{padding:16px 20px;border-bottom:1px solid var(--ink-200);display:flex;justify-content:space-between;align-items:center;gap:12px}
.hk-alert:last-child{border-bottom:none}
.hk-alert .q{font-size:14px;font-weight:700;color:var(--brand-navy-dark)}
.hk-alert .c{font-size:11px;color:var(--ink-500);margin-top:3px}
.hk-toggle{width:38px;height:22px;background:var(--brand-orange);border-radius:12px;position:relative;cursor:pointer;flex-shrink:0}
.hk-toggle::after{content:"";position:absolute;top:2px;right:2px;width:18px;height:18px;background:#fff;border-radius:50%}
.hk-toggle.off{background:var(--ink-300)}
.hk-toggle.off::after{right:auto;left:2px}
.hk-profile-grid{display:grid;grid-template-columns:140px 1fr}
.hk-profile-grid dt{padding:14px 20px;font-size:13px;color:var(--ink-500);font-weight:700;border-bottom:1px solid var(--ink-200)}
.hk-profile-grid dd{padding:14px 20px;margin:0;font-size:14px;border-bottom:1px solid var(--ink-200)}
.hk-profile-complete{background:var(--brand-cyan-light);padding:16px 20px;margin-bottom:16px;border-radius:var(--r-sm);display:flex;gap:14px;align-items:center}
.hk-profile-complete .ring{width:60px;height:60px;border-radius:50%;background:conic-gradient(var(--brand-orange) 0% 0%,#fff 0% 100%);display:grid;place-items:center;flex-shrink:0}
.hk-profile-complete .ring-inner{background:#fff;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-family:var(--font-en);color:var(--brand-orange);font-size:13px}

/* Company-page inline job row (replaces inline grid; responsive-friendly) */
.hk-co-job-row{display:grid;grid-template-columns:80px 1fr 130px;gap:14px;padding:14px;border:1px solid var(--ink-200);border-radius:8px;margin-bottom:10px;align-items:center;transition:all .15s}
.hk-co-job-row:hover{border-color:var(--brand-orange);box-shadow:var(--sh-sm)}
.hk-co-job-row-thumb{height:80px;border-radius:6px}
.hk-co-job-row-tags{display:flex;gap:4px;margin-bottom:4px;flex-wrap:wrap}
.hk-co-job-row-title{font-size:14px;font-weight:800;margin-bottom:4px;color:var(--brand-navy-dark);line-height:1.4}
.hk-co-job-row-loc{font-size:11px;color:var(--ink-500)}
.hk-co-job-row-sal{text-align:right}
.hk-co-job-row-sal-label{font-size:11px;color:var(--ink-500)}
.hk-co-job-row-sal-v{font-size:17px;font-weight:900;color:var(--brand-orange);font-family:var(--font-en)}

/* ============================================================
 * Responsive
 * - Breakpoints: 640px (phone), 1024px (tablet & below)
 * - 1025px+ keeps existing PC layout
 * ============================================================ */

/* ---------- Hamburger / Mobile menu (visible only ≤1024px) ---------- */
.hk-hamburger{display:none;width:40px;height:40px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--ink-200);border-radius:8px;cursor:pointer;padding:0;color:var(--brand-navy)}
.hk-hamburger:hover{border-color:var(--brand-orange);color:var(--brand-orange)}
.hk-hamburger svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.hk-mobile-menu{display:none;position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);background:#fff;z-index:200;box-shadow:-12px 0 40px rgba(0,0,0,.12);transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;flex-direction:column}
.hk-mobile-menu.is-open{transform:translateX(0)}
.hk-mobile-menu-overlay{display:none;position:fixed;inset:0;background:rgba(15,39,66,.45);z-index:199;opacity:0;transition:opacity .25s ease;pointer-events:none}
.hk-mobile-menu-overlay.is-open{opacity:1;pointer-events:auto}
.hk-mobile-menu-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--ink-200)}
.hk-mobile-menu-close{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--ink-200);border-radius:8px;background:#fff;color:var(--ink-700);cursor:pointer}
.hk-mobile-menu-close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.hk-mobile-menu-nav{display:flex;flex-direction:column;padding:8px 0}
.hk-mobile-menu-nav a{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;font-size:14px;font-weight:700;color:var(--ink-700);border-bottom:1px solid var(--ink-100);min-height:48px}
.hk-mobile-menu-nav a:hover,.hk-mobile-menu-nav a.is-active{color:var(--brand-orange);background:var(--brand-orange-light)}
.hk-mobile-menu-cta{display:flex;flex-direction:column;gap:10px;padding:18px 20px;border-top:1px solid var(--ink-200);margin-top:auto}
.hk-mobile-menu-cta .hk-btn{width:100%;justify-content:center;min-height:46px}

/* ============================================================
 * Tablet & below (≤1024px)
 * ============================================================ */
@media (max-width: 1024px){
  /* Containers */
  .hk-container,.hk-narrow{padding:0 20px}

  /* Header */
  .hk-header-top-inner{padding:0 20px;font-size:10px}
  .hk-header-main{padding:12px 20px;gap:16px}
  .hk-nav{gap:18px}
  .hk-nav a{font-size:13px}
  .hk-header-cta .hk-btn{padding:8px 12px;font-size:12px}
  .hk-hamburger{display:inline-flex}

  /* Section padding */
  section{padding:56px 0}
  section.hk-tight{padding:36px 0}

  /* Hero */
  .hk-hero{padding:48px 0 64px}
  .hk-hero-grid{grid-template-columns:1fr;gap:28px}
  .hk-hero h1{font-size:40px}
  .hk-hero .hk-lead{font-size:16px}
  .hk-hero-card-stack{padding-top:0}
  .hk-hero-card-stack .hk-card-float{transform:none !important}
  .hk-card-float + .hk-card-float{margin-left:24px}

  /* Hero stats: tighter spacing */
  .hk-hero-stats{gap:24px}
  .hk-hero-stat strong{font-size:26px}

  /* Section title */
  .hk-section-title h2{font-size:21px}

  /* Index grids */
  .hk-area-grid{grid-template-columns:repeat(2,1fr)}
  .hk-type-grid{grid-template-columns:repeat(3,1fr)}
  .hk-cond-grid{grid-template-columns:repeat(2,1fr)}
  .hk-job-grid{grid-template-columns:repeat(2,1fr)}
  .hk-co-list{grid-template-columns:repeat(2,1fr)}
  .hk-how-steps{grid-template-columns:repeat(2,1fr)}
  .hk-col-grid{grid-template-columns:repeat(2,1fr)}

  /* Browse */
  .hk-area-map{grid-template-columns:repeat(2,1fr)}
  .hk-type-big-grid{grid-template-columns:repeat(2,1fr)}
  .hk-co-browse-grid{grid-template-columns:repeat(2,1fr)}
  .hk-tab-row{padding:0 20px;overflow-x:auto;flex-wrap:nowrap}
  .hk-tab-row::-webkit-scrollbar{display:none}
  .hk-tab{white-space:nowrap}

  /* Search results */
  .hk-results-layout{grid-template-columns:1fr;padding:20px}
  .hk-sidebar{position:static;max-height:none;top:auto}
  .hk-result-card{grid-template-columns:120px 1fr}
  .hk-result-side{grid-column:1 / -1;border-left:none;border-top:1px solid var(--ink-200);flex-direction:row;justify-content:space-between;align-items:center;padding:12px 16px}

  /* Job detail */
  .hk-job-hero-top{grid-template-columns:1fr}
  .hk-job-hero-img{width:100%;aspect-ratio:16/10}
  .hk-job-hero-right{padding:22px 20px}
  .hk-job-hero-right h1{font-size:22px}
  .hk-job-summary{grid-template-columns:repeat(2,1fr)}
  .hk-job-tabs{top:64px}
  .hk-job-tabs-inner{padding:0 20px;gap:18px;overflow-x:auto;flex-wrap:nowrap}
  .hk-job-tabs-inner::-webkit-scrollbar{display:none}
  .hk-job-tab{white-space:nowrap;padding:14px 0;font-size:13px}
  .hk-job-layout{grid-template-columns:1fr;padding:24px 20px;gap:20px}
  .hk-block{padding:22px 22px}
  .hk-block h2{font-size:18px}
  .hk-flow{grid-template-columns:repeat(2,1fr);gap:18px}
  .hk-flow-step::after{display:none}
  .hk-side{position:static;top:auto}
  .hk-co-tabs{top:64px}
  .hk-co-tabs-inner{padding:0 20px;gap:18px;overflow-x:auto;flex-wrap:nowrap}
  .hk-co-tabs-inner::-webkit-scrollbar{display:none}
  .hk-co-tab{white-space:nowrap}

  /* Company detail */
  .hk-co-cover{height:200px}
  .hk-co-header{margin-top:-80px;padding:0 20px}
  .hk-co-identity{grid-template-columns:auto 1fr;gap:20px;padding:24px}
  .hk-co-actions{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;min-width:0}
  .hk-co-actions .hk-btn{flex:1}
  .hk-co-metrics{grid-template-columns:repeat(3,1fr);gap:18px;padding:20px}
  .hk-co-layout{grid-template-columns:1fr;padding:24px 20px;gap:20px}
  .hk-vehicles{grid-template-columns:repeat(3,1fr)}
  .hk-gallery{grid-template-columns:repeat(2,1fr)}
  .hk-co-job-row{grid-template-columns:80px 1fr;gap:12px}
  .hk-co-job-row-sal{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:baseline;text-align:left;padding-top:8px;border-top:1px dashed var(--ink-200)}

  /* Apply */
  .hk-apply-layout{grid-template-columns:1fr;padding:16px 20px 60px}
  .hk-apply-main{padding:28px 24px}
  .hk-apply-side{position:static;top:auto}

  /* Auth */
  .hk-auth-layout{grid-template-columns:1fr;min-height:0}
  .hk-auth-side{padding:36px 28px}
  .hk-auth-main{padding:36px 28px}

  /* MyPage */
  .hk-mp-hero-inner{padding:0 20px;gap:16px}
  .hk-mp-stats{gap:16px}
  .hk-mp-layout{grid-template-columns:1fr;padding:20px}
  .hk-mp-side{position:static;top:auto;display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:6px}
  .hk-mp-side::-webkit-scrollbar{display:none}
  .hk-mp-side .hk-mp-side-divider{flex-shrink:0;border-top:none;border-left:1px solid var(--ink-200);margin:0;padding:0 0 0 6px}
  .hk-mp-nav{white-space:nowrap;flex-shrink:0;min-height:40px}
  .hk-fav-grid{grid-template-columns:repeat(2,1fr)}
  .hk-app-row{grid-template-columns:60px 1fr;gap:12px}
  .hk-app-row .hk-app-status,.hk-app-row .sal{grid-column:2 / -1}

  /* Footer */
  .hk-footer{padding:48px 0 24px;margin-top:60px}
  .hk-footer-grid{grid-template-columns:1fr 1fr;gap:32px;padding:0 20px}
  .hk-footer-bottom{padding:20px 20px 0;flex-direction:column;gap:6px;align-items:flex-start}
}

/* ============================================================
 * Phone (≤640px)
 * ============================================================ */
@media (max-width: 640px){
  /* Containers */
  .hk-container,.hk-narrow{padding:0 16px}

  /* Header */
  .hk-header-top{display:none}
  .hk-header-main{padding:10px 16px;gap:8px}
  .hk-logo-img{height:28px}
  .hk-logo-sub{font-size:14px;padding:1px 6px}
  .hk-nav{display:none}
  .hk-header-cta{display:none}

  /* Section padding */
  section{padding:40px 0}
  section.hk-tight{padding:28px 0}

  /* Hero */
  .hk-hero{padding:32px 0 48px}
  .hk-hero h1{font-size:28px;line-height:1.25}
  .hk-hero .hk-en-sub{font-size:13px}
  .hk-hero .hk-lead{font-size:14px;margin-bottom:20px}
  .hk-hero-badge{font-size:11px;padding:6px 12px;margin-bottom:14px}
  .hk-hero-stats{gap:16px;margin-top:24px}
  .hk-hero-stat strong{font-size:22px}
  .hk-hero-stat span{font-size:10px}
  .hk-hero-quick-links{gap:8px;margin-top:18px}
  .hk-hero-quick-link{padding:8px 14px;font-size:12px}
  .hk-hero-quick-link .count{font-size:11px;padding:1px 6px}
  .hk-hero-tags{gap:6px;margin-top:10px;font-size:12px}
  .hk-hero-tag{padding:4px 10px;font-size:11px}
  .hk-hero-card-stack{display:none}
  .hk-card-float + .hk-card-float{margin-top:8px;margin-left:0}

  /* Search bar (3-column → stacked) */
  .hk-searchbar{grid-template-columns:1fr;gap:0;padding:6px}
  .hk-searchbar-field{padding:10px 14px;border-right:none;border-bottom:1px solid var(--ink-200)}
  .hk-searchbar-field:last-of-type{border-bottom:none}
  .hk-searchbar-submit{padding:14px 20px;width:100%;justify-content:center}

  /* Section title */
  .hk-section-title{flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:16px}
  .hk-section-title h2{font-size:19px}
  .hk-section-title .hk-en{font-size:11px;margin-right:0}

  /* Buttons */
  .hk-btn-xl{padding:14px 22px;font-size:15px}
  .hk-btn-lg{padding:12px 22px;font-size:14px}
  .hk-btn{min-height:44px}
  .hk-btn-sm{min-height:auto}

  /* Index grids */
  .hk-area-grid{grid-template-columns:1fr}
  .hk-type-grid{grid-template-columns:repeat(2,1fr)}
  .hk-cond-grid{grid-template-columns:1fr}
  .hk-job-grid{grid-template-columns:1fr}
  .hk-co-list{grid-template-columns:1fr}
  .hk-how{padding:48px 0;border-radius:16px}
  .hk-how-steps{grid-template-columns:1fr;gap:14px;margin-top:28px}
  .hk-how-step{padding:22px 18px}
  .hk-col-grid{grid-template-columns:1fr}

  /* Job card (mobile horizontal layout — keep media on right but smaller) */
  .hk-job-card-link{padding:14px;gap:12px}
  .hk-job-card .hk-media{flex:0 0 96px;width:96px;aspect-ratio:1/1}
  .hk-job-card .hk-body h3{font-size:14px}
  .hk-job-card .hk-salary{font-size:16px}

  /* White banner */
  .hk-white-banner{grid-template-columns:1fr;padding:28px 22px;gap:18px;border-radius:16px}
  .hk-white-banner h2{font-size:20px}

  /* Browse */
  .hk-area-map{grid-template-columns:1fr}
  .hk-type-big-grid{grid-template-columns:1fr}
  .hk-co-browse-grid{grid-template-columns:1fr}
  .hk-page-hero{padding:28px 0}
  .hk-page-hero h1{font-size:24px}
  .hk-tab{padding:12px 14px;font-size:13px}

  /* Search results */
  .hk-searchbar-top{padding:12px 0}
  .hk-results-layout{padding:14px 16px;gap:14px}
  .hk-results-header{padding:12px 14px;flex-direction:column;align-items:flex-start;gap:8px}
  .hk-results-count strong{font-size:18px}
  .hk-result-card{grid-template-columns:1fr}
  .hk-result-media{aspect-ratio:16/9}
  .hk-result-body{padding:14px 16px}
  .hk-result-body h3{font-size:15px}
  .hk-result-meta{grid-template-columns:1fr 1fr;gap:8px 12px}
  .hk-result-side{padding:10px 14px}
  .hk-pagination{gap:4px;margin:24px 0}
  .hk-page{width:32px;height:32px;font-size:12px}
  .hk-active-filters{padding:8px 0}

  /* Job detail */
  .hk-job-hero{padding:16px 0 0}
  .hk-job-hero-inner{padding:0 16px}
  .hk-breadcrumb{padding:8px 16px 12px;font-size:11px}
  .hk-job-hero-img{aspect-ratio:4/3}
  .hk-job-hero-right{padding:18px 16px;gap:10px}
  .hk-job-hero-right h1{font-size:19px;line-height:1.4}
  .hk-job-summary{grid-template-columns:1fr 1fr;gap:10px;padding:14px 0}
  .hk-job-summary-cell .v.salary{font-size:15px}
  .hk-job-hero-actions{flex-wrap:wrap;gap:8px}
  .hk-job-hero-actions .hk-btn-xl{flex:1 1 100%}
  .hk-ico-btn{width:46px;height:46px}
  .hk-job-tabs{top:56px}
  .hk-job-tabs-inner{padding:0 16px;gap:14px}
  .hk-job-tab{font-size:12px;padding:12px 0}
  .hk-job-layout{padding:18px 16px;gap:16px}
  .hk-block{padding:18px 16px}
  .hk-block h2{font-size:16px;margin-bottom:14px}
  .hk-dl{grid-template-columns:1fr}
  .hk-dl dt{padding:12px 0 4px;border-bottom:none;font-size:12px}
  .hk-dl dd{padding:0 0 12px;border-bottom:1px solid var(--ink-200);font-size:13px}
  .hk-dl dt:last-of-type{border-bottom:none}
  .hk-welfare-grid{grid-template-columns:1fr}
  .hk-flow{grid-template-columns:1fr;gap:10px}
  .hk-flow-step{padding:12px 14px}
  .hk-flow-step::after{display:none}
  .hk-ceomsg{grid-template-columns:1fr;gap:12px;padding:16px}
  .hk-ceomsg-avatar{width:80px;height:80px;font-size:24px}
  .hk-side-cta{padding:18px;border-radius:14px}
  .hk-side-cta .v{font-size:22px}
  .hk-related{padding:16px}

  /* Sticky-apply: critical mobile element */
  .hk-sticky-apply{padding:8px 0}
  .hk-sticky-apply-inner{padding:0 14px;gap:10px}
  .hk-sticky-apply .title{font-size:11px;display:none}
  .hk-sticky-apply .salary{font-size:14px}
  .hk-sticky-apply .hk-btn-lg{padding:12px 18px;font-size:14px}
  .hk-sticky-apply .hk-ico-btn{width:42px;height:42px}

  /* Company detail */
  .hk-co-cover{height:140px}
  .hk-co-header{margin-top:-60px;padding:0 16px}
  .hk-co-identity{grid-template-columns:1fr;text-align:left;gap:14px;padding:18px}
  .hk-co-logo{width:72px;height:72px;font-size:30px;border-radius:14px}
  .hk-co-title h1{font-size:22px}
  .hk-co-title .meta{flex-direction:column;gap:4px;font-size:12px}
  .hk-co-actions{flex-direction:column;min-width:0}
  .hk-co-actions .hk-btn{width:100%}
  .hk-co-metrics{grid-template-columns:repeat(2,1fr);padding:16px;gap:14px}
  .hk-co-metric .v{font-size:18px}
  .hk-co-tabs-inner{padding:0 16px;gap:14px}
  .hk-co-tab{font-size:13px;padding:14px 4px}
  .hk-co-layout{padding:18px 16px}
  .hk-vehicles{grid-template-columns:repeat(2,1fr)}
  .hk-vehicle{padding:12px}
  .hk-gallery{grid-template-columns:repeat(2,1fr);gap:8px}
  .hk-co-job-row{grid-template-columns:64px 1fr;gap:10px;padding:12px}
  .hk-co-job-row-thumb{height:64px}
  .hk-co-job-row-title{font-size:13px}
  .hk-co-job-row-sal-v{font-size:15px}
  .hk-ceo{grid-template-columns:1fr;gap:14px}
  .hk-ceo-avatar{width:90px;height:90px;font-size:28px}
  .hk-interview{grid-template-columns:1fr;gap:12px;padding:16px}
  .hk-interview-avatar{width:72px;height:72px;font-size:24px}

  /* Apply */
  .hk-apply-hero{padding:20px 0 14px}
  .hk-steps{padding:0 16px}
  .hk-step{gap:6px;padding:12px 0}
  .hk-step .num{width:26px;height:26px;font-size:12px}
  .hk-step .lbl{font-size:11px}
  .hk-apply-layout{padding:14px 16px 60px;gap:14px}
  .hk-apply-main{padding:22px 18px;border-radius:14px}
  .hk-apply-main h1{font-size:20px}
  .hk-fieldset legend{font-size:14px}
  .hk-form-row{grid-template-columns:1fr;gap:6px;padding:12px 0}
  .hk-form-label{padding-top:0;font-size:12px}
  .hk-input,.hk-select,.hk-textarea{padding:11px 12px;font-size:14px}
  .hk-double{grid-template-columns:1fr;gap:6px}
  .hk-radio-group{flex-wrap:wrap;gap:10px}
  .hk-apply-footer{flex-direction:column;align-items:stretch;gap:14px;padding-top:18px}
  .hk-apply-actions{flex-direction:column-reverse;gap:8px;width:100%}
  .hk-apply-postal{grid-template-columns:1fr 1fr;gap:6px}
  .hk-apply-actions .hk-btn{width:100%;justify-content:center}
  .hk-apply-footer .hk-btn{width:100%;justify-content:center}

  /* Auth */
  .hk-auth-side{display:none}
  .hk-auth-main{padding:32px 18px}
  .hk-auth-inner{max-width:none}
  .hk-auth-main h1{font-size:20px}
  .hk-auth-tabs{margin-bottom:20px}
  .hk-auth-field input{padding:12px;font-size:14px}
  .hk-auth-sso{grid-template-columns:1fr}

  /* MyPage */
  .hk-mp-hero{padding:22px 0}
  .hk-mp-hero-inner{flex-direction:column;align-items:flex-start;gap:14px;padding:0 16px}
  .hk-mp-avatar{width:64px;height:64px;font-size:24px}
  .hk-mp-hero h1{font-size:18px}
  .hk-mp-stats{margin-left:0;width:100%;justify-content:space-between;gap:12px}
  .hk-mp-stat b{font-size:20px}
  .hk-mp-layout{padding:16px}
  .hk-mp-main h2{font-size:18px}
  .hk-mp-panel-head{padding:14px 16px}
  .hk-app-row{grid-template-columns:48px 1fr;gap:10px;padding:14px 16px}
  .hk-app-row .thumb{width:48px;height:48px}
  .hk-app-row .title{font-size:13px}
  .hk-app-row .sal{font-size:14px;grid-column:2 / -1}
  .hk-app-row .hk-app-status{grid-column:2 / -1;justify-self:flex-start}
  .hk-fav-grid{grid-template-columns:1fr;padding:14px}
  .hk-fav .img{height:140px}
  .hk-profile-grid{grid-template-columns:1fr}
  .hk-profile-grid dt{padding:12px 16px 4px;font-size:12px;border-bottom:none}
  .hk-profile-grid dd{padding:0 16px 14px;font-size:13px}
  .hk-profile-complete{flex-direction:column;align-items:flex-start;text-align:left;padding:14px 16px}
  .hk-profile-complete .ring{width:52px;height:52px}

  /* Footer */
  .hk-footer{padding:36px 0 18px;margin-top:48px}
  .hk-footer-grid{grid-template-columns:1fr;gap:24px;padding:0 16px}
  .hk-footer-bottom{margin-top:32px;padding:18px 16px 0;flex-direction:column;align-items:flex-start;gap:6px;font-size:11px}
}

/* Utility helpers (not breakpoint-specific but related to responsive UX) */
.hk-only-mobile{display:none}
.hk-only-desktop{display:initial}
@media (max-width: 640px){
  .hk-only-mobile{display:initial}
  .hk-only-desktop{display:none}
}