/* =========================================================================
   Hari-hari Korea — gaya dasar tema hhk
   Mobile-first. Diuji pada 360px (CLAUDE.md §8).
   Latar putih, satu tema visual — mengikuti referensi desain klien.
   ========================================================================= */

:root {
  --bg:            #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F5F6FA;
  --line:          #E4E7EF;
  --line-strong:   #CFD5E2;

  --ink:           #191C29;
  --ink-2:         #4A5063;
  --ink-3:         #7B8296;

  --accent:        #4A5BD4;
  --accent-hover:  #3B4BC0;
  --accent-on:     #FFFFFF;
  --accent-soft:   #EDEFFC;

  /* wordmark — warna diambil dari referensi desain klien */
  --brand-ink:     #111111;
  --brand-red:     #CC0F1F;
  --brand-blue:    #23309E;
  --brand-cap:     #0C3EBD;

  --ok:            #2C8B57;

  --lock:          #8B6D2E;
  --lock-soft:     #F8EFD9;

  --shadow-sm:     0 1px 2px rgba(23,28,48,.05), 0 1px 3px rgba(23,28,48,.04);
  --shadow:        0 2px 6px rgba(23,28,48,.06), 0 10px 24px rgba(23,28,48,.07);
  --shadow-lift:   0 6px 12px rgba(23,28,48,.08), 0 18px 36px rgba(23,28,48,.11);

  /* baris kategori pada rail — tint pucat, sesuai referensi klien */
  --lv-mint-bg:  #EFF7F1;  --lv-mint-ink:  #2E9147;  --lv-mint-icon:  #46A758;
  --lv-sky-bg:   #EDF4FB;  --lv-sky-ink:   #3D6FC7;  --lv-sky-icon:   #2E91DF;
  --lv-lav-bg:   #F1EDFC;  --lv-lav-ink:   #4B2A96;  --lv-lav-icon:   #785DC8;
  --lv-peach-bg: #FCF0EC;  --lv-peach-ink: #B4502F;  --lv-peach-icon: #E4714B;
  --lv-cream-bg: #FDF6E7;  --lv-cream-ink: #A8700A;  --lv-cream-icon: #F1B200;

  /* warna kartu — mengikuti referensi klien */
  --mint-bg: #E4F3EA;  --mint-1: #7CC79A;  --mint-2: #2F9159;
  --cream-bg:#FBF0DC;  --cream-1:#E7C275;  --cream-2:#A97C28;
  --lav-bg:  #EDE8FA;  --lav-1:  #A996E0;  --lav-2:  #6A54B8;
  --sky-bg:  #E3EEFA;  --sky-1:  #86B4E4;  --sky-2:  #2F6DAF;
  --peach-bg:#FBE7E2;  --peach-1:#EFA48E;  --peach-2:#C25A3C;
  --rose-bg: #FBE4EE;  --rose-1: #EE9CBE;  --rose-2: #C04A7D;

  --r-sm: 8px;  --r: 12px;  --r-lg: 16px;  --r-pill: 999px;

  --fs-xs:   .6875rem;
  --fs-sm:   .8125rem;
  --fs-base: .9375rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Malgun Gothic",
          "Apple SD Gothic Neo", "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }

body.hhk {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.hhk a { color: inherit; text-decoration: none; }
.hhk button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.hhk svg { display: block; }

.hhk :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.hhk-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hhk-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 16px; background: var(--accent); color: var(--accent-on);
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.hhk-skip:focus { left: 0; }

/* =========================================================================
   BILAH ATAS — anotasi referensi: "Kategori"
   ========================================================================= */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
body.admin-bar .topbar { top: 32px; }

.topbar__inner {
  max-width: 1220px;
  margin-inline: auto;
  padding: 0 20px;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -.022em;
  color: var(--brand-ink);
}
.logo__mark { flex: 0 0 auto; }
.logo__kor { color: var(--brand-red); }
.logo__ea  { color: var(--brand-blue); }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav ul {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.nav a {
  display: block;
  padding: 8px 13px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav .current-menu-item > a,
.nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }

.actions {
  display: flex; align-items: center; gap: 6px;
  padding-left: 14px; margin-left: 2px;
  border-left: 1px solid var(--line);
}
.iconbtn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  transition: background-color .15s ease, color .15s ease;
}
.iconbtn:hover { background: var(--surface-2); color: var(--ink); }

/* =========================================================================
   KERANGKA DUA KOLOM
   ========================================================================= */
.shell {
  max-width: 1220px;
  margin-inline: auto;
  padding: 22px 20px 56px;
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.shell--single { grid-template-columns: minmax(0, 1fr); }

/* =========================================================================
   RAIL KIRI — anotasi referensi: "Category level"
   ========================================================================= */
.rail {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
body.admin-bar .rail { top: 116px; }

/* Semua baris kategori duduk di dalam SATU wadah putih — sesuai referensi. */
.levels-box {
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.levels {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0; margin: 0; list-style: none;
}

.level {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--r);
  background: var(--lv-bg);
  transition: box-shadow .15s ease, transform .15s ease;
}
.level:hover {
  box-shadow: inset 0 0 0 1.5px var(--lv-ink);
  transform: translateX(2px);
}

.level__icon {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--lv-icon);
}
.level__text { min-width: 0; flex: 1 1 auto; }
.level__ko {
  display: block;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--lv-ink);
}
.level__id { display: block; font-size: var(--fs-sm); color: var(--ink-2); }
.level__chev { flex: 0 0 auto; color: var(--ink-3); }

/* kartu pengumuman */
.notice {
  padding: 15px 15px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.notice__head {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 9px;
  color: var(--cream-2);
}
.notice__head b { font-size: var(--fs-sm); font-weight: 700; letter-spacing: -.01em; }
.notice__body {
  margin: 0 0 11px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
}
.notice__link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--accent);
}
.notice__link:hover { color: var(--accent-hover); }
.notice__link svg { transition: transform .15s ease; }
.notice__link:hover svg { transform: translateX(2px); }

/* =========================================================================
   KOLOM UTAMA — anotasi referensi: "Konten"
   ========================================================================= */
.main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.greeting {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.greeting__wave { flex: 0 0 auto; font-size: 26px; line-height: 1.2; }
.greeting h1 {
  margin: 0 0 3px;
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -.028em;
  text-wrap: balance;
  color: var(--ink);
}
.greeting p {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-base);
  color: var(--ink-2);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 18px;
}

/* ---------- kartu materi ---------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lift);
}

.card__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 0;
  min-height: 152px;
  background: var(--tint-bg);
}
.card__visual--photo { padding: 0; display: block; }
.card__thumb {
  display: block;
  width: 100%;
  height: 152px;
  object-fit: cover;
}
.card__visual--photo .badge { position: absolute; top: 12px; left: 12px; }

.badge {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: -.005em;
  background: var(--ok);
  color: #FFFFFF;
}

.card__phrase { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.card__ko {
  display: block;
  margin-bottom: 3px;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.022em;
  text-wrap: balance;
  color: var(--ink);
}
.card__latin { display: block; font-size: var(--fs-xs); line-height: 1.35; color: var(--ink-2); }

.card__art {
  position: absolute;
  right: 8px; bottom: 0;
  width: 96px; height: 96px;
  pointer-events: none;
}

.card__time {
  position: absolute;
  right: 10px; bottom: 10px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(16, 18, 26, .74);
  color: #FFFFFF;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.card__body {
  display: flex; flex-direction: column; gap: 5px;
  padding: 13px 14px 0;
  flex: 1 1 auto;
}
.card__title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -.014em;
  text-wrap: balance;
  color: var(--ink);
}
.card__title a:hover { color: var(--accent); }
.card__desc { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }

.card__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 11px 14px 13px;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.card__meta > span { display: inline-flex; align-items: center; gap: 5px; }

.lock {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 6px;
  border-radius: var(--r-pill);
  background: var(--lock-soft);
  color: var(--lock);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* ---------- tombol & kondisi kosong ---------- */
.more { display: flex; justify-content: center; padding-top: 4px; }
.more__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background-color .15s ease, color .15s ease;
}
.more__btn:hover { background: var(--accent); color: var(--accent-on); }
.more__btn svg { transition: transform .15s ease; }
.more__btn:hover svg { transform: translateY(2px); }

.empty {
  padding: 44px 22px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--ink-2);
}
.empty h2 { margin: 0 0 6px; font-size: var(--fs-md); color: var(--ink); }
.empty p { margin: 0; font-size: var(--fs-sm); }

/* ---------- daftar umum (index.php) ---------- */
.plain { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.plain h2 { margin: 0 0 8px; font-size: var(--fs-lg); letter-spacing: -.022em; }
.plain + .plain { margin-top: 16px; }

/* =========================================================================
   KAKI HALAMAN
   ========================================================================= */
.footer { border-top: 1px solid var(--line); background: var(--surface); }
.footer__inner {
  max-width: 1220px;
  margin-inline: auto;
  padding: 20px;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 20px;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-left: auto; list-style: none; margin-block: 0; padding: 0; }
.footer__links a:hover { color: var(--ink); }

/* =========================================================================
   RESPONSIF
   ========================================================================= */
@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; gap: 18px; }
  .rail { position: static; }
  .levels-box { padding: 10px; }
  .levels {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .levels li { flex: 0 0 auto; scroll-snap-align: start; }
  .level { min-width: 186px; }
  .level:hover { transform: none; }
  .level__chev { display: none; }
}

@media (max-width: 782px) {
  body.admin-bar .topbar { top: 46px; }
}

@media (max-width: 760px) {
  .topbar__inner { flex-wrap: wrap; padding: 0 16px; min-height: 0; row-gap: 0; }
  .logo { order: 1; padding: 12px 0; }
  .actions { order: 2; margin-left: auto; padding-left: 0; border-left: 0; }
  .nav {
    order: 3; width: 100%; margin-left: 0; gap: 2px;
    overflow-x: auto;
    border-top: 1px solid var(--line);
    padding: 6px 0;
  }
  .shell { padding: 16px 16px 44px; }
  .grid { gap: 14px; }
  .greeting { padding: 17px 18px; gap: 11px; }
  .greeting h1 { font-size: var(--fs-lg); }
  .footer__inner { padding: 18px 16px; }
  .footer__links { margin-left: 0; width: 100%; }
}

@media (max-width: 420px) {
  .grid { grid-template-columns: 1fr; }
  .card__visual { min-height: 138px; }
  .card__art { width: 84px; height: 84px; }
  .greeting__wave { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .hhk * { animation: none !important; transition: none !important; }
  .card:hover, .level:hover { transform: none; }
}

/* pewarna baris kategori pada rail */
.lv-mint  { --lv-bg: var(--lv-mint-bg);  --lv-ink: var(--lv-mint-ink);  --lv-icon: var(--lv-mint-icon); }
.lv-sky   { --lv-bg: var(--lv-sky-bg);   --lv-ink: var(--lv-sky-ink);   --lv-icon: var(--lv-sky-icon); }
.lv-lav   { --lv-bg: var(--lv-lav-bg);   --lv-ink: var(--lv-lav-ink);   --lv-icon: var(--lv-lav-icon); }
.lv-peach { --lv-bg: var(--lv-peach-bg); --lv-ink: var(--lv-peach-ink); --lv-icon: var(--lv-peach-icon); }
.lv-cream { --lv-bg: var(--lv-cream-bg); --lv-ink: var(--lv-cream-ink); --lv-icon: var(--lv-cream-icon); }

/* pewarna kartu */
.t-mint  { --tint-bg: var(--mint-bg);  --tint-1: var(--mint-1);  --tint-2: var(--mint-2); }
.t-cream { --tint-bg: var(--cream-bg); --tint-1: var(--cream-1); --tint-2: var(--cream-2); }
.t-lav   { --tint-bg: var(--lav-bg);   --tint-1: var(--lav-1);   --tint-2: var(--lav-2); }
.t-sky   { --tint-bg: var(--sky-bg);   --tint-1: var(--sky-1);   --tint-2: var(--sky-2); }
.t-peach { --tint-bg: var(--peach-bg); --tint-1: var(--peach-1); --tint-2: var(--peach-2); }
.t-rose  { --tint-bg: var(--rose-bg);  --tint-1: var(--rose-1);  --tint-2: var(--rose-2); }