/* deodeok-global — theduck global (EN/JA/ID). 우리 고유 디자인: 더덕 녹색 + 오리 노랑. 외부 글꼴 없이 시스템 글꼴. */
:root {
  --dg-bg: #f7f5ef;
  --dg-surface: #ffffff;
  --dg-ink: #1c2420;
  --dg-muted: #5d6862;
  --dg-line: #e3e0d6;
  --dg-green: #1f6b4a;
  --dg-green-dark: #154d35;
  --dg-green-soft: #eaf3ee;
  --dg-yellow: #f2b705;
  --dg-orange: #c4570f;
  --dg-radius: 10px;
  --dg-max: 1140px;
  --dg-side: 300px;
  --dg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --dg-font-ja: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", YuGothic, Meiryo, "Noto Sans KR", "Malgun Gothic", sans-serif;
  --dg-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--dg-bg); color: var(--dg-ink); font: 16px/1.65 var(--dg-font); overflow-wrap: break-word; }
/* 일본어: 금칙 처리(줄머리 구두점 금지) 엄격, 긴 영문·URL 은 어디서든 끊기 */
html[lang="ja"] body { font-family: var(--dg-font-ja); line-height: 1.85; line-break: strict; word-break: normal; overflow-wrap: anywhere; letter-spacing: .01em; }
/* 인도네시아어: 긴 낱말 하이픈 */
html[lang="id"] body { -webkit-hyphens: auto; hyphens: auto; }
img, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--dg-green); }
a:hover { color: var(--dg-green-dark); }
h1, h2, h3 { line-height: 1.3; }

.dg-wrap { max-width: var(--dg-max); margin: 0 auto; padding: 0 16px; }
.dg-skip { position: absolute; left: -9999px; }
.dg-skip:focus { left: 8px; top: 8px; z-index: 100; background: #fff; padding: 8px 12px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* ---------- 머리 ---------- */
.dg-header { background: var(--dg-surface); border-bottom: 1px solid var(--dg-line); }
.dg-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.dg-brand img { display: block; height: 44px; width: auto; }
.dg-langs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dg-langs a { font-size: 13px; font-weight: 700; text-decoration: none; color: var(--dg-muted); border: 1px solid var(--dg-line); border-radius: 999px; padding: 3px 11px; line-height: 1.6; }
.dg-langs a:hover { border-color: var(--dg-green); color: var(--dg-green); }
.dg-langs a[aria-current="true"] { background: var(--dg-green); border-color: var(--dg-green); color: #fff; }

.dg-navbar { background: var(--dg-green); }
.dg-navbar .dg-wrap { display: flex; align-items: center; gap: 12px; min-height: 46px; }
.dg-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1; }
.dg-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.dg-menu a { display: block; color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; padding: 12px 13px; letter-spacing: .02em; }
.dg-menu a:hover, .dg-menu a[aria-current="page"] { background: var(--dg-green-dark); color: #fff; }
.dg-menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
.dg-menu-button { display: none; color: #fff; font-weight: 700; cursor: pointer; padding: 11px 0; user-select: none; }

/* ---------- 검색 ---------- */
.dg-search { display: flex; gap: 6px; }
.dg-search input[type="search"] { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid #c9c4b6; border-radius: 6px; background: #fff; }
.dg-search button { font: inherit; font-size: 14px; font-weight: 700; padding: 7px 12px; border: 0; border-radius: 6px; background: var(--dg-yellow); color: #2a2100; cursor: pointer; }
.dg-nav .dg-search { width: 240px; }

/* ---------- 틀 ---------- */
.dg-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--dg-side); gap: 28px; padding-top: 24px; padding-bottom: 24px; align-items: start; }
.dg-layout--root { display: block; }
.dg-main { min-width: 0; }
.dg-archive-title { font-size: 20px; margin: 0 0 16px; }
.dg-empty { background: var(--dg-surface); border: 1px solid var(--dg-line); border-radius: var(--dg-radius); padding: 18px; }

/* ---------- 카드(첫 화면 5편) ---------- */
.dg-card { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; background: var(--dg-surface); border: 1px solid var(--dg-line); border-radius: var(--dg-radius); padding: 14px; margin: 0 0 16px; }
.dg-card__thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #e9e6dc; }
.dg-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dg-card__noimg { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #efe9d6, #d8e8de); }
.dg-card__body { min-width: 0; }
.dg-label { display: inline-block; background: var(--dg-yellow); color: #2a2100; font-size: 12px; font-weight: 800; text-decoration: none; padding: 2px 8px; border-radius: 4px; letter-spacing: .03em; }
.dg-label:hover { background: #ffd34d; color: #2a2100; }
.dg-card__title { font-size: 19px; line-height: 1.35; margin: 8px 0 6px; }
.dg-card__title a { color: var(--dg-ink); text-decoration: none; }
.dg-card__title a:hover { color: var(--dg-green); }
.dg-meta { color: var(--dg-muted); font-size: 13px; margin: 0 0 8px; }
.dg-readmore { font-size: 14px; font-weight: 700; text-decoration: none; }

.dg-pager { display: flex; justify-content: space-between; gap: 12px; margin: 20px 0 8px; }
.dg-pager a { display: inline-block; background: var(--dg-surface); border: 2px solid var(--dg-green); color: var(--dg-green); font-weight: 800; text-decoration: none; padding: 9px 18px; border-radius: 8px; }
.dg-pager a:hover { background: var(--dg-green); color: #fff; }
.dg-pager__older { margin-left: auto; }

/* ---------- 버튼 ---------- */
.dg-button { display: inline-block; background: var(--dg-green); color: #fff; text-decoration: none; font: inherit; font-weight: 800; font-size: 15px; border: 0; border-radius: 8px; padding: 10px 16px; cursor: pointer; text-align: center; }
.dg-button:hover { background: var(--dg-green-dark); color: #fff; }
.dg-button--ghost { background: var(--dg-surface); color: var(--dg-green); border: 2px solid var(--dg-green); padding: 8px 14px; }
.dg-button--ghost:hover { background: var(--dg-green-soft); color: var(--dg-green-dark); }
.dg-button--submit { background: var(--dg-yellow); color: #2a2100; }
.dg-button--submit:hover { background: #ffd34d; color: #2a2100; }
.dg-button--block { display: block; width: 100%; }

/* ---------- 글 화면 ---------- */
.dg-article { background: var(--dg-surface); border: 1px solid var(--dg-line); border-radius: var(--dg-radius); padding: 20px 24px 24px; }
.dg-crumbs { font-size: 13px; color: var(--dg-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dg-crumbs a { text-decoration: none; }
.dg-title { font-size: 26px; line-height: 1.3; margin: 8px 0 8px; }
html[lang="ja"] .dg-title { font-size: 24px; line-height: 1.5; }
.dg-content { font-size: 17px; }
.dg-content > :first-child { margin-top: 0; }
.dg-context { background: var(--dg-green-soft); border-left: 4px solid var(--dg-green); padding: 10px 14px; border-radius: 6px; font-weight: 600; }
.dg-body blockquote { margin: 14px 0; padding: 8px 14px; border-left: 3px solid var(--dg-line); color: #33403a; }
.dg-figure { margin: 18px 0; }
.dg-figure img { display: block; margin: 0 auto; border-radius: 6px; }
.dg-credit { font-size: 12px; color: var(--dg-muted); text-align: center; margin-top: 4px; }
.dg-original { font-weight: 700; margin: 18px 0; }
.dg-comments { margin-top: 18px; border-top: 2px dashed var(--dg-line); padding-top: 12px; }
.dg-post-response { font-weight: 700; margin: 0 0 6px; }
.dg-comment-list { padding-left: 2.3em; margin: 0; }
.dg-comment-list li { padding: 8px 0; border-bottom: 1px solid var(--dg-line); }
.dg-comment-list li::marker { font-weight: 800; color: var(--dg-green); }
.dg-votes { font-family: var(--dg-mono); font-size: .9em; color: var(--dg-orange); font-weight: 700; white-space: nowrap; }
.dg-release { font-size: 18px; margin: 22px 0 6px; }
.dg-question { font-size: 18px; }
.dg-content iframe, .dg-content .wp-block-embed { max-width: 100%; }
.dg-content .wp-block-embed iframe, .dg-content iframe[src*="youtube"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.dg-content .twitter-tweet { margin-left: auto !important; margin-right: auto !important; }

.dg-postnav { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 16px; padding-top: 16px; border-top: 1px solid var(--dg-line); }
.dg-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 14px; }
.dg-tags__title, .dg-share__title { font-size: 13px; font-weight: 800; color: var(--dg-muted); text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; }
.dg-share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 6px; }
.dg-share__btn { font-size: 13px; font-weight: 700; color: #fff; text-decoration: none; padding: 6px 12px; border-radius: 999px; background: #47524c; }
.dg-share__btn:hover { color: #fff; filter: brightness(1.12); }
.dg-share__btn[data-net="facebook"] { background: #1b4f9c; }
.dg-share__btn[data-net="x"] { background: #111; }
.dg-share__btn[data-net="pinterest"] { background: #b3122a; }
.dg-share__btn[data-net="linkedin"] { background: #0a5c8f; }
.dg-share__btn[data-net="whatsapp"] { background: #1d7f47; }
.dg-disqus { margin-top: 26px; min-height: 120px; }

/* ---------- 사이드바 ---------- */
.dg-sidebar { min-width: 0; }
.dg-sidebar > * + * { margin-top: 18px; }
.dg-widget { background: var(--dg-surface); border: 1px solid var(--dg-line); border-radius: var(--dg-radius); padding: 14px; }
.dg-widget__title { font-size: 14px; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--dg-green); }
.dg-widget--logo { text-align: center; }
.dg-widget--logo img { display: inline-block; height: 44px; width: auto; }
.dg-widget__tagline { font-size: 13px; color: var(--dg-muted); margin: 6px 0 0; }
.dg-popular { list-style: none; margin: 0; padding: 0; }
.dg-popular__item { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--dg-line); }
.dg-popular__item:last-child { border-bottom: 0; }
.dg-popular__thumb { display: block; width: 80px; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; background: #e9e6dc; }
.dg-popular__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dg-popular__title { font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--dg-ink); text-decoration: none; }
.dg-popular__title:hover { color: var(--dg-green); }

/* ---------- 광고(자리·표시만, 클릭 유도 문구 없음) ---------- */
.dg-ad { text-align: center; margin: 0; min-height: 50px; }
.dg-ad--square { min-height: 272px; }
.dg-ad__label { font-size: 11px; color: var(--dg-muted); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 4px; }
.dg-footer-ad { margin: 8px auto 28px; text-align: center; }
.dg-infolinks:empty { display: none; }

/* ---------- 바닥 ---------- */
.dg-footer { background: #1c2420; color: #cfd8d3; padding: 24px 0 28px; font-size: 13px; }
.dg-footer a { color: #fff; }
.dg-footer__disclaimer { max-width: 720px; margin: 0 0 10px; }
.dg-footer__links, .dg-footer__langs { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 10px; }
.dg-footer__copy { margin: 0; color: #9aa7a0; }

/* ---------- 제보 폼 ---------- */
.dg-form { margin-top: 12px; }
.dg-form__row { display: block; margin: 0 0 14px; }
.dg-form__row > span { display: block; font-weight: 700; margin-bottom: 4px; }
.dg-form input[type="text"], .dg-form textarea, .dg-form select { width: 100%; font: inherit; padding: 9px 10px; border: 1px solid #c9c4b6; border-radius: 6px; background: #fff; }
.dg-form__note { font-size: 14px; color: var(--dg-muted); }
.dg-form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.dg-form__msg { padding: 10px 14px; border-radius: 6px; font-weight: 700; }
.dg-form__msg--ok { background: #e3f3e8; color: #14532d; }
.dg-form__msg--err { background: #fdeceb; color: #8a1c13; }
.dg-missing { color: var(--dg-orange); font-style: italic; }

/* ---------- 루트(언어 선택) ---------- */
.dg-root { max-width: 760px; margin: 24px auto 40px; text-align: center; }
.dg-root__title { margin: 10px 0 6px; }
.dg-root__title img { height: 66px; width: auto; }
.dg-root__lead { color: var(--dg-muted); margin: 0 0 22px; }
.dg-root__langs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dg-root__langs a { display: block; background: var(--dg-surface); border: 2px solid var(--dg-line); border-radius: 14px; padding: 18px 20px; text-decoration: none; color: var(--dg-ink); }
.dg-root__langs a:hover { border-color: var(--dg-green); }
.dg-root__name { display: block; font-size: 22px; font-weight: 800; }
.dg-root__desc { display: block; color: var(--dg-muted); margin: 4px 0 8px; }
.dg-root__cta { display: inline-block; font-weight: 800; color: var(--dg-green); }
.dg-root__langs [lang="ja"] { font-family: var(--dg-font-ja); }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 960px) {
  .dg-layout { grid-template-columns: minmax(0, 1fr); }
  .dg-sidebar { margin-top: 36px; }           /* 목록 넘김 버튼과 광고 사이 간격(실수 클릭 방지) */
  .dg-nav .dg-search { width: 200px; }
}
@media (max-width: 720px) {
  .dg-header__bar { flex-wrap: wrap; }
  .dg-brand img { height: 36px; }
  .dg-navbar .dg-wrap { flex-wrap: wrap; min-height: 44px; }
  .dg-menu-button { display: block; }
  .dg-nav { display: none; flex-direction: column; align-items: stretch; width: 100%; padding-bottom: 10px; }
  .dg-menu-toggle:checked ~ .dg-nav { display: flex; }
  .dg-menu { flex-direction: column; }
  .dg-menu a { padding: 11px 4px; border-top: 1px solid rgba(255, 255, 255, .15); }
  .dg-nav .dg-search { width: 100%; }
  .dg-card { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; }
  .dg-card__title { font-size: 18px; }
  .dg-article { padding: 16px 14px 18px; border-radius: 0; border-left: 0; border-right: 0; }
  .dg-layout { padding-top: 14px; gap: 0; }
  .dg-wrap.dg-layout { padding-left: 0; padding-right: 0; }
  .dg-main > .dg-cards, .dg-main > .dg-pager, .dg-main > .dg-archive-title, .dg-main > .dg-empty { margin-left: 12px; margin-right: 12px; }
  .dg-sidebar { padding: 0 12px; }
  .dg-title { font-size: 22px; }
  html[lang="ja"] .dg-title { font-size: 21px; }
  .dg-content { font-size: 16.5px; }
  .dg-comment-list { padding-left: 1.9em; }
  .dg-postnav .dg-button { flex: 1 1 auto; }
}