/**
 * 도구 페이지 하단 설명 콘텐츠
 *
 * partials/tool-content.php 전용. 색·간격은 tools-common.css 가 :root 에
 * 선언한 토큰을 그대로 쓴다(별도 팔레트를 만들지 않는다).
 *
 * 가로 스크롤 방지 규칙 — 이 파일에서 지키는 것:
 *  1) Bootstrap .row/.col-* 을 쓰지 않는다. .row 의 음수 마진이 .container
 *     안에서 320px 가로 스크롤을 만든 이력이 있다.
 *  2) 폭을 가진 요소는 전부 box-sizing: border-box.
 *  3) 그리드는 minmax(0, 1fr) 로 잡는다. minmax 없이 1fr 만 쓰면 자식의
 *     최소 콘텐츠 폭이 트랙을 밀어내 좁은 화면에서 넘친다.
 *  4) 긴 URL/영문이 들어갈 수 있는 곳은 overflow-wrap: anywhere.
 */

.tw-tool-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl) var(--spacing-xl);
    box-sizing: border-box;
    color: var(--text-primary);
    font-family: var(--font-primary);
    line-height: 1.75;
}

.tw-tool-content * {
    box-sizing: border-box;
}

/* 도구 UI 와 설명 사이 구분선 */
.tw-tool-content::before {
    content: "";
    display: block;
    border-top: 1px solid var(--border-color);
    margin-bottom: var(--spacing-xl);
}

.tw-tool-content .tw-intro {
    margin: 0 0 var(--spacing-xl);
    font-size: 1.0625rem;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.tw-tool-content .tw-section {
    margin: 0 0 var(--spacing-xl);
}

.tw-tool-content .tw-section:last-child {
    margin-bottom: 0;
}

.tw-tool-content h2 {
    margin: 0 0 var(--spacing-md);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

/* ── 사용 방법 (번호 목록) ─────────────────────────────── */

.tw-tool-content .tw-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: tw-step;
}

.tw-tool-content .tw-steps > li {
    position: relative;
    counter-increment: tw-step;
    padding: 0 0 0 2.25rem;
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.tw-tool-content .tw-steps > li:last-child {
    margin-bottom: 0;
}

.tw-tool-content .tw-steps > li::before {
    content: counter(tw-step);
    position: absolute;
    left: 0;
    top: 0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.5rem;
    text-align: center;
}

/* ── 지원 형식 / 입력 조건 (정의 목록) ──────────────────── */

.tw-tool-content .tw-specs {
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    background: var(--bg-card);
}

.tw-tool-content .tw-spec-row {
    display: grid;
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
    gap: 0 var(--spacing-md);
    padding: 0.75rem var(--spacing-md);
    border-bottom: 1px solid var(--border-color-light);
}

.tw-tool-content .tw-spec-row:last-child {
    border-bottom: 0;
}

.tw-tool-content .tw-specs dt {
    margin: 0;
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.tw-tool-content .tw-specs dd {
    margin: 0;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

/* ── 일반 목록 (도구별 추가 설명) ───────────────────────── */

.tw-tool-content .tw-list {
    margin: 0;
    padding: 0 0 0 1.125rem;
    color: var(--text-secondary);
}

.tw-tool-content .tw-list > li {
    margin-bottom: 0.5rem;
    overflow-wrap: anywhere;
}

.tw-tool-content .tw-list > li:last-child {
    margin-bottom: 0;
}

/* ── FAQ (details/summary) ──────────────────────────────── */

.tw-tool-content .tw-faq {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    background: var(--bg-card);
}

.tw-tool-content .tw-faq-item {
    border-bottom: 1px solid var(--border-color-light);
}

.tw-tool-content .tw-faq-item:last-child {
    border-bottom: 0;
}

.tw-tool-content .tw-faq-item > summary {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm, 8px);
    padding: 0.875rem var(--spacing-md);
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    list-style: none;
    overflow-wrap: anywhere;
}

/* 기본 삼각형 마커 제거 (사파리 포함) */
.tw-tool-content .tw-faq-item > summary::-webkit-details-marker {
    display: none;
}

.tw-tool-content .tw-faq-item > summary::before {
    content: "+";
    flex: 0 0 auto;
    width: 1.25rem;
    color: var(--accent-primary);
    font-weight: 700;
    text-align: center;
}

.tw-tool-content .tw-faq-item[open] > summary::before {
    content: "\2212"; /* − */
}

.tw-tool-content .tw-faq-item > summary:hover {
    background: var(--bg-card-hover);
}

.tw-tool-content .tw-faq-item > summary:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.tw-tool-content .tw-faq-item > p {
    margin: 0;
    padding: 0 var(--spacing-md) var(--spacing-md) calc(var(--spacing-md) + 1.75rem);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

/* ── 연관 도구 ──────────────────────────────────────────── */

.tw-tool-content .tw-related {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: var(--spacing-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tw-tool-content .tw-related > li {
    min-width: 0;
}

.tw-tool-content .tw-related a {
    display: block;
    height: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    background: var(--bg-card);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tw-tool-content .tw-related a:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-sm);
}

.tw-tool-content .tw-related a:focus-visible {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-focus);
}

.tw-tool-content .tw-related-name {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.tw-tool-content .tw-related-desc {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

/* ── 광고 슬롯 ──────────────────────────────────────────── */

/*
 * 애드센스 심사 중이라 아직 비어 있다. 비어 있는 동안에는 접어서 레이아웃에
 * 영향을 주지 않는다. HTML 주석은 :empty 판정을 깨지 않으므로 자리 표시
 * 주석을 넣어도 이 규칙이 그대로 적용된다.
 */
.tw-ad-slot {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    box-sizing: border-box;
}

.tw-ad-slot:empty {
    display: none;
}

/* ── 반응형 — .tool-page 의 좌우 패딩 단계와 맞춘다 ──────── */

@media (max-width: 576px) {
    .tw-tool-content {
        padding: 0 var(--spacing-md) var(--spacing-md);
    }

    .tw-ad-slot {
        padding: 0 var(--spacing-md);
    }

    .tw-tool-content::before {
        margin-bottom: var(--spacing-lg);
    }

    .tw-tool-content h2 {
        font-size: 1.125rem;
    }

    /* 좁은 화면에서는 라벨/값을 위아래로 쌓는다 */
    .tw-tool-content .tw-spec-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.125rem;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .tw-tool-content {
        padding: 0 var(--spacing-lg) var(--spacing-lg);
    }

    .tw-ad-slot {
        padding: 0 var(--spacing-lg);
    }
}

/* ────────────────────────────────────────────────────────────────────────
 * 빵부스러기 (partials/tool-breadcrumb.php)
 *
 * 도구 UI 위에 붙는다. 폭·좌우 여백은 아래 .tw-tool-content 와 같은 리듬을
 * 쓴다(같은 페이지에서 두 블록의 좌측선이 어긋나 보이지 않게).
 *
 * 좁은 화면 처리: 자르지 않고 줄바꿈시킨다. ol 에 flex-wrap 을 주고,
 * 항목 자체도 줄 안에서 끊길 수 있게 overflow-wrap 을 건다. 도구 이름이
 * 길어도 320px 에서 가로 스크롤이 생기지 않는다.
 * ──────────────────────────────────────────────────────────────────────── */

.tw-crumbs {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-md) var(--spacing-xl) 0;
    box-sizing: border-box;
    font-family: var(--font-primary);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.tw-crumbs * {
    box-sizing: border-box;
}

.tw-crumbs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.tw-crumbs .tw-crumb {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* 구분자는 마크업이 아니라 CSS 로 넣는다(스크린리더가 읽지 않게) */
.tw-crumbs .tw-crumb + .tw-crumb::before {
    content: "/";
    margin-right: var(--spacing-xs);
    color: var(--border-color-medium);
    flex: none;
}

.tw-crumbs .tw-crumb a {
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.tw-crumbs .tw-crumb a:hover,
.tw-crumbs .tw-crumb a:focus-visible {
    color: var(--text-primary);
    text-decoration: underline;
}

/* 현재 페이지 — 링크가 아니고 조금 더 진하다 */
.tw-crumbs .tw-crumb-current span {
    color: var(--text-secondary);
    font-weight: 600;
}

@media (max-width: 576px) {
    .tw-crumbs {
        padding: var(--spacing-sm) var(--spacing-md) 0;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .tw-crumbs {
        padding: var(--spacing-md) var(--spacing-lg) 0;
    }
}