:root{
  --ea-bg:#ffffff;
  --ea-text:#121212;
  --ea-muted:#6b7280;
  --ea-line:#e5e7eb;
  --ea-card:#ffffff;
  --ea-shadow: 0 10px 30px rgba(0,0,0,.06);
  --ea-radius: 18px;

  --ea-accent: #111111; /* customizer에서 덮어씀 */
  --ea-container: 1100px;

  --ea-font: ui-sans-serif, system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --ea-serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;

  --ea-leading: 1.75;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body.ea-theme{
  margin:0;
  font-family: var(--ea-font);
  color: var(--ea-text);
  background: var(--ea-bg);
  line-height: var(--ea-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img{ max-width:100%; height:auto; border-radius: 14px; }
a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--ea-accent); }

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

.ea-skip-link{
  position:absolute; left:-9999px; top:10px;
  background:#000; color:#fff; padding:10px 12px; border-radius:10px;
}
.ea-skip-link:focus{ left:10px; z-index:9999; }

.ea-container{
  width: min(var(--ea-container), calc(100% - 40px));
  margin: 0 auto;
}

/* ================= Header ================= */
.ea-header{
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ea-line);
  z-index: 50;
}

.ea-header-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
}

.ea-branding{ display:flex; flex-direction:column; gap:2px; }
.ea-logo img{ border-radius: 0; max-height: 44px; width: auto; }
.ea-site-title{
  font-family: var(--ea-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 20px;
}
.ea-tagline{ margin:0; color: var(--ea-muted); font-size: 13px; }

.ea-right{ display:flex; align-items:center; gap:14px; }

.ea-nav-toggle{
  display:none;
  border:1px solid var(--ea-line);
  background:#fff;
  border-radius: 999px;
  padding: 10px 12px;
  cursor:pointer;
}
.ea-nav-toggle-label{ font-size: 13px; color: var(--ea-muted); }

/* ===== 기본 NAV (상위 메뉴) ===== */
.ea-nav ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  gap: 14px;
  align-items:center;
}

.ea-nav li{ position: relative; }

.ea-nav a{
  display:inline-block;
  padding: 10px 10px;
  border-radius: 999px;
  color: var(--ea-muted);
  font-size: 14px;
}
.ea-nav a:hover{ background: #f7f7f7; color: var(--ea-text); }

.ea-header-actions{ display:flex; align-items:center; }

/* Search */
.ea-search{
  display:flex;
  align-items:center;
  gap: 8px;
  border: 1px solid var(--ea-line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 10px;
}
.ea-search-input{
  border:0;
  outline:0;
  width: 180px;
  font-size: 14px;
}
.ea-search-button{
  border:0;
  background: transparent;
  cursor:pointer;
  color: var(--ea-muted);
  font-size: 13px;
}

/* ================= Layout ================= */
.ea-content{ padding: 26px 0 46px; }
.ea-layout{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items:start;
}

.ea-main.ea-full{ grid-column: 1 / -1; }

/* ================= Hero / Archive ================= */
.ea-hero{
  padding: 18px 0 22px;
  border-bottom: 1px solid var(--ea-line);
  margin-bottom: 22px;
}
.ea-hero-kicker{
  margin:0 0 6px;
  color: var(--ea-muted);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ea-hero-title{
  margin:0;
  font-family: var(--ea-serif);
  font-size: 40px;
  letter-spacing: -0.03em;
}
.ea-hero-subtitle{
  margin: 10px 0 0;
  color: var(--ea-muted);
}

.ea-archive-header{ margin: 6px 0 18px; }
.ea-page-title{
  margin:0;
  font-family: var(--ea-serif);
  font-size: 30px;
  letter-spacing: -0.03em;
}
.ea-page-subtitle{ margin: 10px 0 0; color: var(--ea-muted); }

.ea-post-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

/* ================= Cards ================= */
.ea-card{
  background: var(--ea-card);
  border: 1px solid var(--ea-line);
  border-radius: var(--ea-radius);
  overflow:hidden;
  box-shadow: var(--ea-shadow);
}
.ea-thumb img{ display:block; width:100%; }
.ea-card-body{ padding: 16px 16px 18px; }
.ea-card-title{
  margin: 8px 0 10px;
  font-family: var(--ea-serif);
  font-size: 22px;
  letter-spacing: -0.02em;
}
.ea-card-excerpt{ color: var(--ea-muted); }
.ea-card-footer{ margin-top: 12px; }

.ea-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
  color: var(--ea-muted);
  font-size: 13px;
}
.ea-meta-dot{ opacity:.6; }

.ea-readmore{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  color: var(--ea-accent);
  font-weight: 600;
  font-size: 14px;
}
.ea-readmore::after{
  content:"→";
  opacity:.8;
}

/* ================= Single Article ================= */
.ea-article{
  background:#fff;
  border: 1px solid var(--ea-line);
  border-radius: var(--ea-radius);
  box-shadow: var(--ea-shadow);
  padding: 18px 18px 20px;
}
.ea-article-header{ padding-bottom: 10px; border-bottom: 1px solid var(--ea-line); margin-bottom: 14px; }
.ea-article-title{
  margin: 6px 0 0;
  font-family: var(--ea-serif);
  font-size: 34px;
  letter-spacing: -0.03em;
}
.ea-article-content{
  color: #1f2937;
  font-size: 16px;
}
.ea-article-content p{ margin: 0 0 14px; }
.ea-article-content h2,
.ea-article-content h3{
  font-family: var(--ea-serif);
  letter-spacing: -0.02em;
}
.ea-article-content h2{ margin: 26px 0 10px; font-size: 24px; }
.ea-article-content h3{ margin: 22px 0 10px; font-size: 20px; }
.ea-article-content blockquote{
  margin: 18px 0;
  padding: 14px 16px;
  border-left: 3px solid var(--ea-accent);
  background: #fafafa;
  border-radius: 14px;
  color: var(--ea-muted);
}
.ea-article-content code{
  background: #f6f6f6;
  padding: 2px 6px;
  border-radius: 8px;
}
.ea-article-content pre{
  background: #0b0f19;
  color: #e5e7eb;
  padding: 14px;
  border-radius: 14px;
  overflow:auto;
}
.ea-article-footer{ padding-top: 14px; border-top: 1px solid var(--ea-line); margin-top: 16px; }

.ea-post-nav{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}
.ea-post-nav-item a{
  display:inline-block;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--ea-line);
  color: var(--ea-muted);
  background: #fff;
}
.ea-post-nav-item a:hover{ color: var(--ea-text); background: #fafafa; }

/* ================= Sidebar ================= */
.ea-sidebar{
  position: sticky;
  top: 92px;
  padding: 14px 0;
}
.widget{
  background:#fff;
  border: 1px solid var(--ea-line);
  border-radius: var(--ea-radius);
  padding: 14px 14px 16px;
  box-shadow: var(--ea-shadow);
  margin-bottom: 14px;
}
.widget-title{
  margin: 0 0 10px;
  font-family: var(--ea-serif);
  font-size: 18px;
  letter-spacing: -0.02em;
}
.ea-muted{ color: var(--ea-muted); }
.ea-small{ font-size: 13px; }

/* ================= Pagination ================= */
.ea-pagination{ margin-top: 18px; }
.nav-links{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.page-numbers{
  border: 1px solid var(--ea-line);
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--ea-muted);
  background:#fff;
}
.page-numbers.current{
  color:#fff;
  background: var(--ea-accent);
  border-color: var(--ea-accent);
}

/* ================= Comments ================= */
.ea-comments{
  margin-top: 18px;
  background:#fff;
  border: 1px solid var(--ea-line);
  border-radius: var(--ea-radius);
  box-shadow: var(--ea-shadow);
  padding: 16px;
}
.ea-comment-reply-title, .ea-comments-title{
  font-family: var(--ea-serif);
  letter-spacing: -0.02em;
}
.comment-list{ padding-left: 20px; }

.ea-comment-form input[type="text"],
.ea-comment-form input[type="email"],
.ea-comment-form input[type="url"],
.ea-comment-form textarea{
  width:100%;
  border: 1px solid var(--ea-line);
  border-radius: 14px;
  padding: 10px 12px;
  font: inherit;
}
.ea-comment-form input[type="submit"]{
  border: 0;
  background: var(--ea-accent);
  color:#fff;
  border-radius: 14px;
  padding: 10px 14px;
  cursor:pointer;
}

/* ================= Footer ================= */
.ea-footer{
  border-top: 1px solid var(--ea-line);
  padding: 22px 0;
}
.ea-footer-inner{
  display:flex;
  justify-content: space-between;
  gap: 14px;
  align-items:center;
  flex-wrap: wrap;
}
.ea-footer-copy{
  color: var(--ea-muted);
  font-size: 13px;
  display:flex;
  gap:10px;
  align-items:center;
}
.ea-footer-dot{ opacity:.6; }
.ea-footer-nav ul{ margin:0; padding:0; list-style:none; display:flex; gap: 10px; }
.ea-footer-nav a{ color: var(--ea-muted); padding: 8px 10px; border-radius: 999px; }
.ea-footer-nav a:hover{ background:#f7f7f7; color: var(--ea-text); }

/* ================= Responsive base ================= */
@media (max-width: 980px){
  .ea-layout{ grid-template-columns: 1fr; }
  .ea-sidebar{ position: static; top:auto; }
  .ea-search-input{ width: 140px; }
}

/* =======================================================================
   NAV DROPDOWN (데스크탑 hover + 모바일 click)  — “깨짐 방지용”
   ======================================================================= */

/* 1) 서브메뉴를 가로로 펼치지 않도록 absolute dropdown */
.ea-nav .sub-menu{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;

  min-width: 190px;
  background: #fff;
  border: 1px solid var(--ea-line);
  border-radius: 14px;
  box-shadow: var(--ea-shadow);

  padding: 6px 0;
  margin: 0;

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all .18s ease;

  z-index: 200;
}

/* 2) 데스크탑: hover 시 열림 */
.ea-nav li:hover > .sub-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ea-nav .sub-menu li{
  list-style: none;
}

/* 3) 서브메뉴 링크는 박스형 */
.ea-nav .sub-menu a{
  display: block;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--ea-muted);
  white-space: nowrap;
  border-radius: 0;
}
.ea-nav .sub-menu a:hover{
  background: #f7f7f7;
  color: var(--ea-text);
}

/* ================= Mobile (<=720px) ================= */
@media (max-width: 720px){
  .ea-nav-toggle{ display:inline-flex; }
  .ea-search{ display:none; }

  .ea-nav{ display:none; }
  .ea-nav.is-open{ display:block; }

  .ea-nav ul{
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 0;
  }

  .ea-nav a{
    width: 100%;
  }

  /* 모바일에서는 서브메뉴를 static으로 아래로 펼침 */
  .ea-nav .sub-menu{
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 6px 0 6px 14px;
    display: none; /* JS로 토글 */
  }

  .ea-nav .menu-item.is-open > .sub-menu{
    display: block;
  }

  .ea-hero-title{ font-size: 34px; }
  .ea-article-title{ font-size: 28px; }
}

/* ======================================================
   Post List Thumbnail Height Fix (400px)
   ====================================================== */

/* 카드 리스트 썸네일 컨테이너 */
.ea-card .ea-thumb {
  height: 400px;
  overflow: hidden;
}

/* 이미지 자체 */
.ea-card .ea-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 비율 유지 + 중앙 크롭 */
  object-position: center;
  display: block;
}

/* ======================================================
   Single Post Image – Center Column Controlled Width
   ====================================================== */

/* 기본: 본문 컬럼 안에서만 해결 */
.single .ea-article-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 24px auto;
}

/* 데스크탑에서 이미지가 너무 커 보이는 문제 해결 */
@media (min-width: 1024px) {
  .single .ea-article-content img {
    max-width: 760px;   /* ← 핵심 */
  }
}

/* 아주 큰 화면에서도 안정 */
@media (min-width: 1600px) {
  .single .ea-article-content img {
    max-width: 820px;
  }
}

/* 모바일은 풀폭 유지 */
@media (max-width: 768px) {
  .single .ea-article-content img {
    max-width: 100%;
  }
}

/* ======================================================
   FIX: Content overflow pushing sidebar (Grid min-width issue)
   ====================================================== */

/* grid 1열이 큰 콘텐츠 때문에 안 줄어드는 문제 해결 */
.ea-layout{
  grid-template-columns: minmax(0, 1fr) 320px;
}

/* grid 아이템이 내용 때문에 옆으로 튀는 걸 차단 */
.ea-main,
.ea-article,
.ea-article-content{
  min-width: 0;
}

/* 본문 이미지/figure는 절대 컬럼 밖으로 못 나가게 */
.single .ea-article-content img,
.single .ea-article-content figure,
.single .ea-article-content .wp-block-image{
  max-width: 100%;
}

/* 혹시 inline width가 박혀 있어도 컬럼 안으로 강제 */
.single .ea-article-content img{
  width: auto;
  height: auto;
}

/* 이 테마는 사이드바 레이아웃이므로 full/wide는 컬럼 안으로 제한 */
.single .ea-article-content .alignfull,
.single .ea-article-content .alignwide{
  max-width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ======================================================
   MOBILE LAYOUT HARD RESET
   ====================================================== */

@media (max-width: 980px){

  /* grid → 단일 컬럼 */
  .ea-layout{
    grid-template-columns: 1fr !important;
  }

  /* 사이드바는 본문 아래로 */
  .ea-sidebar{
    position: static;
    width: 100%;
    margin-top: 24px;
  }

  /* 본문/사이드바 overflow 방지 */
  .ea-main,
  .ea-article,
  .ea-article-content{
    min-width: 0;
    overflow-x: hidden;
  }
}

/* ======================================================
   MOBILE CONTENT SAFETY
   ====================================================== */

@media (max-width: 980px){

  /* 이미지 */
  .single .ea-article-content img{
    max-width: 100% !important;
    height: auto;
  }

  /* 코드 블록 */
  .ea-article-content pre{
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 테이블 */
  .ea-article-content table{
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
  }

  /* Gutenberg wide/full 무력화 */
  .single .ea-article-content .alignwide,
  .single .ea-article-content .alignfull{
    max-width: 100% !important;
    margin: 0 !important;
  }
}
/* ======================================================
   MOBILE READABILITY TUNING
   ====================================================== */

@media (max-width: 720px){

  .ea-article-title{
    font-size: 24px;
    line-height: 1.3;
  }

  .ea-article-content{
    font-size: 15px;
    line-height: 1.7;
  }

  .ea-article-content h2{
    font-size: 20px;
  }

  .ea-article-content h3{
    font-size: 18px;
  }
}