/* Reset/Root */
* { box-sizing: border-box; }
html { font-size: 16px; }
:root {
  --header-offset: 112px;
  --bg: #0a0c12;               /* 전체 배경: 아주 짙은 남청계열 */
  --text: #e6eef7;             /* 본문 텍스트: 푸른기 섞인 라이트 그레이 */
  --muted: #9fb0c6;            /* 보조 텍스트 */
  --card: #0f141c;             /* 카드/패널 배경: 살짝 밝은 톤 */
  --border: #1d2a3a;           /* 카드 경계/라인 */
  --accent: #00d1ff;           /* 포인트(버튼/하이라이트) - 네온 사이언 */
  --accent-contrast: #0b0b0d;  /* 포인트 위의 글자색(버튼 텍스트) */
  --caption: #8aa2b8;          /* 캡션/라벨 */
  --link: #8ecbff;             /* 링크 색 (가벼운 하늘색) */

  /* 선택: 호버/액티브 토큰 */
  --accent-hover: #33dbff;
  --accent-active: #00b3df;
  --border-soft: #162131;      /* 아주 미세한 구분선 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0c12;               /* 전체 배경: 아주 짙은 남청계열 */
    --text: #e6eef7;             /* 본문 텍스트: 푸른기 섞인 라이트 그레이 */
    --muted: #9fb0c6;            /* 보조 텍스트 */
    --card: #0f141c;             /* 카드/패널 배경: 살짝 밝은 톤 */
    --border: #1d2a3a;           /* 카드 경계/라인 */
    --accent: #00d1ff;           /* 포인트(버튼/하이라이트) - 네온 사이언 */
    --accent-contrast: #0b0b0d;  /* 포인트 위의 글자색(버튼 텍스트) */
    --caption: #8aa2b8;          /* 캡션/라벨 */
    --link: #8ecbff;             /* 링크 색 (가벼운 하늘색) */

    /* 선택: 호버/액티브 토큰 */
    --accent-hover: #33dbff;
    --accent-active: #00b3df;
    --border-soft: #162131;      /* 아주 미세한 구분선 */
  }
}

/* 1) 기본 input/textarea 포커스 스타일 통일 */
.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: 1px solid var(--accent);
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans KR, Apple SD Gothic Neo, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  background-image:url('/assets/images/bg.gif');
  background-color:#000;
	vertical-align:middle;
}

/* Layout */
.container {
  min-width:320px; max-width: 1200px; margin: 0 auto; padding: 0 0.5rem; box-sizing: border-box;
}
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: 0 0.5rem;
}
.header-inner {
  display: grid; grid-template-columns: 1fr auto auto; gap: .75rem;
  align-items: center; padding: .75rem 0;
  height:60px;
}

/* 세로 정렬을 flex로 중앙 정렬 */
.brand-link{
  display: inline-flex;
  align-items: center;      /* 세로 가운데 */
  gap: .3rem;               /* 로고-텍스트 간격 */
  line-height: 1;           /* 줄간격 영향 최소화 */
}
/* 이미지 baseline 여백 제거 */
.brand-link img{
  height: 26px;             /* 필요 시 고정 */
}

/* 텍스트 미세 보정(옵션) */
.brand-name{
  line-height: 1;           /* 폰트 줄간격 영향 줄이기 */
  /* 살짝 내려 보이면 0.5~1px 미세조정 */
  position: relative; top: 0.18rem;
  font-size:0.98rem;
}
.brand { margin-top:0.5rem; }
.brand a { text-decoration: none; color: var(--text); font-weight: 700; font-size: 1.25rem; }
.search { display: flex; gap: .5rem; align-items: center; }
.search input {
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  padding: .5rem .75rem; border-radius: .5rem; width: 220px;
}
.icon-btn {
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  padding: .5rem .6rem; border-radius: .5rem; cursor: pointer;
}
.icon-btn:hover { border-color: var(--accent); }

.navbar {
  display: flex; gap: 1rem; padding: .5rem 0 .75rem; overflow-x: auto; height:52px;
}
.navbar a {
  color: var(--muted); text-decoration: none; font-size: .95rem;
  padding: .25rem .5rem; border-radius: .375rem;
}
@media (max-width: 480px) {
  .navbar {
    display: flex; gap: 0.6rem; padding: .5rem 0 .75rem; overflow-x: auto; height:52px;
  }
  .navbar a {
    color: var(--muted); text-decoration: none; font-size: .95rem;
    padding: .25rem .5rem; border-radius: .375rem;
  }
}
.navbar a.active, .navbar a:hover { color: #ffffff; font-weight:500; background: var(--accent); }

.page {
  display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; padding: 1.25rem 0.5rem; align-items: start;
}
@media (max-width: 1024px) {
  .page {
    #grid-template-columns: 1fr;
    grid-template-columns: minmax(0, 1fr); /* 1fr 대신 이거! */
  }
}

.card {
  #background: var(--card);
  #border: 1px solid var(--border);
  #border-radius: .75rem;
  #padding: 1rem;
}


.post-list {
  display: grid;
  grid-template-columns: minmax(280px, 1fr);
  gap: 5px;
}

.post-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 썸네일이 있을 때만 보이는 영역 */
.post-item.has-thumb .post-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;   /* 필요 시 1/1, 4/3 등으로 변경 */
  overflow: hidden;
  border-radius: 12px;
  background: #f3f4f6;
}

.post-item.has-thumb .post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 프레임 채우기 + 크롭 */
  object-position: center; /* 중앙 기준 */
  display: block;
}

/* 썸네일이 없을 때 여백을 조금 더 타이트하게 */
.post-item.no-thumb { gap: 8px; }

.post-body .meta {
  color: #6b7280; font-size: .9rem; display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 0;
}
.post-body p[itemprop="description"] { margin: 6px 0 0; color: var(--text); font-size:0.95rem; }
/*
.post-list { display: grid; gap: 1rem; }
.post-item { display: grid; gap: .5rem; }
*/
.post-item h2 { margin: 0; font-size: 1.125rem; }
.post-item h2 a { color: var(--text); text-decoration: none; }
.post-item h2 a:hover { color: var(--link); }

.meta { color: var(--muted); font-size: .9rem; display: flex; gap: .75rem; flex-wrap: wrap; }
.meta .desc { display: flex; gap: .75rem; }
#post-link-copy { padding:0; border:0; background: unset; color: var(--muted); cursor:pointer; }
#post-link-copy:hover { text-decoration: underline; }
/*
.tags { display: flex; gap: .5rem; flex-wrap: wrap; }
.tag { font-size: .8rem; padding: .15rem .5rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); }
*/
.tags {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;      /* 기본 한 줄 */
  margin-top: 15px;
}
.tag {
  display: inline-block;
  font-size: .8rem; padding: .15rem .5rem; border: 1px solid var(--border); border-radius: 999px;
  text-decoration: none;
  max-width: 30vw;
  color: var(--muted);
  white-space: nowrap;    /* 태그 내부 개행 방지 */
}
.tag:hover { text-decoration: underline; }
.tag.more {
  cursor: pointer;
  font-weight: 600;
  color: var(--muted);
}

/* 펼친 상태: 모두 보이고 줄바꿈 허용 */
.tags.expanded {
  flex-wrap: wrap;
  overflow: visible;
  white-space: normal;
}
/* JS가 넘침 판단 후 숨기는 클래스 */
.tag.is-hidden { display: none; }

.meta-actions{
  display:flex; gap:8px;
  justify-content: flex-end;
}
.meta-actions .btn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border:1px solid var(--border);
  border-radius:10px; background:var(--card); color:var(--text);
  text-decoration:none; transition:.15s border-color,.15s color,.15s background;
  cursor:pointer;
}
.meta-actions .btn-icon:hover{ border-color:var(--link); color:var(--link); }
.meta-actions .btn-icon.danger:hover{ border-color:#ef4444; color:#ef4444; }

/* 폼을 inline으로 */
form.inline{ display:inline; margin:0; }

/* 스크린리더 전용 */
.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;
}

aside .widget {
  margin-bottom: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: 1rem;
}
.widget h3 { margin: 0 0 .5rem; font-size: 1rem; }
.cat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
/* 기본 스타일 */
.cat-list a{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .5rem;
  color: var(--text);
  text-decoration: none;

  /* 자리 유지를 위한 투명 보더 */
  border-bottom: 1px solid transparent;
}
/* 선택: 호버 시 컬러만 살짝 변경 (배경 변화 없음) */
.cat-list a:hover{
  color: var(--link);
}
.latest-list { display:block; }
.latest-list a{
  display:block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 말줄임 */
  color: var(--text);
  text-decoration: none;
  padding: .35rem .5rem;
  border-radius: .5rem;
}
.latest-list a:hover{
  background: var(--card);
  #border-bottom: 1px dotted var(--border);
}

.breadcrumbs-container { display:flex;justify-content: space-between; align-items: end; margin:.5rem 0 .5rem; }
.breadcrumbs { font-size: .9rem; color: var(--muted); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/*
.pagination { display: flex; justify-content: center; gap: .5rem; margin: 2rem 0 1rem 0; }
.pagination a, .pagination span {
  border: 1px solid var(--border); padding: .15rem .4rem; border-radius: .5rem; text-decoration: none; color: var(--text);
}
.pagination .current { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

.footer {
  border-top: 1px solid var(--border); padding: 1.25rem 0; color: var(--muted); font-size: .95rem;
}
*/
.pagination{ display:flex; justify-content: center; gap:6px;  gap: .5rem; margin: 2rem 0 1rem 0; align-items:center; flex-wrap:wrap }
.pagination a,.pagination span{
  padding:.3rem .8rem;border:1px solid var(--border,#e5e7eb);
  border-radius:.5rem;text-decoration:none;color:inherit
}
.pagination .current{ background: var(--accent); color: #fff; border-color: var(--accent); }
.pagination .disabled{opacity:.5;pointer-events:none}
.pagination .gap{padding:0 .2rem;border:0}


/* Post content */
.article h1 { margin: 0 0 .5rem; font-size: 1.75rem; }
.article .cover { width: 100%; aspect-ratio: 16/9; background: var(--border); border-radius: .75rem; }
.article .content { margin-top: 1rem; min-height:200px; }
.ck-content img { max-width: 100%; height: auto; }
.ck-content table { width: 100%; border-collapse: collapse; }
.ck-content blockquote { margin: 1em 0; padding-left: 1em; border-left: 4px solid #e5e7eb; }
.ck-content figure {
  margin: .8rem 0;
}
.ck-content figure figcaption {
  font-size: .82rem; padding: .3rem 0; text-align: center;
  background: var(--card);
  color: var(--caption);
}
.ck-content ul {
  padding-inline-start: 30px;
}
@media (max-width:480px){
  .ck-content ul {
    padding-inline-start: 20px;
  }
}

.article .content pre, .article .content code {
  background: rgba(127,127,127,.12);
  padding: .15rem .35rem; border-radius: .35rem;
}
.share { display: flex; gap: .5rem; margin: 3rem 0 ; align-items: center; justify-content: center; }

/* Write form */
.combo{
  display:flex;
  width:100%;
  border:1px solid var(--border);
  overflow:hidden;                /* 라운드 안쪽으로 깔끔하게 컷팅 */
  background:#fff;
  box-sizing:border-box;
  transition:border-color .15s, box-shadow .15s;
  margin-bottom:15px;
}
.combo:focus-within{
  border-color:var(--accent);
  #box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

/* 인풋: 강조된 텍스트 느낌 */
.combo__input{
  flex:1 1 auto;
  min-width:0;                    /* 넘침 방지 */
  border:0;
  padding:.9rem 1rem;
  font-size:1.125rem;             /* 18px */
  font-weight:700;                /* 굵게 */
  color:var(--accent-700);        /* 포인트 컬러 */
  background:var(--accent-50);    /* 살짝 강조 배경 */
  outline:none;
}
.combo__input::placeholder{
  color:#93a2b8;                  /* 덜 강조된 플레이스홀더 */
  font-weight:500;
}

/* 버튼: 컴포넌트의 우측 캡 */
.combo__btn{
  border:0;
  padding:.9rem 1rem;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}

.form { display: grid; gap: .75rem; }
.form label { font-weight: 600; font-size: .95rem; }
.form input[type="text"], .form input[type="url"], .form input[type="datetime-local"], .form textarea, .form select {
  width: 100%; border: 1px solid var(--border); background: var(--card); color: var(--text);
  padding: .6rem .75rem;
}
.form textarea { min-height: 80px; font-family: inherit; resize: none; }
.form .actions { display: flex; gap: .5rem; }
.btn {
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-contrast);
  padding: .6rem .9rem; border-radius: .5rem; cursor: pointer; font-weight: 600;
}
.btn.secondary { background: transparent; color: var(--accent); }

/* Accessibility */
.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus { position: static; width: auto; height: auto; padding: .5rem; background: var(--accent); color: var(--accent-contrast); border-radius: .5rem; }




/* ===== Footer (custom) ===== */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  padding: 1.5rem 0;
}

/* 메뉴 */
.footer-menu {
  padding: 0 0 30px 0;
}
.footer-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;      /* 좁은 화면에서 줄바꿈 */
  gap: 0 1.5rem;
}
.footer-menu a {
  color: var(--muted);
  text-decoration: none;
  padding: .25rem 0;
  font-size: 0.95rem;
}
.footer-menu a:hover { color: var(--link); text-decoration: underline; }

/* 회사 정보 */
.company__name {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--muted);
}
.company__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  color: var(--muted);
  font-size: .82rem;
}

.company__meta .badge {
  display: inline-block;
  border: 1px solid var(--border);
  background: var(--card);
  padding: .05rem .4rem;
  border-radius: .35rem;
  margin-left: .25rem;
  font-size: .85em;
  color: var(--text);
}
.company__meta .verify {
  margin-left: .5rem;
  font-size: .9em;
  color: var(--link);
  text-decoration: none;
}
.company__meta .verify:hover { text-decoration: underline; }

.address {
  color: var(--muted);
  font-style: normal;
  font-size: .82rem;
}

/* 저작권 라인 */
.footer-legal {
  margin-top: .2rem;
  padding-top: .2rem;
  #border-top: 1px dashed var(--border);
  color: var(--muted);
  font-size: .88rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-legal .brand { color: var(--muted); font-weight: 500; }
.footer-legal a { color: var(--muted); text-decoration: none; }
.footer-legal a:hover { color: var(--link); text-decoration: underline; }



/* CKEditor 5 편집 영역 최소 높이 보장 */
.ck-editor {
  color:#111111;
}
.ck-editor__editable_inline {
  min-height: 500px !important;   /* 필요시 !important */
  /* max-height: 800px;           스크롤 제한을 원하면 추가 */
  /* overflow: auto;               max-height 쓸 때만 */
}
/* 에디터 내용에만 적용하고 싶다면 .ck-content 범위로 스코프 */
.ck-content .image-pair{
  display:flex; gap:8px; align-items:flex-start; flex-wrap:nowrap;
}
.ck-content .image-pair > figure.image{ flex:1 1 0; margin:0; }



/*로그인박스 */
.widget .account-box { display:grid; gap:.5rem;  box-sizing: border-box; }
.widget .account-box .actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:7px; padding-top:15px; border-top:1px dotted var(--muted); }
.btn.btn-sm { padding:.35rem .6rem; font-size:.9rem; border-radius:.5rem; background:#111; color:#fff; text-decoration:none; }
.btn.btn-sm.ghost { background:#f3f4f6; color:#111; }
.widget .account-box.logged-in > P { margin:0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.account-box.login input { width:100%; padding:.5rem .6rem; border:1px solid #e5e7eb; border-radius:.5rem; box-sizing: border-box; }
.account-box.login label { display:block; margin-bottom:.4rem; }
.account-box .help { margin:.25rem 0 0; font-size:.85rem; opacity:.8; }
/* 텍스트 링크 (유튜브 채널 열기) */
.account-box .text-link {
  color: #93c5fd; text-decoration: none; border-bottom: 1px dashed rgba(147,197,253,.4);
}
.account-box .text-link:hover { color: #bfdbfe; border-bottom-color: #bfdbfe; }
.account-box .a-btn {
  --padY: .55rem; --padX: .9rem;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: var(--padY) var(--padX);
  font-weight: 600; font-size: .92rem;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  will-change: transform;
}
/* 프라이머리 (마크 연동) */
.account-box .btn-primary {
  width:100%; justify-content: center;
  color: var(--text);
  background: #3b82f6;
}

/* Danger (유튜브) */
.account-box .btn-danger {
  width:100%; justify-content: center;
  color: var(--text);
  background: #ef4444;
  #background: linear-gradient(180deg, #fb7185, #ef4444);
  #border-color: #ef4444;
}


/* 사이드바 레이아웃 */
/* ===== Right Drawer Sidebar (full CSS) ===== */

/* 기본: 닫힌 상태(오른쪽 바깥) */
.sidebar{
  position: fixed;
  top: 0;
  right: 0;            /* 오른쪽 도킹 */
  left: auto;
  width: min(88vw, 240px);
  height: 100dvh;
  background: var(--card, #fff);
  color: var(--text, #111);
  border-left: 1px solid var(--border, #e5e7eb);
  transform: translateX(100%);     /* 오른쪽으로 숨김 */
  transition: transform .25s ease;
  z-index: 1100;
  display: flex;
  flex-direction: column;
}

/* 열릴 때 */
.sidebar.open{
  transform: translateX(0);
}

/* 헤더/내용 예시(선택) */
.sidebar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
  padding:12px 14px;
  border-bottom:1px solid var(--border, #e5e7eb);
}
.sidebar-head .close{
  appearance:none;
  background:transparent;
  border:0;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  color: var(--text);
}
.sidebar-nav{
  display:grid;
  overflow:hidden;
}

/* 배경 딤드 */
.sidebar-dim{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 1090;
}

/* 사이드바가 열리면 딤드 활성화 (형제 선택자) */
.sidebar.open ~ .sidebar-dim{
  opacity: 1;
  pointer-events: auto;
}

/* 사이드바 열릴 때 페이지 스크롤 잠금 (지원 브라우저) */
:root:has(.sidebar.open){
  overflow: hidden;
}

/* ≥1200px: 5개 보이기 (원하면 조정) */
@media (min-width:800px){
  .other-list{grid-template-columns:repeat(3, minmax(180px,1fr))}
}