/* DOYEON LAB — '도연의 노트' / '국내 데이터' boxes (front end + block editor) */
.dy-box{
  margin: 30px 0; padding: 18px 22px 16px;
  background: rgba(15, 110, 86, .10);
  border-left: 5px solid #0F6E56; border-radius: 0 4px 4px 0;
}
.dy-box > .dy-box-title{ margin: 0 0 8px !important; font-weight: 800; font-size: 15px; color: #0B5843; letter-spacing: .01em; }
.dy-box > p:last-child, .dy-box .block-editor-inner-blocks p:last-child{ margin-bottom: 0; }
.dy-box p{ font-size: 15.5px; }
.dy-box-source{ margin: 10px 0 0 !important; font-size: 12.5px !important; color: #6C8188; }
.dy-kdata.is-missing-source{ outline: 2px dashed #C1622D; outline-offset: 2px; }

/* ===========================================================
   doyeon-* classes — article HTML carries class names only, the look lives here.
   :is(.post-body, .editor-styles-wrapper) keeps these above the theme's .post-body rules and
   the core table block CSS (.wp-block-table td{border:1px solid}) on the site and in the editor.
   Colors are literal (style.css variables aren't loaded in the editor).
   Block-level boxes set margin-block only — a horizontal 0 would override the editor's
   margin-inline:auto centering (same specificity, loaded later) and pin them to the canvas edge.
=========================================================== */
:is(.post-body, .editor-styles-wrapper){ --dy-teal:#0F6E56; --dy-blue:#185FA5; }

/* .doyeon-table — on a table block (figure.wp-block-table) or a div around a <table>.
   PC: same as the plain tables of older posts (style.css .post-body table). */
:is(.post-body, .editor-styles-wrapper) .doyeon-table{ margin-block: 8px 28px; }
:is(.post-body, .editor-styles-wrapper) .doyeon-table table{ width:100%; margin:0; border-collapse:collapse; font-size:14.5px; }
:is(.post-body, .editor-styles-wrapper) .doyeon-table thead{ border-bottom:0; }
:is(.post-body, .editor-styles-wrapper) .doyeon-table th,
:is(.post-body, .editor-styles-wrapper) .doyeon-table td{ border:0; border-bottom:1px solid #DEE6E2; padding:12px 14px; text-align:left; vertical-align:top; }
:is(.post-body, .editor-styles-wrapper) .doyeon-table th{ background:#EEF2F0; font-weight:700; color:#15242A; white-space:nowrap; }
:is(.post-body, .editor-styles-wrapper) .doyeon-table tr:last-child td{ border-bottom:0; }
:is(.post-body, .editor-styles-wrapper) .doyeon-table figcaption{ margin:8px 0 0; font-size:13px; line-height:1.6; color:#666666; text-align:left; }
:is(.post-body, .editor-styles-wrapper) .doyeon-table .is-low{ color:#B4462E; }

/* Phones: the box scrolls sideways (never the page), the table keeps a minimum width so cells don't
   squeeze, and width:100% fills to the end — no empty strip when scrolled all the way.
   The hint and the caption stay put at the left while the table moves (position:sticky). */
@media (max-width: 700px){
  :is(.post-body, .editor-styles-wrapper) .doyeon-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  :is(.post-body, .editor-styles-wrapper) .doyeon-table::before{ content:"← 표를 옆으로 밀어서 보세요"; display:block; position:sticky; left:0; margin:0 0 6px; font-size:13px; line-height:1.5; color:#888888; }
  :is(.post-body, .editor-styles-wrapper) .doyeon-table table{ display:table; width:100%; min-width:560px; overflow:visible; }
  :is(.post-body, .editor-styles-wrapper) .doyeon-table-narrow table{ min-width:460px; }
  :is(.post-body, .editor-styles-wrapper) .doyeon-table-wide table{ min-width:680px; }
  :is(.post-body, .editor-styles-wrapper) .doyeon-table td{ white-space:normal; word-break:keep-all; overflow-wrap:anywhere; }
  :is(.post-body, .editor-styles-wrapper) .doyeon-table figcaption{ position:sticky; left:0; }
}

/* 핵심 3줄 */
:is(.post-body, .editor-styles-wrapper) .doyeon-summary{ margin-block:24px; padding:20px 24px; background:#ffffff; border:1px solid var(--dy-teal); border-radius:12px; }
:is(.post-body, .editor-styles-wrapper) .doyeon-summary ul{ margin:0; padding-left:20px; line-height:1.8; }

/* 국내 데이터 */
:is(.post-body, .editor-styles-wrapper) .doyeon-kr-data{ margin-block:28px; padding:20px 24px; background:rgba(24, 95, 165, .08); border-left:5px solid var(--dy-blue); border-radius:8px; }
:is(.post-body, .editor-styles-wrapper) .doyeon-kr-data > p:not([class]){ margin:14px 0 0; }
:is(.post-body, .editor-styles-wrapper) .doyeon-kr-data .doyeon-table{ margin-block:0; }
:is(.post-body, .editor-styles-wrapper) .doyeon-kr-data .doyeon-table table{ font-size:15px; background:#ffffff; }
:is(.post-body, .editor-styles-wrapper) .doyeon-kr-data .doyeon-table th{ padding:10px; border-bottom:2px solid var(--dy-blue); white-space:normal; }
:is(.post-body, .editor-styles-wrapper) .doyeon-kr-data .doyeon-table td{ padding:10px; border-bottom-color:#e5e5e5; white-space:normal; }
:is(.post-body, .editor-styles-wrapper) .doyeon-kr-data .doyeon-table :is(th, td):not(:first-child){ text-align:right; }
:is(.post-body, .editor-styles-wrapper) .doyeon-kr-data .doyeon-table td:first-child{ word-break:keep-all; }
@media (max-width: 700px){
  :is(.post-body, .editor-styles-wrapper) .doyeon-kr-data .doyeon-table table{ min-width:520px; }
}

/* 도연의 노트 */
:is(.post-body, .editor-styles-wrapper) .doyeon-note{ margin-block:28px; padding:20px 24px; background:rgba(15, 110, 86, .10); border-left:5px solid var(--dy-teal); border-radius:8px; }
:is(.post-body, .editor-styles-wrapper) .doyeon-note > p:not([class]){ margin:0 0 12px; }
:is(.post-body, .editor-styles-wrapper) .doyeon-note > p:not([class]):last-child{ margin-bottom:0; }

/* Text inside the boxes */
:is(.post-body, .editor-styles-wrapper) .doyeon-box-label{ margin:0 0 4px; font-weight:700; color:var(--dy-blue); }
:is(.post-body, .editor-styles-wrapper) .doyeon-box-title{ margin:0 0 10px; font-weight:700; color:var(--dy-teal); }
:is(.post-body, .editor-styles-wrapper) .doyeon-kr-data .doyeon-box-title{ margin:0 0 14px; color:inherit; }
:is(.post-body, .editor-styles-wrapper) .doyeon-note .doyeon-box-title{ margin:0 0 12px; }
:is(.post-body, .editor-styles-wrapper) .doyeon-box-sub{ margin:-8px 0 14px; font-size:14px; color:#555555; }
:is(.post-body, .editor-styles-wrapper) .doyeon-box-source{ margin:10px 0 0; font-size:13px; color:#666666; }