@charset "utf-8";

/* ===== 상단 Pill 네비게이션 (전역 토큰 사용) ===== */
.kk-pill-nav {
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  padding:0;
  margin:12px 0;
  list-style:none;
}

.kk-item > a {
  display:inline-block;
  padding:.5rem .9rem;
  border-radius:999px;
  text-decoration:none;
  color:var(--text);
  background:transparent;
}

.kk-item.active > a {
  font-weight:700;
  box-shadow:0 0 0 2px var(--primary) inset;
}

/* 드롭다운 서브 */
.kk-item.has-sub { position:relative; }
.kk-item.has-sub .kk-sub {
  position:absolute;
  left:0;
  top:calc(100% + 6px);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:.5rem;
  min-width:220px;
  display:none;
  z-index:10;
}
.kk-item.has-sub.active .kk-sub,
.kk-item.has-sub:hover .kk-sub { display:block; }

.kk-sub-a {
  display:block;
  padding:.45rem .65rem;
  border-radius:8px;
  text-decoration:none;
  white-space:nowrap;
  color:var(--text-sub);
}
.kk-sub-a.active {
  font-weight:600;
  background:var(--chip);
}

/* 모바일에서는 드롭다운을 아래로 펼친 형태로 */
@media (max-width: 820px){
  .kk-item.has-sub .kk-sub {
    position:static;
    display:block;
    border:none;
    padding:.25rem 0 0;
    background:transparent;
  }
}

/* ★ 만약 서브메뉴를 강제로 숨기고 싶었던 거라면
   아래 라인은 지우지 말고 그대로 두고 써.
   지금은 다크모드랑 무관해서 주석 처리해 둠
*/
/*
.kk-item.has-sub.active .kk-sub,
.kk-item.has-sub:hover .kk-sub {display:none;}
*/

#ctt {max-width: 1300px; margin: 0 auto;}
#ctt h1 {text-align: center; font-size: 26px; margin: 30px auto;}

/* ===== 인사말 페이지(내용관리 전용) - 전역 다크토큰 연동 버전 ===== */

/* 전역 토큰에서 색 가져오기 */
.greeting{
  --c-txt:   var(--text);
  --c-dim:   var(--muted);
  --c-line:  var(--line);
  --c-bg:    var(--card);
  --c-badge: var(--chip2);
  --c-badge-t: var(--chip-text2);
  --radius:16px;

  max-width:1300px;
  margin:0 auto;
}

/* 필요하면 다크모드에서만 살짝 튜닝 */
:root[data-theme="dark"] .greeting{
  /* 전역 토큰이 이미 다크값이라 꼭 안 바꿔도 되지만,
     배지 대비 조금 더 주고 싶으면 여기서 조절해도 됨 */
  --c-badge:   var(--chip2);
  --c-badge-t: var(--chip-text2);
}

.greet-hero{margin:0 0 24px;}
.greet-title{
  margin:0 0 6px;
  font-size:clamp(28px,4vw,40px);
  line-height:1.2;
  color:var(--c-txt);
  letter-spacing:-.02em;
}
.greet-sub{
  margin:0;
  color:var(--c-dim);
  font-size:clamp(14px,1.8vw,16px);
}

.greet-wrap{
  display:grid;
  grid-template-columns: 2.1fr .9fr;
  gap: 40px;
  align-items:start;
}
@media (max-width: 900px){
  .greet-wrap{
    grid-template-columns:1fr;
    gap:20px;
  }
}

.greet-text{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.callout{
  position:relative;
  padding:18px;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(0,0,0,0.02),transparent);
}
:root[data-theme="dark"] .callout{
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);
}
.callout p{
  margin:0;
  color:var(--c-txt);
  font-size:14px;
}
.callout b,
.callout strong{
  font-weight:700;
}
.callout p strong{
  display:block;
  font-size:16px;
}

.badge{
  position:absolute;
  top:-12px;
  left:14px;
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:var(--c-badge);
  color:var(--c-badge-t);
  font-size:12px;
  font-weight:800;
  line-height:1;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.greet-figure{
  margin:0;
  justify-self:end;
  max-width:560px;
}
@media (max-width: 900px){
  .greet-figure{
    justify-self:stretch;
    max-width:100%;
  }
}
.greet-figure img{
  width:auto;
  height:auto;
  display:block;
  border-radius:20px;
  object-fit:cover;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  border:1px solid var(--c-line);
}

.signature{margin-top:10px;text-align:left;}
.sig-line{
  height:1px;
  background:var(--c-line);
  margin:10px 0 14px;
  border-radius:1px;
}
.sig-role{
  margin:0;
  color:var(--c-dim);
  font-size:13px;
}
.sig-name{
  margin:4px 0 0;
  color:var(--c-txt);
}

/* 내용관리 기본 여백 보정 */
#ctt_con .greeting{margin-top:10px;}