/* ==========================================================================
   HOCUMENT - style.css
   Tone: Minimal / Black & White / Soft Gray (based on business card)
   Bootstrap5 friendly overrides (light touch)
   ========================================================================== */

/* 1) Font */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root{
  --hc-black: #0b0c0e;
  --hc-dark:  #222428;
  --hc-gray:  #6b6f76;
  --hc-line:  #e7e8eb;
  --hc-soft:  #f6f7f9;
  --hc-white: #ffffff;

  --hc-radius: 18px;
  --hc-radius-lg: 22px;
  --hc-shadow: 0 10px 30px rgba(10, 10, 10, .06);
  --hc-shadow-sm: 0 6px 18px rgba(10, 10, 10, .06);
}

/* Base */
html, body {
  height: 100%;
}

body{
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
  color: var(--hc-black);
  background: var(--hc-white);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links */
a{
  color: inherit;
}

a:hover{
  color: var(--hc-black);
  opacity: .92;
}

/* Selection */
::selection{
  background: rgba(11,12,14,.12);
}

/* 2) Typography tweaks */
h1,h2,h3,h4,h5{
  letter-spacing: -0.02em;
}

.lead{
  line-height: 1.65;
}

/* 3) Utilities */
.object-fit-cover{
  object-fit: cover;
}

/* Soft section backgrounds */
.bg-light{
  background-color: var(--hc-soft) !important;
}

/* 4) Borders / radius / shadows */
.rounded-4{
  border-radius: var(--hc-radius) !important;
}

.border{
  border-color: var(--hc-line) !important;
}

.shadow-sm{
  box-shadow: var(--hc-shadow-sm) !important;
}

/* Cards: unify */
.card{
  border-radius: var(--hc-radius);
}

.card.rounded-4{
  border-radius: var(--hc-radius) !important;
}

.card, .accordion-item{
  border-color: var(--hc-line) !important;
}

/* 5) Navbar */
.navbar{
  background: var(--hc-white) !important;
}

.navbar .navbar-brand{
  letter-spacing: -0.02em;
}

.navbar .nav-link{
  color: var(--hc-dark) !important;
  font-weight: 500;
  padding: .5rem .75rem;
  border-radius: 999px;
}

.navbar .nav-link:hover{
  background: rgba(11,12,14,.04);
}

.navbar .nav-link.active{
  background: rgba(11,12,14,.07);
  color: var(--hc-black) !important;
}

/* 6) Buttons (keep Bootstrap styles but match tone) */
.btn{
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.btn-dark{
  background: var(--hc-black) !important;
  border-color: var(--hc-black) !important;
}

.btn-dark:hover{
  background: #000 !important;
  border-color: #000 !important;
}

.btn-outline-dark{
  border-color: rgba(11,12,14,.25) !important;
  color: var(--hc-black) !important;
}

.btn-outline-dark:hover{
  background: rgba(11,12,14,.06) !important;
}

/* CTA sections */
.bg-dark{
  background: var(--hc-black) !important;
}

/* 7) Forms */
.form-control, .form-select, .accordion-button{
  border-radius: 14px;
  border-color: var(--hc-line);
}

.form-control:focus, .form-select:focus{
  border-color: rgba(11,12,14,.35);
  box-shadow: 0 0 0 .25rem rgba(11,12,14,.08);
}

.form-label{
  letter-spacing: -0.01em;
}

/* Placeholder tone */
.form-control::placeholder{
  color: rgba(20,20,20,.35);
}

/* 8) Badges */
.badge{
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.text-bg-secondary{
  background: rgba(11,12,14,.10) !important;
  color: var(--hc-black) !important;
}

/* 9) Accordion */
.accordion-button{
  font-weight: 700;
}

.accordion-button:not(.collapsed){
  background: rgba(11,12,14,.04);
  color: var(--hc-black);
  box-shadow: none;
}

.accordion-button:focus{
  border-color: rgba(11,12,14,.35);
  box-shadow: 0 0 0 .25rem rgba(11,12,14,.08);
}

/* 10) Section spacing helpers (optional) */
section{
  scroll-margin-top: 90px;
}

/* 11) Portfolio hover (subtle) */
.pf-item .card{
  transition: transform .18s ease, box-shadow .18s ease;
}

.pf-item .card:hover{
  transform: translateY(-3px);
  box-shadow: var(--hc-shadow) !important;
}

/* 12) Footer */
.footer, footer{
  border-top: 1px solid var(--hc-line);
}

/* 13) Small text contrast */
.text-muted{
  color: var(--hc-gray) !important;
}

/* 14) Image smoothing */
img{
  image-rendering: -webkit-optimize-contrast;
}

/* 15) Responsive micro tweaks */
@media (max-width: 576px){
  .display-6{ font-size: 2rem; }
  .lead{ font-size: 1.05rem; }
}

/* Optional: reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}