* { box-sizing: border-box; }
body {
font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
html:lang(ko) body {
font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
}
html:lang(zh-TW) body {
font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "微軟正黑體", sans-serif;
}
.intl-article-breadcrumbs .intl-breadcrumb-current {
color: #475569;
}
.intl-layout-container .main-card {
flex: 1;
min-width: 0;
max-width: none;
margin: 0;
background: var(--cocoon-main-bg);
border: 1px solid var(--cocoon-border);
border-radius: 6px;
padding: 36px 40px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
overflow: visible;
}
.intl-layout-container .hero {
background: transparent;
padding: 0;
text-align: left;
}
.intl-layout-container .hero-badge {
display: inline-block;
border: 1px solid #cbd5e1;
color: #64748b;
font-size: 11px;
font-weight: 700;
padding: 2px 7px;
border-radius: 3px;
margin-bottom: 12px;
background: #f8fafc;
letter-spacing: normal;
}
.intl-layout-container .hero h1 {
max-width: none;
}
.intl-layout-container .hero h1,
.intl-layout-container .content h2,
.intl-layout-container .content h3,
.intl-layout-container .sidebar-widget-title {
text-wrap: balance;
}
.intl-layout-container .sidebar-article-list li,
.intl-layout-container .content .cta-box .cta-btn,
.intl-article-breadcrumbs nav {
text-wrap: pretty;
}
.intl-layout-container .content {
padding: 0;
}
.intl-article-toc {
margin: 28px 0;
}
.comparison-table {
width: 100%;
min-width: 520px;
border-collapse: collapse;
font-size: 14.5px;
background: #ffffff;
}
.table-wrap {
max-width: 100%;
overflow-x: auto;
scrollbar-gutter: stable;
-webkit-overflow-scrolling: touch;
margin: 24px 0;
}
.comparison-table th,
.comparison-table td {
padding: 12px 16px;
border: 1px solid #e2e8f0;
text-align: left;
}
.comparison-table th {
background: #f1f5f9;
font-weight: 700;
color: #1e293b;
}
.decision-box,
.official-source-note {
margin: 24px 0;
padding: 18px 20px;
border: 1px solid #dbe2ea;
border-left: 4px solid var(--article-accent);
border-radius: 8px;
background: #f8fafc;
}
.decision-box strong {
color: var(--article-accent-dark);
}
.number-note,
.small {
font-size: 0.88rem;
color: var(--cocoon-muted);
}
.intl-layout-container > .main-card > .author-box {
display: block;
margin-top: 48px;
}
.intl-layout-container > .main-card > .author-box p + p {
margin-top: 6px;
}
.article-footer {
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--cocoon-border);
font-size: 0.88rem;
color: var(--cocoon-muted);
}
.article-footer a,
.intl-sidebar-policy a {
color: var(--cocoon-link);
text-decoration: none;
}
.article-footer a:hover,
.intl-sidebar-policy a:hover {
text-decoration: underline;
}
.intl-article-hub .intl-hub-intro {
margin: 0 0 28px;
padding: 18px 20px;
border: 1px solid #dbe2ea;
border-left: 4px solid var(--cocoon-nav-bg);
border-radius: 8px;
background: #f8fafc;
font-size: 15px;
}
.intl-article-hub .related-links-section {
margin: 34px 0 0;
}
.intl-article-hub .related-links-section h2 {
margin-top: 0;
}
.intl-article-hub .related-links-section ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.intl-article-hub .related-links-section ul {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.intl-article-hub .related-links-section li {
margin: 0;
}
.intl-article-hub .related-links-section a {
display: flex;
align-items: center;
min-height: 68px;
padding: 14px 16px;
border: 1px solid #dbe2ea;
border-radius: 8px;
background: #ffffff;
color: #0f4c81;
font-weight: 700;
line-height: 1.55;
text-decoration: none !important;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
text-wrap: pretty;
}
.intl-article-hub .related-links-section a:hover {
border-color: #94a3b8;
box-shadow: 0 5px 14px rgba(15, 23, 42, 0.08);
transform: translateY(-1px);
}
@media (max-width: 680px) {
.intl-article-hub .related-links-section ul {
grid-template-columns: 1fr;
}
.intl-article-hub .related-links-section a {
min-height: 60px;
}
}
@media (max-width: 860px) {
.intl-layout-container .main-card {
width: 100%;
padding: 24px 16px;
border-radius: 0;
border-left: none;
border-right: none;
}
}