/*
 * 기사 본문 링크 버튼 (2026-10-19)
 * 편집기 링크 창에서 '버튼으로 보이기'를 켠 링크(a.tn-link-btn). 빈 줄에 주소를 붙여 넣으면 자동으로 켜지고,
 * 옛 기사의 한 줄짜리 유튜브·우리 팟캐스트·기사 링크는 화면에 낼 때 붙는다(App\Helpers\ArticleLinkButtons).
 *
 * 색은 사이트 색을 따른다(사용자: "색이 너무 강하다 … 너무 튑니다"). 가는 곳은 아이콘 모양으로만 구분하고,
 * 바탕·테두리는 본문과 같은 차분한 색, 아이콘과 마우스를 올렸을 때만 사이트 주 색(--tn-red, 이름만 red).
 * 편집기(.ck-content)와 공개 기사 화면이 이 파일 하나를 읽는다. 아이콘은 두 화면 모두에 있는 Font Awesome 6.5.
 */
a.tn-link-btn {
    --tn-lb-accent: var(--tn-red, #475569);
    --tn-lb-icon: "\f0ac";
    --tn-lb-font: "Font Awesome 6 Free";
    --tn-lb-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    max-width: 100%;
    margin: .2em 0;
    padding: .5em .95em;
    border: 1px solid var(--tn-line, #e5e7eb);
    border-radius: 999px;
    background: var(--tn-surface, #fff);
    color: inherit !important;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none !important;
    overflow-wrap: anywhere;
    vertical-align: middle;
    /* 바탕이 본문과 거의 같은 색이라 그림자로 띄운다(사용자: "그림자라도 조금 주지 너무 티가 안나는") — 색은 그대로 차분하게 */
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 3px 10px rgba(15, 23, 42, .08);
    transition: border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* 본문에서 글자색·밑줄을 따로 준 경우에도 버튼 안은 한 가지 색으로 */
a.tn-link-btn * {
    color: inherit !important;
    text-decoration: none !important;
}

a.tn-link-btn:hover,
a.tn-link-btn:focus-visible {
    border-color: var(--tn-lb-accent);
    color: var(--tn-lb-accent) !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, .1), 0 8px 20px rgba(15, 23, 42, .12);
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    a.tn-link-btn,
    a.tn-link-btn:hover,
    a.tn-link-btn:focus-visible { transform: none; }
}

/* 가는 곳 아이콘 — 모양만 다르고 색은 사이트 색 하나 */
a.tn-link-btn::before {
    content: var(--tn-lb-icon);
    flex: none;
    color: var(--tn-lb-accent);
    font-family: var(--tn-lb-font);
    font-weight: var(--tn-lb-weight);
    font-size: 1em;
    font-style: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

/* 새 창으로 열리는 버튼 표시 */
a.tn-link-btn[target="_blank"]::after {
    content: "\f08e";
    flex: none;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .7em;
    opacity: .45;
}

/* ── 가는 곳별 아이콘 (뒤에 오는 규칙이 이긴다: 일반 → 구체) ─────────────── */

/* 정부·공공기관 */
a.tn-link-btn[href*=".go.kr"] { --tn-lb-icon: "\f19c"; }

/* 기사 */
a.tn-link-btn[href*="/article/"],
a.tn-link-btn[href*="/a/"],
a.tn-link-btn[href*="articleView"],
a.tn-link-btn[href*="news.naver.com"],
a.tn-link-btn[href*="v.daum.net"] { --tn-lb-icon: "\f1ea"; }

/* PDF·문서 */
a.tn-link-btn[href$=".pdf" i],
a.tn-link-btn[href*=".pdf?" i] { --tn-lb-icon: "\f1c1"; }
a.tn-link-btn[href*="docs.google.com"],
a.tn-link-btn[href*="drive.google.com"] { --tn-lb-icon: "\f3aa"; --tn-lb-font: "Font Awesome 6 Brands"; --tn-lb-weight: 400; }

/* 지도 */
a.tn-link-btn[href*="map.naver.com"],
a.tn-link-btn[href*="map.kakao.com"],
a.tn-link-btn[href*="google.com/maps"],
a.tn-link-btn[href*="maps.google."],
a.tn-link-btn[href*="maps.app.goo.gl"] { --tn-lb-icon: "\f5a0"; }

/* 네이버 블로그·카페·TV, 카카오 */
a.tn-link-btn[href*="blog.naver.com"] { --tn-lb-icon: "\f781"; }
a.tn-link-btn[href*="cafe.naver.com"] { --tn-lb-icon: "\f0f4"; }
a.tn-link-btn[href*="tv.naver.com"],
a.tn-link-btn[href*="chzzk.naver.com"] { --tn-lb-icon: "\f04b"; }
a.tn-link-btn[href*="pf.kakao.com"],
a.tn-link-btn[href*="open.kakao.com"] { --tn-lb-icon: "\f075"; }

/* SNS·영상·음성 */
a.tn-link-btn[href*="instagram.com"] { --tn-lb-icon: "\f16d"; --tn-lb-font: "Font Awesome 6 Brands"; --tn-lb-weight: 400; }
a.tn-link-btn[href*="facebook.com"],
a.tn-link-btn[href*="fb.watch"] { --tn-lb-icon: "\f39e"; --tn-lb-font: "Font Awesome 6 Brands"; --tn-lb-weight: 400; }
a.tn-link-btn[href*="://x.com/"],
a.tn-link-btn[href*="://www.x.com/"],
a.tn-link-btn[href*="twitter.com/"] { --tn-lb-icon: "\e61b"; --tn-lb-font: "Font Awesome 6 Brands"; --tn-lb-weight: 400; }
a.tn-link-btn[href*="threads.net"],
a.tn-link-btn[href*="threads.com"] { --tn-lb-icon: "\e618"; --tn-lb-font: "Font Awesome 6 Brands"; --tn-lb-weight: 400; }
a.tn-link-btn[href*="tiktok.com"] { --tn-lb-icon: "\e07b"; --tn-lb-font: "Font Awesome 6 Brands"; --tn-lb-weight: 400; }
a.tn-link-btn[href*="t.me/"] { --tn-lb-icon: "\f2c6"; --tn-lb-font: "Font Awesome 6 Brands"; --tn-lb-weight: 400; }
a.tn-link-btn[href*="linkedin.com"] { --tn-lb-icon: "\f0e1"; --tn-lb-font: "Font Awesome 6 Brands"; --tn-lb-weight: 400; }
a.tn-link-btn[href*="github.com"] { --tn-lb-icon: "\f09b"; --tn-lb-font: "Font Awesome 6 Brands"; --tn-lb-weight: 400; }
a.tn-link-btn[href*="spotify.com"] { --tn-lb-icon: "\f1bc"; --tn-lb-font: "Font Awesome 6 Brands"; --tn-lb-weight: 400; }
a.tn-link-btn[href*="podcasts.apple.com"] { --tn-lb-icon: "\f2ce"; }
a.tn-link-btn[href*="youtube.com/"],
a.tn-link-btn[href*="youtu.be/"] { --tn-lb-icon: "\f167"; --tn-lb-font: "Font Awesome 6 Brands"; --tn-lb-weight: 400; }

/* 우리 사이트 AI 팟캐스트(토론) */
a.tn-link-btn[href*="/debate/"],
a.tn-link-btn[href$="/debates"],
a.tn-link-btn[href*="/debates?"],
a.tn-link-btn[href*="/category/debate"] { --tn-lb-icon: "\f2ce"; }

/* 그 밖의 홈페이지: 그 사이트의 파비콘(App\Helpers\LinkIcons 가 받아 둔 우리 서버 사본).
   화면에 낼 때 style="--tn-lb-img: url(…)" 로 붙고, 없으면 위의 기본 아이콘 그대로. */
a.tn-link-btn[style*="--tn-lb-img"]::before {
    content: "";
    width: 1.15em;
    height: 1.15em;
    border-radius: 3px;
    background: var(--tn-lb-img) center / contain no-repeat;
}

/* 편집기 안: 버튼을 눌러도 이동하지 않고 링크 창이 뜬다 — 손가락 모양 대신 글자 커서 */
.ck-content a.tn-link-btn { cursor: text; }

@media print {
    a.tn-link-btn { border-color: #999; background: none; box-shadow: none; }
    a.tn-link-btn::after { content: " (" attr(href) ")"; font-family: inherit; font-weight: 400; font-size: .85em; opacity: 1; }
}