/* === Light Consulting Tone ============================================== */
:root {
  --bg:#ffffff; --fg:#0f172a; --muted:#475569;
  --edge:rgba(2, 6, 23, 0.12); --edge-strong:rgba(2, 6, 23, 0.18);
  --primary:#0b3b74; --primary-600:#0e4a92; --primary-50:#e9f1ff;
  --surface:#f7f9fc; --elev:#ffffff;
  --radius:14px; --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(2,6,23,.06), 0 1px 1px rgba(2,6,23,.06);
  --shadow-md:0 10px 24px rgba(2,6,23,.06), 0 4px 10px rgba(2,6,23,.08);
}

/* Base */
*{box-sizing:border-box;}
html,body{margin:0;height:100%;scroll-behavior:smooth;background:var(--bg);color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Pretendard,Apple SD Gothic Neo,Noto Sans KR,Arial,Helvetica,sans-serif;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}

/* Header */
header{position:sticky;top:0;z-index:50;background:color-mix(in oklab, var(--bg) 85%, transparent);
  backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--edge);}
.container{max-width:1200px;margin:0 auto;padding:16px 20px;}
.nav{display:flex;align-items:center;gap:20px;justify-content:space-between;}
.logo a{color:var(--fg);font-size:24px;font-weight:800;}
.logo .mark{display:inline-block;padding:6px 10px;border:2px solid var(--fg);border-radius:10px;}
.menu{display:flex;gap:20px;}
.menu a{color:var(--muted);font-weight:600;padding:8px 10px;border-radius:10px;border:1px solid transparent;}
.menu a:hover,.menu a:focus-visible{color:var(--fg);background:var(--primary-50);border-color:var(--edge);outline:none;}
.hamburger{display:none;}
@media (max-width:860px){
  .menu{display:none;}
  .menu.open{display:flex;flex-direction:column;position:absolute;top:64px;right:20px;left:20px;background:var(--elev);
    border:1px solid var(--edge);border-radius:14px;padding:12px 14px;gap:12px;box-shadow:var(--shadow-md);}
  .hamburger{display:inline-flex;border:1px solid var(--edge);background:var(--elev);color:var(--fg);padding:8px 10px;border-radius:10px;}
}

/* Hero */
.hero{padding:28px 20px 44px;border-bottom:1px solid var(--edge);}
.hero-card{border:1px solid var(--edge);border-radius:var(--radius-lg);padding:28px;background:var(--elev);box-shadow:var(--shadow-sm);}
.hero-card h1{margin:0 0 8px;font-size:32px;letter-spacing:.2px;}
.hero-card p{margin:0;color:var(--muted);}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal.show{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){.reveal{transition:none;}}

/* Toolbar */
.toolbar{display:flex;justify-content:space-between;align-items:center;margin:8px 0 18px;border:1px solid var(--edge);
  padding:10px 12px;border-radius:14px;background:var(--elev);box-shadow:var(--shadow-sm);}
.tabs{display:flex;gap:8px;flex-wrap:wrap;}
.tab{background:var(--surface);border:1px solid var(--edge);color:var(--fg);padding:8px 12px;border-radius:999px;cursor:pointer;font-weight:700;}
.tab.active{background:color-mix(in oklab, var(--primary-50) 60%, var(--elev));border-color:var(--edge-strong);}
.tools{display:flex;gap:10px;align-items:center;}
.search{background:var(--surface);border:1px solid var(--edge);border-radius:10px;padding:9px 12px;color:var(--fg);min-width:260px;}
.view{display:flex;gap:6px;}
.viewbtn{background:var(--surface);border:1px solid var(--edge);border-radius:10px;padding:8px;color:var(--muted);cursor:pointer;}
.viewbtn.active{background:color-mix(in oklab, var(--primary-50) 60%, var(--elev));color:var(--fg);}

/* Tags */
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;}
.tag{border:1px solid var(--edge);background:var(--surface);color:var(--fg);padding:6px 10px;border-radius:999px;cursor:pointer;}
.tag.active{background:color-mix(in oklab, var(--primary-50) 60%, var(--elev));}

/* Grid & Cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid{grid-template-columns:1fr;}}
.card{border:1px solid var(--edge);border-radius:16px;background:var(--elev);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);}
.thumb{position:relative;}
.thumb img{width:100%;height:180px;object-fit:cover;filter:saturate(.92);transition:transform .5s ease,filter .3s ease;}
.card:hover .thumb img{transform:scale(1.04);filter:saturate(1);}

.badge{position:absolute;left:10px;top:10px;background:color-mix(in oklab, var(--elev) 85%, transparent);
  padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid var(--edge);}
.badge.free{color:#047857;}
.badge.paid{color:#9a3412;}
.badge.closed{color:#991b1b;background:#ffecec;border-color:rgba(153,27,27,.25);}

.meta{padding:14px;}
.title{margin:0 0 6px;font-size:18px;}
.title a{color:var(--fg);}
.info{color:var(--muted);font-size:14px;}

.select-btn{margin-top:10px;border:1px solid var(--edge);background:var(--surface);color:var(--fg);
  padding:8px 10px;border-radius:10px;cursor:pointer;font-weight:700;}
.select-btn:hover{background:var(--primary-50);}
.select-btn[aria-disabled="true"]{pointer-events:none;opacity:.6;cursor:not-allowed;}

/* 마감 상태 */
.is-closed{opacity:.65;filter:grayscale(100%);}
.is-closed .thumb img{transform:none !important;}
.is-closed a{pointer-events:none;}
.is-closed .select-btn{pointer-events:none;}

/* List view */
.grid.list{display:flex;flex-direction:column;gap:12px;}
.grid.list .card{flex-direction:row;}
.grid.list .thumb img{height:140px;}
.grid.list .meta{flex:1;display:flex;align-items:center;justify-content:space-between;}

/* Selection bar (옵션) */
.selection{position:sticky;bottom:12px;}
.selection-inner{max-width:1200px;margin:12px auto 0;border:1px solid var(--edge);background:var(--elev);border-radius:16px;
  padding:10px 12px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-sm);}
.selection-title{font-weight:700;}
#selectionList{display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
#selectionList li{border:1px solid var(--edge);padding:6px 10px;border-radius:999px;background:var(--surface);}
.selection-actions{margin-left:auto;display:flex;gap:8px;}
.selection-actions .outline{border:1px solid var(--edge);background:var(--bg);color:var(--fg);padding:8px 12px;border-radius:10px;}
.selection-actions .primary{border:1px solid color-mix(in oklab, var(--primary) 40%, var(--edge));background:var(--primary);color:#fff;
  padding:8px 12px;border-radius:10px;text-decoration:none;font-weight:800;}
.selection-actions .primary[aria-disabled="true"]{opacity:.6;pointer-events:none;cursor:not-allowed;}
.selection-actions .primary:hover{background:var(--primary-600);}

/* Footer */
footer{border-top:1px solid var(--edge);padding:28px 20px;color:var(--muted);}
.foot{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;}
/* 카드 재정렬(F.L.I.P) 전환용 */
.card {
  will-change: transform, opacity;
  transition: transform .45s ease, opacity .45s ease;
}

/* 마감된 카드 살짝 흐리게 */
.card.is-closed {
  opacity: .7;
}

/* 마감 배지 유지 */
.badge.closed {
  background: #ffecec;
  color: #991b1b;
  border: 1px solid rgba(153,27,27,.3);
}
.selection {
  position: sticky; bottom: 12px;
  z-index: 50;
  animation: fadeIn 0.4s ease;
}
.selection-inner {
  max-width: 1200px; margin: 12px auto 0;
  border: 1px solid var(--edge);
  background: var(--elev);
  border-radius: 16px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-sm);
}
.selection-title { font-weight: 700; }
#selectionList {
  display: flex; gap: 8px; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}
#selectionList li {
  border: 1px solid var(--edge);
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface);
}
.selection-actions {
  margin-left: auto;
  display: flex; gap: 8px;
}
.selection-actions .outline {
  border: 1px solid var(--edge);
  background: var(--bg);
  color: var(--fg);
  padding: 8px 12px;
  border-radius: 10px;
}
.selection-actions .primary {
  border: 1px solid color-mix(in oklab, var(--primary) 40%, var(--edge));
  background: var(--primary);
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 800;
}
.selection-actions .primary[aria-disabled="true"] {
  opacity: .6; pointer-events: none;
}
.selection-actions .primary:hover { background: var(--primary-50); color: var(--fg); }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 선택 카드 강조 */
.card.selected {
  border: 2px solid var(--primary);
  box-shadow: 0 0 8px rgba(11,59,116,.25);
  transition: all .3s ease;
}
.card.selected .select-btn {
  background: var(--primary);
  color: #fff;
}