/* with.lt 홈 / 받은편지함 / 메일 보기 - "LT의 이메일 공방"
   종이 질감 + 잉크 윤곽선 + 우편 소품(라벨, 소인, 도장).
   body.lt-ui 인 페이지에서만 적용된다. style.css 뒤에 로드. */

/* ============ tokens ============ */
.lt-ui {
    --paper: #f3eee2;
    --paper-2: #e9e2d0;
    --card: #fbf8f0;
    --ink: #17130e;
    --ink-2: #4b443a;
    --muted: #6d6455;
    --rule: #17130e;
    --rule-soft: rgba(23, 19, 14, .16);
    --accent: #6a2c91;
    --accent-2: #4d1f6d;
    --on-accent: #fbf8f0;
    --mark: #dcc7f1;
    --ok: #1d7a4d;
    --hard: 4px 4px 0 var(--ink);
    --hard-sm: 3px 3px 0 var(--ink);
    --hard-hover: 4px 4px 0 var(--ink);
    --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .09 0 0 0 0 .07 0 0 0 0 .05 0 0 0 .1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --serif: 'Noto Serif KR', 'Nanum Myeongjo', 'Batang', serif;
    --sans: 'IBM Plex Sans KR', 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --nav-bar-h: 64px;                 /* 떠 있는 헤더 바의 높이 */
    --nav-h-full: 68px;
    --nav-h: 92px;                     /* 바 + 위아래 여백. 스크롤하며 붙는 요소들의 top 계산에 쓴다 */
    color-scheme: light;
}

[data-theme="dark"] .lt-ui {
    --paper: #14100d;
    --paper-2: #1c1713;
    --card: #211b16;
    --ink: #f1e9da;
    --ink-2: #cfc5b2;
    --muted: #a39881;
    --rule: rgba(241, 233, 218, .72);
    --rule-soft: rgba(241, 233, 218, .16);
    --accent: #c19ae8;
    --accent-2: #d8bbf3;
    --on-accent: #14100d;
    --mark: rgba(193, 154, 232, .32);
    --ok: #55c58c;
    --hard: 4px 4px 0 var(--accent);
    --hard-sm: 3px 3px 0 var(--accent);
    --hard-hover: 4px 4px 0 var(--accent);
    --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .95 0 0 0 0 .9 0 0 0 0 .8 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    color-scheme: dark;
}

/* ============ base ============ */
.lt-ui {
    background-color: var(--paper);
    background-image: var(--grain);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    word-break: keep-all;
    overflow-x: clip;
}

.lt-ui a { color: inherit; }
.lt-ui :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.lt-ui ::selection { background: var(--accent); color: var(--on-accent); }
.lt-ui .container { max-width: 1200px; }
.lt-ui h1, .lt-ui h2, .lt-ui h3 { font-family: var(--serif); font-weight: 900; letter-spacing: -.035em; color: var(--ink); }
.lt-ui mark { background: linear-gradient(transparent 58%, var(--mark) 58%); color: inherit; padding: 0 .08em; }

.lt-skip {
    position: absolute; left: 16px; top: -160px; z-index: 2000; padding: 10px 16px;
    background: var(--ink); color: var(--paper) !important; border-radius: 4px; text-decoration: none; font-weight: 600;
}
.lt-skip:focus { top: 12px; }

.lt-kicker {
    display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 18px;
    font: 500 12.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.lt-kicker span + span::before { content: "/"; margin-right: 14px; color: var(--rule-soft); }

/* ============ buttons ============ */
.lt-ui .btn {
    font-family: var(--sans); font-weight: 600; border: 2px solid var(--rule); border-radius: 4px; padding: 8px 16px;
    box-shadow: var(--hard-sm); transition: transform .12s, box-shadow .12s, background-color .15s;
}
/* 테마 style.css 의 `.btn:focus, .btn:active { box-shadow: none !important }` 때문에, 클릭하면(포커스가 남는 동안) 그림자가 사라졌다.
   같은 !important 로 되돌린다. 순서: 포커스 -> 호버 -> 눌림 */
.lt-ui .btn:focus, .lt-ui .btn:focus-visible { box-shadow: var(--hard-sm) !important; }
.lt-ui .btn:hover:not(:disabled):not(.disabled) { transform: translate(-1px, -1px); box-shadow: var(--hard-hover) !important; }
.lt-ui .btn:active { transform: translate(3px, 3px); box-shadow: none !important; }
.lt-ui .btn-secondary, .lt-ui .btn-primary { background: var(--accent); border-color: var(--rule); color: var(--on-accent); }
.lt-ui .btn-secondary:hover:not(:disabled):not(.disabled), .lt-ui .btn-primary:hover:not(:disabled):not(.disabled) { background: var(--accent-2); border-color: var(--rule); color: var(--on-accent); }
.lt-ui .btn-outline-light, .lt-ui .btn-danger { background: var(--card); border-color: var(--rule); color: var(--ink); }
.lt-ui .btn-outline-light:hover:not(:disabled):not(.disabled), .lt-ui .btn-danger:hover:not(:disabled):not(.disabled) { background: var(--paper-2); border-color: var(--rule); color: var(--ink); }

/* ============ topbar ============ */
.lt-ui nav.nav, .lt-ui nav.nav.nav-sticky {
    /* 화면 끝까지 닿는 띠가 아니라, 위·양옆에 여백을 둔 카드처럼 떠 있는 헤더. 폭은 본문 컨테이너 안쪽 폭과 같다 */
    position: sticky; top: 12px; left: auto; width: min(1176px, calc(100% - 24px)); height: var(--nav-bar-h); margin: 12px auto 0;
    /* backdrop-filter 를 쓰면 안쪽 position:fixed 모바일 메뉴가 화면이 아니라 이 바 기준이 되어 깨진다 */
    background: var(--card);
    border: 2px solid var(--rule); border-radius: 6px; box-shadow: var(--hard); z-index: 1030;
}
.lt-ui nav.nav > .container { max-width: none; padding-inline: 20px; }
/* /page/{slug} 는 떠 있는 카드 대신 화면 폭 전체를 쓰는 띠 헤더 */
.lt-ui.lt-nav-full nav.nav, .lt-ui.lt-nav-full nav.nav.nav-sticky {
    top: 0; width: auto; height: var(--nav-h-full); margin: 0; background: var(--paper);
    border: 0; border-bottom: 2px solid var(--rule); border-radius: 0; box-shadow: none;
}
.lt-ui.lt-nav-full nav.nav > .container { max-width: 1200px; padding-inline: 12px; }
/* 바 안쪽 컨테이너 높이를 바(테두리 제외 66px)에 맞춰야 컨트롤이 바의 세로 가운데에 놓인다 */
.lt-ui .nav > .container, .lt-ui .nav .nav-inner { height: 100%; min-height: 0; }
.lt-ui .nav .nav-inner { width: 100%; }
.lt-ui .logo img { height: 30px; width: auto; }
.lt-ui nav.nav .logo img { height: 38px; }
@media (max-width: 575.98px) { .lt-ui nav.nav .logo img { height: 32px; } }
.lt-ui .nav .white-logo { display: none !important; }
.lt-ui .nav .dark-logo { display: block !important; }
[data-theme="dark"] .lt-ui .nav .white-logo { display: block !important; }
[data-theme="dark"] .lt-ui .nav .dark-logo { display: none !important; }

.lt-ui .nav .nav-inner .nav-menu .nav-links .nav-link,
.lt-ui .nav.nav-sticky .nav-inner .nav-menu .nav-links a { color: var(--ink); font-size: 15px; font-weight: 500; opacity: 1; }
.lt-ui .nav .nav-inner .nav-menu .nav-links .nav-link:hover, .lt-ui .nav .nav-inner .nav-menu .nav-drop .nav-drop-btn:hover { color: var(--accent); }
.lt-ui .nav .nav-inner .nav-menu-button, .lt-ui .nav.nav-sticky .nav-inner .nav-menu-button,
.lt-ui .nav .language .language-button, .lt-ui .nav.nav-sticky .language .language-button { color: var(--ink); }
/* 언어 선택기: 지구본 + 현재 언어 코드 + 화살표 버튼, 아래로 펼쳐지는 카드형 메뉴 */
.lt-ui .language .language-button { gap: 7px; height: 38px; padding: 0 10px; border: 2px solid transparent; border-radius: 6px; font-size: 14px; font-weight: 700; letter-spacing: .04em; transition: border-color .15s, color .15s; }
.lt-ui .language .language-button i { font-size: 15px; color: var(--accent); }
.lt-ui .language .language-button .language-caret { font-size: 10px; color: var(--ink); transition: transform .2s; }
.lt-ui .language.active .language-button .language-caret { transform: rotate(180deg); }
.lt-ui .language .language-button:hover, .lt-ui .language.active .language-button { border-color: var(--rule); color: var(--ink); }
.lt-ui .language .language-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lt-ui .language .language-menu {
    top: calc(100% + 10px); right: 0; width: 176px; max-height: none; overflow: hidden; padding: 6px;
    background: var(--card); border: 2px solid var(--rule); border-radius: 6px; box-shadow: var(--hard);
    transform: translateY(-4px); transition: opacity .15s, transform .15s;
}
.lt-ui .language.animated .language-menu { transform: none; }
.lt-ui .language .language-menu::before { display: none; }
.lt-ui .language .language-menu a { align-items: center; gap: 10px; padding: 9px 36px 9px 10px; border-radius: 4px; color: var(--ink); font-size: 14px; font-weight: 600; }
.lt-ui .language .language-img { margin: 0; display: flex; }
.lt-ui .language .language-img img { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px var(--rule-soft, rgba(0,0,0,.2)); }
.lt-ui .language .language-menu a:hover { background: var(--paper-2); color: var(--ink); }
.lt-ui .language .language-menu a.active { background: var(--paper-2); }
.lt-ui .language .language-menu a.active::after { right: 10px; width: 18px; height: 18px; background: var(--accent); color: var(--on-accent, #fff); }
.lt-ui .nav .nav-inner .nav-menu .nav-actions .btn-outline-light { color: var(--ink); }
.lt-ui .nav .nav-inner .nav-menu .nav-drop .nav-drop-btn { color: var(--ink); }

@media (max-width: 1199.98px) {
    .lt-ui .nav .nav-inner .nav-menu .nav-menu-scroller { background: var(--paper); color: var(--ink); border-left: 2px solid var(--rule); }
    .lt-ui .nav .nav-inner .nav-menu .nav-links .nav-link { color: var(--ink); }
}

.lt-theme-toggle { display: none; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
.lt-ui .lt-theme-toggle { display: inline-flex; align-items: center; }
.lt-switch {
    position: relative; display: block; width: 60px; height: 34px; border: 2px solid var(--rule); border-radius: 4px;
    background: var(--card); box-shadow: var(--hard-sm); transition: background-color .2s;
}
.lt-switch b {
    position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; display: grid; place-items: center;
    background: var(--ink); color: var(--paper); border-radius: 2px; font-size: 12px; transition: transform .22s cubic-bezier(.3, 1.4, .5, 1);
}
.lt-switch i { grid-area: 1 / 1; line-height: 1; }
.lt-switch .fa-moon { display: none; }
.lt-switch::after { content: "\f186"; position: absolute; top: 50%; right: 9px; transform: translateY(-50%); font: 900 12px/1 "Font Awesome 6 Free"; color: var(--muted); }
[data-theme="dark"] .lt-switch::after { content: "\f185"; right: auto; left: 9px; }
[data-theme="dark"] .lt-switch b { transform: translateX(26px); background: var(--accent); color: var(--on-accent); }
[data-theme="dark"] .lt-switch .fa-sun { display: none; }
[data-theme="dark"] .lt-switch .fa-moon { display: block; }
.lt-theme-toggle:hover .lt-switch { background: var(--paper-2); }
.lt-theme-toggle:active .lt-switch { transform: translate(2px, 2px); box-shadow: none; }
.lt-ui .nav-actions-sm .lt-theme-toggle { margin-right: 14px; }
.lt-ui .nav .nav-actions .lt-theme-toggle { margin: 0 6px 0 4px; }
@media (max-width: 1199.98px) { .lt-ui .nav .nav-actions .lt-theme-toggle { display: none; } }

/* ---- 헤더 보강 ---- */
.lt-ui .nav .nav-inner .nav-menu .nav-links { display: flex; align-items: center; gap: 30px; }
.lt-ui .nav .nav-inner .nav-menu .nav-links .nav-link { margin: 0 !important; display: inline-flex; align-items: center; gap: 8px; }
.lt-ui .nav .nav-inner .nav-menu .nav-links .nav-link i { color: var(--accent); }
/* 로그인은 글자 링크로 두어 등록 버튼에 시선이 가게 한다 */
.lt-ui .nav .nav-inner .nav-menu .nav-actions .btn-outline-light {
    background-color: transparent; border-color: transparent; box-shadow: none; padding-left: 8px; padding-right: 8px;
}
.lt-ui .nav .nav-inner .nav-menu .nav-actions .btn-outline-light:hover { background-color: transparent; color: var(--accent); transform: none; }
@media (min-width: 1200px) {
    .lt-ui .nav .nav-inner .nav-menu .nav-actions .btn-outline-light,
    .lt-ui .nav .nav-inner .nav-menu .nav-actions .btn-outline-light:focus,
    .lt-ui .nav .nav-inner .nav-menu .nav-actions .btn-outline-light:hover,
    .lt-ui .nav .nav-inner .nav-menu .nav-actions .btn-outline-light:active { box-shadow: none !important; transform: none; }
}
.lt-ui .nav .nav-inner .nav-menu-button {
    width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid var(--rule); border-radius: 4px;
    background: var(--card); box-shadow: var(--hard-sm);
}
.lt-ui .nav .nav-inner .nav-menu-button:active { transform: translate(2px, 2px); box-shadow: none; }

/* 사용 사례 메뉴는 헤더 가운데에 둔다. 오른쪽의 로그인/회원가입과 한 줄로 이어져 메뉴처럼 보이지 않게 하려는 것 */
@media (min-width: 1200px) {
    .lt-ui .nav .nav-inner .nav-menu .nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
/* 헤더 메뉴 밑줄: 호버하면 왼쪽에서 오른쪽으로 그려지고, 벗어나면 오른쪽으로 걷힌다. 지금 보는 페이지(active)는 계속 그려져 있다 */
@media (min-width: 1200px) {
    .lt-ui .nav .nav-inner .nav-menu .nav-links .nav-link,
    .lt-ui .nav .nav-inner .nav-menu .nav-drop .nav-drop-btn,
    .lt-ui .nav .nav-inner .nav-menu .nav-actions .btn-outline-light { position: relative; padding-top: 8px; padding-bottom: 8px; transition: color .2s; }
    .lt-ui .nav .nav-inner .nav-menu .nav-links .nav-link::after,
    .lt-ui .nav .nav-inner .nav-menu .nav-drop .nav-drop-btn::after,
    .lt-ui .nav .nav-inner .nav-menu .nav-actions .btn-outline-light::after {
        /* 선 두께는 border 로 그린다: 테두리는 화면 배율(125%, 150%)에서도 항상 정수 픽셀로 맞춰져서, 애니메이션 중과 끝난 뒤 두께가 같다 */
        content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-top: 3px solid var(--accent);
        transform: scaleX(0); transform-origin: right center; transition: transform .38s cubic-bezier(.22, .8, .2, 1);
    }
    .lt-ui .nav .nav-inner .nav-menu .nav-actions .btn-outline-light::after { left: 8px; right: 8px; bottom: 6px; }
    .lt-ui .nav .nav-inner .nav-menu .nav-links .nav-link:hover::after,
    .lt-ui .nav .nav-inner .nav-menu .nav-links .nav-link:focus-visible::after,
    .lt-ui .nav .nav-inner .nav-menu .nav-links .nav-link.active::after,
    .lt-ui .nav .nav-inner .nav-menu .nav-drop .nav-drop-btn:hover::after,
    .lt-ui .nav .nav-inner .nav-menu .nav-actions .btn-outline-light:hover::after { transform: scaleX(1); transform-origin: left center; }
    .lt-ui .nav .nav-inner .nav-menu .nav-links .nav-link.active { color: var(--accent); font-weight: 700; }
}
/* 모바일 서랍에서는 지금 보는 페이지의 글자색만 강조 */
@media (max-width: 1199.98px) { .lt-ui .nav .nav-inner .nav-menu .nav-links .nav-link.active { color: var(--accent); } }

/* 헤더 컨트롤은 모두 같은 높이의 flex 로 두어 세로 가운데에 맞춘다 */
.lt-ui .nav .nav-inner .nav-menu .nav-actions { align-items: center; }
.lt-ui .nav .nav-inner .nav-menu .nav-actions .btn,
.lt-ui .nav .nav-inner .nav-menu .nav-actions .lt-theme-toggle { display: inline-flex; align-items: center; justify-content: center; height: 44px; margin-top: 0; margin-bottom: 0; line-height: 1; }
.lt-ui .nav .nav-inner .nav-menu .nav-actions .btn { padding-top: 0; padding-bottom: 0; }
.lt-ui .nav .nav-inner .nav-menu .nav-links .nav-link, .lt-ui .nav .nav-inner .nav-menu .nav-drop .nav-drop-btn { line-height: 1.2; }
.lt-ui .nav-actions-sm { align-items: center; }
.lt-ui .nav-actions-sm .lt-theme-toggle { height: 44px; }

/* 모바일 메뉴(서랍): 번호가 붙은 큰 목록 */
@media (max-width: 1199.98px) {
    .lt-ui .nav .nav-inner .nav-menu .nav-menu-scroller { width: min(340px, 88vw); }
    .lt-ui .nav .nav-inner .nav-menu .nav-links { display: block; counter-reset: lt-n; margin-bottom: 18px; }
    .lt-ui .nav .nav-inner .nav-menu .nav-links .nav-link {
        display: flex; padding: 16px 0; font: 900 24px/1.3 var(--serif); letter-spacing: -.03em; border-bottom: 2px dashed var(--rule-soft); color: var(--ink);
    }
    .lt-ui .nav .nav-inner .nav-menu .nav-links .nav-link::before {
        counter-increment: lt-n; content: "0" counter(lt-n); font: 600 12px/1 var(--mono); letter-spacing: .06em; color: var(--accent); margin-right: 4px;
    }
    .lt-ui .nav .nav-inner .nav-menu .nav-links .nav-link i { display: none; }
    .lt-ui .nav .nav-inner .nav-menu .nav-actions .btn-outline-light { text-align: center; border: 2px solid var(--rule); box-shadow: var(--hard-sm); text-decoration: none; }
}

/* ============ hero ============ */
.lt-hero { padding: 44px 0 32px; }
.lt-hero h1 { font-size: clamp(34px, 5.6vw, 68px); line-height: 1.12; margin: 0 0 18px; text-wrap: balance; }
.lt-lede { max-width: 58ch; margin: 0; font-size: 17.5px; line-height: 1.75; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 575.98px) { .lt-hero { padding: 28px 0 20px; } .lt-lede { font-size: 16px; } }

/* 히어로 마스코트: 제목 오른쪽에 일정 간격을 두고, 화면이 넓을수록 커짐 (모바일 숨김) */
.lt-mascot-slot { display: none; }
@media (min-width: 992px) {
    .lt-hero .container { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(28px, 4vw, 72px); }
    .lt-hero .container > :not(.lt-mascot-slot) { grid-column: 1; }
    /* 사례 페이지는 제목이 길어서, 홈페이지 제목의 가장 긴 줄(약 8.8em)만큼에서 줄바꿈해 캐릭터 칸이 홈과 같은 크기가 되게 한다 */
    .lt-hero--case h1 { max-width: 8.75em; }
    .lt-mascot-slot { display: block; grid-column: 2; grid-row: 1 / span 3; position: relative; }
    .lt-mascot { position: absolute; left: 0; bottom: -44px; width: 100%; max-width: 760px; height: auto; z-index: 1; pointer-events: none; user-select: none; }
    .lt-inbox { position: relative; z-index: 2; }
}

/* ============ app: 라벨 | 우편함 ============ */
.lt-main { padding-bottom: 56px; }
.lt-app { display: grid; grid-template-columns: minmax(320px, 430px) minmax(0, 1fr); gap: 36px; align-items: start; }
.lt-app > * { min-width: 0; }
@media (max-width: 991.98px) { .lt-app { grid-template-columns: 1fr; gap: 28px; } }

.lt-addr { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (max-width: 991.98px) {
    .lt-addr { display: contents; }
    .lt-addr .lt-label { order: 1; }
    .lt-addr .lt-tally { order: 2; }
    .lt-inbox-col { order: 3; }
    .lt-addr .ad { order: 4; }
}

/* 우편 라벨 */
.lt-label {
    position: relative; background: var(--card); border: 2px solid var(--rule); border-radius: 4px; box-shadow: var(--hard);
    padding: 0 0 20px;
}
.lt-label-head {
    display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 10px 18px;
    border-bottom: 2px dashed var(--rule); font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.lt-label-head b { font-weight: 700; background: var(--ink); color: var(--paper); padding: 4px 8px; border-radius: 2px; }
.lt-stamp {
    position: absolute; right: -22px; top: -34px; width: 104px; height: 104px; z-index: 3; color: var(--accent);
    transform: rotate(12deg); background: var(--card); border-radius: 50%; opacity: .96;
    pointer-events: none;
}
@media (max-width: 575.98px) { .lt-stamp { right: -6px; width: 88px; height: 88px; top: -30px; } }

.lt-address { padding: 20px 18px 0; }
.lt-eyebrow { margin: 0 0 8px; font: 500 12.5px/1.3 var(--mono); letter-spacing: .06em; color: var(--muted); }

.lt-address-box {
    display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; cursor: pointer;
    background: var(--paper); border: 2px solid var(--rule); border-radius: 4px;
}
.lt-address-box:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.lt-address-box input#mainEmail {
    flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); padding: 6px 0; outline: 0; cursor: pointer;
    font: 600 17px/1.3 var(--mono); letter-spacing: -.03em; text-overflow: ellipsis;
}
.lt-address-box .btn-copy { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 8px 12px; font-size: 14px; }
.lt-address-box .btn-copy:disabled { opacity: .5; }

.lt-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); animation: lt-pulse 2s infinite; }
@keyframes lt-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.lt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.lt-actions > *:last-child { grid-column: 1 / -1; }
.lt-actions .mail-action-tooltip-wrapper { display: flex; }
.lt-action {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 12px;
    font: 600 14px/1.2 var(--sans); color: var(--ink); text-decoration: none; cursor: pointer;
    background: var(--paper); border: 2px solid var(--rule); border-radius: 4px; box-shadow: var(--hard-sm);
    transition: transform .12s, box-shadow .12s, background-color .15s;
}
.lt-action i { width: 16px; text-align: center; color: var(--accent); }
.lt-action:hover:not(:disabled) { transform: translate(-1px, -1px); background: var(--paper-2); color: var(--ink); }
.lt-action:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; }
.lt-action:disabled { opacity: .45; cursor: not-allowed; }
.lt-action:last-child { background: var(--accent); color: var(--on-accent); }
.lt-action:last-child i { color: var(--on-accent); }
.lt-action:last-child:hover:not(:disabled) { background: var(--accent-2); color: var(--on-accent); }

.lt-tally { margin: 0; padding: 0 2px; display: flex; flex-wrap: wrap; gap: 4px 18px; font: 500 13px/1.5 var(--mono); color: var(--muted); }
.lt-tally b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
/* 숫자 한 자리: 한 칸 높이만 보이는 창. 안쪽 열이 위로 밀려 올라가며 새 숫자가 나타난다 */
.lt-tally .od { display: inline-block; overflow: hidden; height: 1.5em; line-height: 1.5em; vertical-align: top; }
.lt-tally .od > span { display: block; }
.lt-tally .od i { display: block; height: 1.5em; font-style: normal; }
.lt-panel-note { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.lt-addr .ad { margin: 0 auto; max-width: 100%; }

/* ============ 받은편지함 ============ */
.lt-inbox-col { min-width: 0; }
.lt-inbox { background: var(--card); border: 2px solid var(--rule); border-radius: 4px; box-shadow: var(--hard); min-height: 540px; display: flex; flex-direction: column; overflow: hidden; }
.lt-inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-bottom: 2px solid var(--rule); background: var(--paper-2); }
.lt-inbox-head h2 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.lt-live { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1 var(--mono); color: var(--ink-2); }

.lt-ui .mailbox.lt-mailbox { box-shadow: none; border-radius: 0; overflow: visible; flex: 1; display: flex; flex-direction: column; background: transparent; }
.lt-list { display: block; }
.lt-mailbox.empty .lt-list { display: none; }
.lt-mailbox:not(.empty) .lt-empty { display: none; }

.lt-mail {
    position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 16px; align-items: start;
    padding: 18px 22px; border-bottom: 1px dashed var(--rule-soft); color: inherit; text-decoration: none; cursor: pointer;
    transition: background-color .12s;
}
.lt-mail:last-child { border-bottom: 0; }
.lt-mail:hover { background: var(--paper-2); color: inherit; }
.lt-avatar {
    width: 46px; height: 46px; border: 2px solid var(--rule); border-radius: 4px; display: grid; place-items: center;
    font: 900 19px/1 var(--serif); background: hsl(var(--h, 280) 48% 82%); color: #17130e;
}
[data-theme="dark"] .lt-avatar { background: hsl(var(--h, 280) 34% 30%); color: #f1e9da; }
.lt-mail-main { min-width: 0; }
.lt-from { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-subject { display: block; margin-top: 3px; font-size: 17px; line-height: 1.45; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-snippet { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.lt-time { font: 500 12.5px/1.4 var(--mono); color: var(--muted); white-space: nowrap; padding-top: 3px; font-variant-numeric: tabular-nums; }
.lt-mail.is-unread .lt-from { color: var(--ink); font-weight: 700; }
.lt-mail.is-unread .lt-subject { font-weight: 700; }
.lt-mail.is-unread .lt-time { color: var(--accent); font-weight: 700; }
/* 안 읽은 편지에 찍히는 NEW 도장 */
.lt-mail .is_seen_message {
    position: static; flex: none; display: inline-block; padding: 1px 6px; border: 2px solid var(--accent); border-radius: 3px;
    background: transparent; color: var(--accent); font: 700 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-5deg);
}

.lt-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; }
.lt-empty .empty-art { width: 128px; height: 108px; color: var(--ink); }
.lt-empty h3 { margin: 20px 0 6px; font-size: 22px; }
.lt-empty p { margin: 0; max-width: 34ch; color: var(--muted); font-size: 15px; }
.lt-empty .lt-wait { margin-top: 20px; width: 132px; height: 6px; border: 2px solid var(--rule); border-radius: 4px; overflow: hidden; position: relative; }
.lt-empty .lt-wait i { position: absolute; left: 0; top: -1px; bottom: -1px; display: block; width: 36%; background: var(--accent); animation: lt-slide 1.7s ease-in-out infinite; }
@keyframes lt-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(300%); } }

.lt-note { margin: 0; padding: 12px 22px; border-top: 2px solid var(--rule); background: var(--paper-2); font: 500 12.5px/1.5 var(--mono); color: var(--ink-2); }
.lt-ads-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 18px; }
.lt-inbox-col .ad { margin: 18px auto 0; }

@media (max-width: 575.98px) {
    .lt-mail { grid-template-columns: 42px minmax(0, 1fr); padding: 15px 16px; gap: 12px; }
    .lt-avatar { width: 42px; height: 42px; }
    .lt-time { grid-column: 2; padding: 0; margin-top: -2px; }
    .lt-inbox-head { padding: 12px 16px; }
    .lt-note { padding: 10px 16px; }
}

/* ============ 공통 섹션 ============ */
.lt-sec { padding: 88px 0; border-top: 2px solid var(--rule); }
.lt-sec-head { max-width: 640px; }
.lt-sec-head h2 { font-size: clamp(28px, 4vw, 48px); line-height: 1.18; margin: 0 0 16px; text-wrap: balance; }
.lt-sec-head p { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.75; }
@media (max-width: 767.98px) { .lt-sec { padding: 56px 0; } }

/* 흐르는 띠 */
.lt-marquee { --band: var(--ink); position: relative; overflow: hidden; background: var(--band); color: var(--paper); border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule); padding: 14px 0; }
/* 양 끝에서 글자가 갑자기 잘려 보이지 않도록 서서히 사라지게 한다 */
.lt-marquee::before, .lt-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 96px; z-index: 1; pointer-events: none; }
.lt-marquee::before { left: 0; background: linear-gradient(90deg, var(--band), transparent); }
.lt-marquee::after { right: 0; background: linear-gradient(270deg, var(--band), transparent); }
/* 세트 12개를 깔고 절반(6세트)만큼 옮기면 처음과 똑같은 모양이 되어 이음매가 없다. 세트 폭이 짧은 영어나 아주 넓은 화면에서도 오른쪽이 비지 않게 넉넉히 둔다 */
.lt-marquee-track { display: flex; width: max-content; animation: lt-marquee 114s linear infinite; }
.lt-marquee-set { display: flex; flex: none; align-items: center; }
.lt-marquee-set span { padding: 0 22px; font: 600 14px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.lt-marquee-set svg { flex: none; width: 18px; height: 18px; color: var(--mark); }
[data-theme="dark"] .lt-marquee { --band: var(--paper-2); color: var(--ink); }
@keyframes lt-marquee { to { transform: translateX(-50%); } }

/* 사용법 */
.lt-steps-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.lt-steps-grid .lt-sec-head { position: sticky; top: calc(var(--nav-h) + 32px); }
.lt-steps-list { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.lt-steps-list li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; padding: 28px 0; border-bottom: 2px dashed var(--rule-soft); }
.lt-steps-list li:first-child { padding-top: 0; }
.lt-steps-list li:last-child { border-bottom: 0; }
.lt-num { font: 900 76px/.9 var(--serif); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px var(--ink); }
.lt-steps-list li:nth-child(even) .lt-num { -webkit-text-stroke-color: var(--accent); }
.lt-steps-list h3 { margin: 0 0 8px; font-size: 24px; }
.lt-steps-list p { margin: 0; color: var(--ink-2); font-size: 16.5px; max-width: 46ch; }
@media (max-width: 991.98px) {
    .lt-steps-grid { grid-template-columns: 1fr; gap: 36px; }
    .lt-steps-grid .lt-sec-head { position: static; }
}
@media (max-width: 575.98px) { .lt-steps-list li { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; } .lt-num { font-size: 52px; } }

/* 기능: 크기가 다른 타일 */
.lt-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.lt-tile { position: relative; grid-column: span 2; padding: 26px; background: var(--card); border: 2px solid var(--rule); border-radius: 4px; box-shadow: var(--hard); display: flex; flex-direction: column; min-height: 230px; }
.lt-tile:nth-child(1) { grid-column: span 4; background: var(--accent); color: var(--on-accent); }
.lt-tile:nth-child(2) { grid-column: span 2; }
.lt-tile:nth-child(4) { grid-column: span 4; background: var(--ink); color: var(--paper); }
.lt-tile:nth-child(5), .lt-tile:nth-child(6) { grid-column: span 3; }
.lt-tile:nth-child(6) { background: var(--paper-2); }
.lt-deco-box { position: relative; overflow: hidden; background: var(--card); border: 2px solid var(--rule); border-radius: 4px; box-shadow: var(--hard); padding: 32px 28px 40px; min-height: 360px; }
.lt-deco-box > :not(.lt-deco) { position: relative; z-index: 1; }
.lt-deco { position: absolute; right: -6%; bottom: -4%; width: 78%; height: auto; opacity: .2; pointer-events: none; user-select: none; }
.lt-tile h3 { margin: auto 0 8px; font-size: 26px; color: inherit; }
.lt-tile:nth-child(1) h3 { font-size: 34px; }
.lt-tile p { margin: 0; max-width: 46ch; font-size: 15.5px; line-height: 1.7; color: inherit; opacity: .88; }
.lt-tile-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 36px; border: 2px solid currentColor; border-radius: 4px; font-size: 20px; }
[data-theme="dark"] .lt-tile:nth-child(4) { background: var(--paper-2); color: var(--ink); }
[data-theme="dark"] .lt-tile:nth-child(4) h3 { color: var(--ink); }
.lt-tile:nth-child(1) h3, .lt-tile:nth-child(4) h3 { color: inherit; }
@media (max-width: 991.98px) { .lt-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lt-tile, .lt-tile:nth-child(n) { grid-column: span 1; } .lt-tile:nth-child(1) { grid-column: span 2; } }
@media (max-width: 575.98px) { .lt-bento { grid-template-columns: 1fr; } .lt-tile:nth-child(n) { grid-column: span 1; min-height: 0; } .lt-tile-icon { margin-bottom: 22px; } }

/* 회원권 */
.lt-plans-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.lt-tickets { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.lt-ticket { position: relative; background: var(--card); border: 2px solid var(--rule); border-radius: 4px; box-shadow: var(--hard); padding: 26px 24px 24px; display: flex; flex-direction: column; }
.lt-ticket.is-pro { background: var(--ink); color: var(--paper); }
[data-theme="dark"] .lt-ticket.is-pro { background: var(--accent); color: var(--on-accent); }
.lt-ticket h3 { margin: 0; font-size: 24px; color: inherit; }
.lt-ticket .lt-price { margin: 14px 0 2px; font: 700 40px/1 var(--mono); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.lt-ticket .lt-price small { font: 500 14px/1 var(--sans); letter-spacing: 0; opacity: .8; margin-left: 4px; }
.lt-ticket .lt-year { margin: 0 0 20px; font: 500 12.5px/1.5 var(--mono); opacity: .8; }
.lt-ticket ul { list-style: none; margin: 0 0 24px; padding: 18px 0 0; border-top: 2px dashed currentColor; display: grid; gap: 10px; flex: 1; }
.lt-ticket li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.5; }
.lt-ticket li::before { content: ""; position: absolute; left: 0; top: .42em; width: 11px; height: 6px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg); }
.lt-ticket li.is-more { font-weight: 700; }
.lt-ticket .btn { width: 100%; text-align: center; }
.lt-ticket.is-pro .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.lt-ticket.is-pro .btn, .lt-ticket.is-pro .btn:focus, .lt-ticket.is-pro .btn:hover { box-shadow: 3px 3px 0 var(--mark) !important; }
.lt-ticket.is-pro .btn:active { box-shadow: none !important; }
/* 호버: 공용 .btn-secondary 호버(보라 배경 + 글자색 교체)가 어두운 카드 위에서 섞이지 않게, 밝은 버튼 그대로 살짝 떠오르며 그림자만 커진다 */
.lt-ui .lt-ticket.is-pro .btn:hover:not(:disabled):not(.disabled) { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: 5px 5px 0 var(--mark) !important; }
.lt-ui .lt-ticket.is-pro .btn:active:not(:disabled):not(.disabled) { transform: translate(3px, 3px); box-shadow: none !important; }
[data-theme="dark"] .lt-ticket.is-pro .btn { background: var(--paper); color: var(--ink); }
.lt-ticket-flag { position: absolute; top: -13px; right: 18px; padding: 3px 10px; background: var(--mark); color: #17130e; border: 2px solid #17130e; border-radius: 3px; font: 700 11.5px/1.4 var(--mono); letter-spacing: .06em; transform: rotate(3deg); }
@media (max-width: 991.98px) { .lt-plans-grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 575.98px) { .lt-tickets { grid-template-columns: 1fr; } }

/* FAQ */
.lt-faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
.lt-faq-grid .lt-sec-head { position: sticky; top: calc(var(--nav-h) + 32px); }
.lt-qa { border-top: 2px solid var(--rule); }
.lt-qa:last-child { border-bottom: 2px solid var(--rule); }
.lt-qa summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 4px; font: 700 19px/1.5 var(--serif); letter-spacing: -.025em; }
.lt-qa summary::-webkit-details-marker { display: none; }
.lt-qa summary::after { content: "+"; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid var(--rule); border-radius: 4px; font: 500 20px/1 var(--mono); }
.lt-qa summary::after { transition: transform .3s cubic-bezier(.4, 0, .2, 1), background-color .2s, color .2s; }
.lt-qa[open] summary::after { content: "−"; background: var(--ink); color: var(--paper); }
/* 열고 닫을 때 높이가 부드럽게 변한다(::details-content 를 지원하는 브라우저). 지원하지 않으면 그냥 바로 열린다 */
.lt-qa { interpolate-size: allow-keywords; }
.lt-qa::details-content { block-size: 0; overflow: clip; transition: block-size .32s cubic-bezier(.4, 0, .2, 1), content-visibility .32s allow-discrete; }
.lt-qa[open]::details-content { block-size: auto; }
.lt-qa[open] .lt-qa-body { animation: lt-qa-in .32s ease both; }
@keyframes lt-qa-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lt-qa::details-content, .lt-qa summary::after { transition: none; } .lt-qa[open] .lt-qa-body { animation: none; } }
.lt-qa summary:hover { color: var(--accent); }
.lt-qa-body { padding: 0 54px 24px 4px; color: var(--ink-2); font-size: 16px; line-height: 1.85; max-width: 68ch; }
@media (max-width: 991.98px) { .lt-faq-grid { grid-template-columns: 1fr; gap: 32px; } .lt-faq-grid .lt-sec-head { position: relative; top: auto; } }
@media (max-width: 575.98px) { .lt-qa summary { font-size: 17px; } .lt-qa-body { padding-right: 4px; } }

/* 블로그 */
.lt-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; margin-top: 44px; }
.lt-post { display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: 20px; padding: 18px; background: var(--card); border: 2px solid var(--rule); border-radius: 4px; box-shadow: var(--hard); text-decoration: none; transition: transform .12s, box-shadow .12s; }
.lt-post:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); color: inherit; }
[data-theme="dark"] .lt-post:hover { box-shadow: 6px 6px 0 var(--accent); }
.lt-post img { width: 100%; height: 100%; min-height: 140px; object-fit: cover; border: 2px solid var(--rule); border-radius: 3px; }
.lt-post h3 { margin: 0 0 8px; font-size: 21px; line-height: 1.35; }
.lt-post p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lt-post time { font: 500 12px/1 var(--mono); color: var(--muted); }
@media (max-width: 575.98px) { .lt-post { grid-template-columns: 1fr; } .lt-post img { height: 180px; } }

/* 본문 글 (관리자 HTML 섹션) */
.lt-prose { max-width: 760px; margin: 0 auto; color: var(--ink-2); font-size: 17px; line-height: 1.95; }
.lt-prose, .lt-prose * { background: transparent !important; font-family: inherit !important; }
.lt-prose * { color: inherit !important; }
.lt-prose h1, .lt-prose h2, .lt-prose h3, .lt-prose h4 { font-family: var(--serif) !important; color: var(--ink) !important; letter-spacing: -.03em; line-height: 1.3; margin: 1.8em 0 .6em; font-weight: 900 !important; }
.lt-prose h2 { font-size: clamp(26px, 3.6vw, 38px); margin-top: 0; }
.lt-prose strong, .lt-prose b { color: var(--ink) !important; }
.lt-prose img { max-width: 100%; height: auto; border: 2px solid var(--rule); border-radius: 4px; }
.lt-prose a { color: var(--accent) !important; text-decoration: underline; text-underline-offset: 3px; }

/* 가입 유도 */
.lt-cta { padding: 72px 0 56px; border-top: 2px solid var(--rule); }
.lt-cta-box { position: relative; background: var(--accent); color: var(--on-accent); border: 2px solid var(--rule); border-radius: 4px; box-shadow: var(--hard); padding: 56px clamp(24px, 6vw, 72px); overflow: hidden; }
.lt-cta-box h2 { margin: 0 0 14px; color: inherit; font-size: clamp(28px, 4.4vw, 52px); line-height: 1.18; max-width: 18ch; text-wrap: balance; }
.lt-cta-box p { margin: 0 0 28px; max-width: 46ch; font-size: 17px; opacity: .92; }
.lt-cta-box .btn { background: var(--paper); color: var(--ink); border-color: var(--ink); font-size: 17px; padding: 12px 24px; }
.lt-cta-box .btn, .lt-cta-box .btn:focus, .lt-cta-box .btn:hover { box-shadow: 4px 4px 0 var(--ink) !important; }
.lt-cta-box .btn:active { box-shadow: none !important; }
.lt-cta-box .btn:hover { background: var(--card); color: var(--ink); }
.lt-cta-stamp { position: absolute; right: clamp(-30px, 2vw, 40px); bottom: -34px; width: 230px; height: 230px; color: var(--on-accent); opacity: .22; transform: rotate(-14deg); pointer-events: none; }
@media (max-width: 767.98px) { .lt-cta-stamp { width: 150px; height: 150px; right: -30px; } }

@media (prefers-reduced-motion: reduce) {
    .lt-dot, .lt-wait i, .lt-marquee-track { animation: none; }
    .lt-ui *, .lt-ui *::before, .lt-ui *::after { transition: none !important; }
}

/* ============ 메일 보기 ============ */
.lt-view { padding: 36px 0 80px; }
.lt-view-wrap { max-width: 920px; margin: 0 auto; }
.lt-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; font: 600 13px/1 var(--mono); letter-spacing: .04em; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--rule); padding-bottom: 4px; }
.lt-back:hover { color: var(--accent); border-color: var(--accent); }
.lt-view h1 { font-size: clamp(26px, 4vw, 42px); line-height: 1.25; margin: 0 0 24px; overflow-wrap: anywhere; text-wrap: balance; }
.lt-view .lt-card { background: var(--card); border: 2px solid var(--rule); border-radius: 4px; box-shadow: var(--hard); overflow: hidden; }

.lt-meta { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-bottom: 2px solid var(--rule); background: var(--paper-2); }
.lt-meta .lt-avatar { flex-shrink: 0; }
.lt-meta-main { flex: 1; min-width: 0; }
.lt-meta-from { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.lt-meta-mail { font: 500 13px/1.5 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.lt-meta-date { text-align: right; white-space: nowrap; font: 500 12.5px/1.6 var(--mono); color: var(--ink-2); }
.lt-meta-tools { display: flex; gap: 8px; }
.lt-icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 2px solid var(--rule); border-radius: 4px; background: var(--card); color: var(--ink); cursor: pointer; text-decoration: none; box-shadow: var(--hard-sm); transition: transform .12s, box-shadow .12s; }
.lt-icon-btn:hover { transform: translate(-1px, -1px); color: var(--ink); }
.lt-icon-btn:active { transform: translate(3px, 3px); box-shadow: none; }
.lt-view .star-icon-color { color: #c98a00; }
@media (max-width: 767.98px) { .lt-meta { flex-wrap: wrap; } .lt-meta-date { width: 100%; text-align: left; order: 3; } }

.lt-attach { padding: 16px 22px; border-bottom: 2px solid var(--rule); position: relative; min-height: 84px; }
.lt-attach-list { display: flex; flex-wrap: wrap; gap: 10px; }
.lt-file { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 8px 12px; border: 2px solid var(--rule); border-radius: 4px; background: var(--paper); text-decoration: none; color: var(--ink); font-size: 14px; }
.lt-file:hover { background: var(--paper-2); color: var(--ink); }
.lt-file img { width: 22px; height: 22px; }
.lt-file small { color: var(--muted); font-family: var(--mono); }
.lt-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-attach .can_see_attachments { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; background: color-mix(in srgb, var(--card) 90%, transparent); backdrop-filter: blur(3px); }
.lt-attach .can_see_attachments > div { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; padding: 0 16px; }
.lt-attach .can_see_attachments h4 { font: 600 15px/1.4 var(--sans); margin: 0; }

/* 메일 본문은 흰 배경을 가정하고 만들어져서 다크에서도 종이처럼 밝게 둔다 */
.lt-paper { background: #fff; padding: 4px; }
.lt-paper iframe { display: block; width: 100%; min-height: 420px; border: 0; background: #fff; }
.lt-view .ad { margin: 18px auto 0; }

/* ============ 푸터 / 쿠키 ============ */
.lt-footer {
    --f-bg: var(--ink); --f-fg: var(--paper); --f-mute: color-mix(in srgb, var(--paper) 62%, transparent);
    --f-line: color-mix(in srgb, var(--paper) 28%, transparent); --f-hi: var(--mark);
    position: relative; overflow: hidden; background: var(--f-bg); color: var(--f-fg); border-top: 2px solid var(--rule);
}
[data-theme="dark"] .lt-footer {
    --f-bg: var(--paper-2); --f-fg: var(--ink); --f-mute: color-mix(in srgb, var(--ink) 62%, transparent);
    --f-line: color-mix(in srgb, var(--ink) 24%, transparent); --f-hi: var(--accent);
}
.lt-footer .container { position: relative; z-index: 1; }
.lt-footer-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr); gap: 48px; padding: 64px 0 44px; }
.lt-footer-theme { margin: 0; }
/* 푸터는 어두운 면이라 스위치 색을 푸터 변수로 다시 정한다 */
.lt-footer .lt-switch { border-color: var(--f-fg); background: var(--f-bg); box-shadow: 3px 3px 0 var(--f-line); }
.lt-footer .lt-switch b { background: var(--f-fg); color: var(--f-bg); }
.lt-footer .lt-switch::after { color: var(--f-mute); }
[data-theme="dark"] .lt-footer .lt-switch b { background: var(--accent); color: var(--on-accent); }
.lt-footer .lt-theme-toggle:hover .lt-switch { background: var(--f-bg); }
.lt-footer-brand .logo img { height: 50px; width: auto; filter: none; }
.lt-footer .lt-footer-tag { margin: 22px 0 0; font: 900 clamp(24px, 3vw, 34px)/1.3 var(--serif); letter-spacing: -.035em; color: var(--f-fg); }
.lt-footer .lt-footer-h { margin: 0 0 16px; font: 600 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--f-mute); }
.lt-footer ul { list-style: none; margin: 0; padding: 0; }
.lt-footer li + li { margin-top: 10px; }
.lt-footer nav a { color: var(--f-fg); text-decoration: none; font-size: 16px; background: linear-gradient(var(--f-hi), var(--f-hi)) 0 100% / 0 2px no-repeat; transition: background-size .2s; padding-bottom: 2px; }
.lt-footer nav a:hover { background-size: 100% 2px; color: var(--f-fg); }
.lt-footer-bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 32px; padding: 20px 0; border-top: 2px dashed var(--f-line);
    font: 500 12.5px/1.7 var(--mono); color: var(--f-mute);
}
.lt-footer-bottom p { margin: 0; }
.lt-footer-biz { display: grid; grid-template-columns: max-content 1fr; gap: 7px 18px; margin: 22px 0 0; max-width: 560px; font: 500 12.5px/1.6 var(--mono); color: var(--f-fg); }
.lt-footer-biz dt { color: var(--f-mute); font-weight: 600; letter-spacing: .02em; }
.lt-footer-biz dd { margin: 0; }
.lt-footer-biz .nw { white-space: nowrap; }
.lt-footer-biz i { font-style: normal; color: var(--f-mute); margin: 0 .55em; }
.lt-footer-bottom { align-items: center; }
.lt-footer-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* 바닥에 걸쳐 잘린 큰 워드마크 */
.lt-footer-mark {
    position: relative; z-index: 0; margin: 8px 0 -.2em; text-align: center; white-space: nowrap; user-select: none; pointer-events: none;
    font: 900 clamp(88px, 21vw, 300px)/.8 var(--serif); letter-spacing: -.06em; color: transparent;
    -webkit-text-stroke: 2px var(--f-line);
}
@media (max-width: 991.98px) { .lt-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; padding: 48px 0 32px; } .lt-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 575.98px) { .lt-footer-grid { grid-template-columns: 1fr 1fr; } .lt-footer-mark { -webkit-text-stroke-width: 1.5px; } }

.lt-ui .cookies { background: var(--card); color: var(--ink); border: 2px solid var(--rule); border-radius: 4px; box-shadow: var(--hard); max-width: 360px; padding: 20px; }
.lt-ui .cookies h5 { font: 900 17px/1.4 var(--serif); margin: 0; }
.lt-ui .cookies .cookies-text { font-size: 14px; color: var(--ink-2); }
.lt-ui .go-up { background: var(--accent); color: var(--on-accent); border: 2px solid var(--rule); border-radius: 4px; }

/* 광고 구역 (홈 하단) */
.lt-page { position: relative; }
.lt-adrow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 20px; justify-items: center; }
/* 여백은 광고 자신이 가진다. 광고가 채워지지 않아(차단/미승인) 접히면 구역 전체가 높이 0이 된다 */
.lt-adrow-grid .ad { margin: 0 0 40px; max-width: 100%; }
.lt-adrow-grid .ad:has(ins[data-ad-status="unfilled"]) { display: none; }

/* 가로 광고 칸은 높이를 고정하지 않는다. 구글이 정하는 광고 높이(예: 280px)가 90px 칸 밖으로 넘치던 문제 */
.lt-ui .ad.ad-h { height: auto; }

/* 광고가 채워지지 않았으면(차단/미승인/로딩 전) 광고 칸을 접어서 아무것도 보이지 않게 한다.
   display:none 은 쓰지 않는다. 구글이 칸의 폭을 재야 광고를 채울 수 있기 때문이다. 채워지면(status=filled) 규칙이 풀려 원래 크기로 보인다. */
.lt-ui .ad:has(ins.adsbygoogle):not(:has(ins.adsbygoogle[data-ad-status="filled"])) {
    height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important;
}

.lt-note-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lt-extend { flex: none; padding: 6px 12px; border: 2px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink); font: 600 12.5px/1.2 var(--mono); cursor: pointer; box-shadow: var(--hard-sm); transition: transform .15s, box-shadow .15s; }
.lt-extend:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: var(--hard-hover); }
.lt-extend:disabled { opacity: .55; cursor: not-allowed; }

.lt-tip { position: relative; flex: none; }
.lt-tip[data-tip]::after { content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 5; width: max-content; max-width: 240px; padding: 8px 12px; border: 2px solid var(--rule); border-radius: 6px; background: var(--ink); color: var(--paper); font: 500 12.5px/1.4 var(--mono); box-shadow: var(--hard-sm); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .15s, transform .15s; }
.lt-tip[data-tip]::before { content: ""; position: absolute; right: 18px; bottom: calc(100% + 3px); z-index: 5; width: 10px; height: 10px; background: var(--ink); border: 2px solid var(--rule); border-top: 0; border-left: 0; transform: translateY(4px) rotate(45deg); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.lt-tip[data-tip]:hover::after, .lt-tip[data-tip]:hover::before { opacity: 1; transform: translateY(0); }
.lt-tip[data-tip]:hover::before { transform: translateY(0) rotate(45deg); }

/* ============ 기록 모달 ============ */
.lt-hist .modal-content { border: 2px solid var(--rule); border-radius: 6px; background: var(--card); box-shadow: 8px 8px 0 var(--ink); overflow: hidden; }
[data-theme="dark"] .lt-hist .modal-content { box-shadow: 8px 8px 0 var(--accent); }
.lt-hist-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 28px 18px; border-bottom: 2px solid var(--rule); background: var(--paper-2); background-image: var(--grain); }
.lt-hist-head .lt-kicker { margin-bottom: 6px; }
.lt-hist-head .modal-title { margin: 0; font: 900 26px/1.25 var(--serif); letter-spacing: -.04em; }
.lt-hist-sub { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.lt-hist-head .btn-close { flex: none; width: 36px; height: 36px; margin: 0; padding: 0; display: grid; place-items: center; border: 2px solid var(--rule); border-radius: 4px; background-color: var(--card); background-position: center; background-size: 12px; box-shadow: var(--hard-sm); opacity: 1; }
.lt-hist-head .btn-close:hover { transform: translate(-1px, -1px); box-shadow: var(--hard-hover); }
.lt-hist-head .btn-close:active { transform: translate(2px, 2px); box-shadow: none; }
[data-theme="dark"] .lt-hist-head .btn-close { filter: invert(1) grayscale(1); }

.lt-hist .modal-body { padding: 20px 28px 24px; text-align: left; }
.lt-hist-bar { display: flex; gap: 10px; margin-bottom: 16px; }
.lt-hist-search { flex: 1; min-width: 0; position: relative; margin: 0; }
.lt-hist-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; pointer-events: none; }
.lt-hist-search input { width: 100%; height: 44px; padding: 0 14px 0 40px; border: 2px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink); font-size: 15px; outline: 0; }
.lt-hist-search input:focus, .lt-hist-search input:focus-visible { border-color: var(--rule); outline: 0 !important; box-shadow: none !important; }
.lt-hist-bar .btn { flex: none; height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; }

.lt-hist .mail-history { min-height: 0; max-height: 46vh; overflow: auto; border: 2px solid var(--rule); border-radius: 4px; background: var(--paper); scrollbar-width: thin; }
.lt-hist .mail-history-day-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 9px 16px; background: var(--paper-2); color: var(--ink-2); border-bottom: 2px solid var(--rule); font: 600 12.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: none; }
.lt-hist .mail-history-day-header p { margin: 0; }
.lt-hist .mail-history-day-header em { margin-left: 10px; font-style: normal; color: inherit; opacity: .78; font-weight: 500; }
.lt-hist .mail-history-day:not(:first-child) .mail-history-day-header { border-top: 2px solid var(--rule); }
.lt-hist .mail-history .mail-history-day .form-check, .lt-hist .mail-history-day-header .form-check { margin: 0; min-height: 0; padding: 0; display: flex; }
.lt-hist .mail-history-day-header .form-check-input, .lt-hist .mail-history-item .form-check-input { float: none; margin: 0; }
.lt-hist .mail-history .mail-history-day .mail-history-item { display: grid; grid-template-columns: 22px 74px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px dashed var(--rule-soft); transition: background-color .15s; }
.lt-hist .mail-history .mail-history-day .mail-history-item:last-child { border-bottom: 0; }
.lt-hist .mail-history .mail-history-day .mail-history-item:hover { background: var(--card); }
.lt-hist .mail-history-item span { margin: 0; line-height: 1.4; color: var(--muted); font: 500 12.5px/1.4 var(--mono); }
.lt-hist .mail-history-item .email { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font: 600 15px/1.4 var(--mono); }
.lt-hist .mail-history .mail-history-day .mail-history-item .btn { position: static; visibility: visible; opacity: 1; padding: 5px 12px; font-size: 13px; }
.lt-hist .mail-history-item .label_bluer { margin: 0; padding: 3px 9px; border: 1.5px solid var(--accent); border-radius: 3px; color: var(--accent); font: 600 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.lt-hist .mail-history-empty { display: grid; place-items: center; align-content: center; gap: 10px; height: auto; min-height: 220px; padding: 30px 20px; text-align: center; color: var(--muted); }
.lt-hist .mail-history-empty i { font-size: 30px; color: var(--rule-soft); }
.lt-hist .mail-history-empty h5 { margin: 0; font: 500 15px/1.5 var(--sans); color: var(--muted); }
.lt-hist .mail-results-info.lt-hist-foot { display: flex; justify-content: flex-end; margin-top: 14px; padding: 0; background: transparent; border-radius: 0; color: var(--ink-2); font: 500 13px/1.4 var(--mono); }
.lt-hist .lt-hist-foot b { margin-left: 6px; color: var(--ink); font-weight: 600; }
@media (max-width: 575.98px) {
    .lt-hist-head { padding: 20px 18px 14px; }
    .lt-hist .modal-body { padding: 16px 18px 20px; }
    .lt-hist-bar .btn span { display: none; }
    .lt-hist .mail-history .mail-history-day .mail-history-item { grid-template-columns: 22px minmax(0, 1fr) auto; }
    .lt-hist .mail-history .mail-history-day .mail-history-item > span { display: none !important; }
}

/* 유료 회원 전용 기능 모달 */
.lt-ui .lt-upgrade .modal-content { position: relative; }
.lt-ui .lt-upgrade-close { position: absolute; top: 14px; right: 14px; z-index: 2; }
.lt-ui .lt-upgrade-body { padding: 34px 32px 28px; }
.lt-ui .lt-upgrade-body .lt-ic { margin-bottom: 18px; background: var(--accent); color: var(--on-accent) !important; }
.lt-ui .lt-upgrade-body .lt-kicker { margin: 0 0 8px; }
.lt-ui .lt-upgrade-body h5 { margin: 0 0 18px; font: 900 24px/1.35 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.lt-ui .lt-upgrade-list { list-style: none; margin: 0 0 26px; padding: 16px 0 0; border-top: 2px dashed var(--rule-soft); display: grid; gap: 10px; }
.lt-ui .lt-upgrade-list li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: 15px; }
.lt-ui .lt-upgrade-list li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 3px solid var(--ok); border-bottom: 3px solid var(--ok); transform: rotate(-45deg); }
.lt-ui .lt-upgrade-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* 사례별 페이지 */
.lt-landing-note { margin: 14px 0 0; font-size: 14.5px; color: var(--ink-2); }
.lt-landing-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.lt-cases { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.lt-cases a { display: grid; gap: 6px; height: 100%; padding: 20px 22px; color: var(--ink); text-decoration: none; background: var(--card); border: 2px solid var(--rule); border-radius: 4px; box-shadow: var(--hard-sm); transition: transform .15s, box-shadow .15s; }
.lt-cases a:hover { transform: translate(-1px, -1px); box-shadow: var(--hard-hover); }
.lt-cases b { font: 900 19px/1.3 var(--serif); letter-spacing: -.03em; }
.lt-cases span { font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ============ 공지사항(블로그) ============ */
.lt-blog-sec { padding-top: 48px; }
.lt-blog { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.lt-bposts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.lt-bcard { display: flex; flex-direction: column; background: var(--card); border: 2px solid var(--rule); border-radius: 4px; box-shadow: var(--hard); color: inherit; overflow: hidden; transition: transform .12s, box-shadow .12s; }
.lt-bcard:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); color: inherit; }
[data-theme="dark"] .lt-bcard:hover { box-shadow: 6px 6px 0 var(--accent); }
.lt-bcard img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 2px solid var(--rule); background: var(--paper-2); }
.lt-bcard-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.lt-bcard h3 { margin: 0; font-size: 22px; line-height: 1.35; letter-spacing: -.02em; }
.lt-bcard-desc { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lt-bmeta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: 500 12.5px/1.4 var(--mono); color: var(--muted); }
.lt-bmeta span:first-child:not(:only-child), .lt-bmeta a { padding: 2px 8px; border: 2px solid var(--rule); border-radius: 3px; color: var(--ink); background: var(--paper-2); }
.lt-bmore { margin-top: auto; padding-top: 4px; font: 700 13px/1 var(--mono); color: var(--accent); }
.lt-bmore i { margin-left: 4px; transition: transform .15s; }
.lt-bcard:hover .lt-bmore i { transform: translateX(4px); }
.lt-bcard.is-lead { grid-column: 1 / -1; flex-direction: row; }
.lt-bcard.is-lead img { width: 52%; aspect-ratio: auto; min-height: 280px; border-bottom: 0; border-right: 2px solid var(--rule); }
.lt-bcard.is-lead .lt-bcard-body { justify-content: center; padding: 28px 32px; }
.lt-bcard.is-lead h3 { font-size: 30px; }
.lt-bempty { padding: 48px 24px; text-align: center; border: 2px dashed var(--rule); border-radius: 4px; color: var(--muted); }
.lt-blog .pagination { gap: 8px; justify-content: center; margin: 36px 0 0; flex-wrap: wrap; }
.lt-blog .page-link { border: 2px solid var(--rule); border-radius: 4px !important; color: var(--ink); background: var(--card); font: 600 14px/1 var(--mono); padding: 10px 14px; }
.lt-blog .page-link:hover { background: var(--paper-2); color: var(--ink); }
.lt-blog .page-item.active .page-link { background: var(--ink); color: var(--paper); border-color: var(--rule); }
.lt-blog .page-item.disabled .page-link { opacity: .45; }
.lt-bside { display: grid; gap: 24px; position: sticky; top: calc(var(--nav-h-full) + 24px); }
.lt-bside-box { padding: 22px; background: var(--card); border: 2px solid var(--rule); border-radius: 4px; box-shadow: var(--hard); }
.lt-bside-h { margin: 0 0 16px; font: 700 12.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lt-bpop { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lt-bpop a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; color: inherit; }
.lt-bpop a:hover b { color: var(--accent); }
.lt-bpop img { width: 64px; height: 64px; object-fit: cover; border: 2px solid var(--rule); border-radius: 3px; }
.lt-bpop span { display: grid; gap: 6px; min-width: 0; }
.lt-bpop b { font-size: 15px; line-height: 1.4; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lt-bpop time { font: 500 11.5px/1 var(--mono); color: var(--muted); }
.lt-bcats { display: flex; flex-wrap: wrap; gap: 8px; }
.lt-bcats a { padding: 6px 12px; border: 2px solid var(--rule); border-radius: 4px; font: 600 13.5px/1.2 var(--sans); color: var(--ink); background: var(--paper-2); transition: background-color .15s, color .15s; }
.lt-bcats a:hover { background: var(--ink); color: var(--paper); }
.lt-article-img { width: 100%; max-height: 420px; object-fit: cover; border: 2px solid var(--rule); border-radius: 4px; box-shadow: var(--hard); margin-bottom: 28px; }
.lt-article-title { margin: 0 0 14px; font-size: clamp(28px, 4vw, 42px); line-height: 1.25; letter-spacing: -.03em; }
.lt-article .lt-bmeta { margin-bottom: 32px; padding-bottom: 20px; border-bottom: 2px dashed var(--rule-soft, var(--rule)); }
.lt-article .lt-prose { margin: 0; max-width: none; }
.lt-btags { display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0 0; }
.lt-btags span { font: 500 13px/1 var(--mono); color: var(--muted); }
@media (max-width: 991.98px) { .lt-blog { grid-template-columns: 1fr; gap: 36px; } .lt-bside { position: static; } }
@media (max-width: 767.98px) { .lt-bposts { grid-template-columns: 1fr; } .lt-bcard.is-lead { flex-direction: column; } .lt-bcard.is-lead img { width: 100%; min-height: 0; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 2px solid var(--rule); } .lt-bcard.is-lead h3 { font-size: 24px; } }

/* 홈의 블로그 구역: 제목 줄 오른쪽에 전체 보기 버튼, 아래에 글 카드 */
.lt-sec-head.lt-sec-head-row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.lt-sec-head-row > div { min-width: 0; flex: 1 1 420px; max-width: 640px; }
.lt-sec-head-row > .btn { flex: none; margin-bottom: 6px; }
.lt-bposts.is-home { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 44px; }
.lt-bposts.is-home .lt-bcard.is-lead { grid-column: auto; flex-direction: column; }
.lt-sec-head-row h2 { font-size: clamp(22px, 2.6vw, 32px); margin-bottom: 10px; }
.lt-sec-head-row p:not(.lt-kicker) { font-size: 15px; line-height: 1.7; }
.lt-bposts.is-home { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 32px; }
.lt-bposts.is-home .lt-bcard img { aspect-ratio: 2 / 1; }
.lt-bposts.is-home .lt-bcard-body { padding: 16px 18px 18px; gap: 8px; }
.lt-bposts.is-home .lt-bcard h3 { font-size: 18px; }
.lt-bposts.is-home .lt-bcard-desc { font-size: 14px; -webkit-line-clamp: 2; }

.lt-ui .lt-upgrade-note { margin: 0 0 24px; color: var(--ink-2); font-size: 15px; line-height: 1.7; }

/* ============ 약관 같은 긴 문서(/page/...) ============ */
.lt-doc-sec { padding-top: 40px; }
.lt-doc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; }
.lt-doc-toc { position: sticky; top: calc(var(--nav-h-full) + 24px); max-height: calc(100vh - var(--nav-h-full) - 48px); overflow-y: auto; padding: 20px; background: var(--card); border: 2px solid var(--rule); border-radius: 4px; box-shadow: var(--hard); }
.lt-doc-toc[hidden] { display: none; }
.lt-doc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lt-doc-toc a { display: block; padding: 6px 10px; border-left: 3px solid transparent; border-radius: 2px; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s; }
.lt-doc-toc a:hover { background: var(--paper-2); color: var(--ink); }
.lt-doc-toc a.is-on { border-left-color: var(--accent); background: var(--paper-2); color: var(--ink); font-weight: 700; }
.lt-doc-body { margin: 0; max-width: 780px; font-size: 16px; line-height: 1.9; }
.lt-doc-body h2 { scroll-margin-top: calc(var(--nav-h-full) + 20px); margin: 2.6em 0 .7em; padding-top: 1.1em; border-top: 2px dashed var(--rule-soft); font-size: clamp(21px, 2.4vw, 26px) !important; line-height: 1.35; }
.lt-doc-body > h2:first-of-type, .lt-doc-body .lt-doc-note + h2 { margin-top: 2em; }
.lt-doc-body p, .lt-doc-body li { color: var(--ink-2); }
.lt-doc-body ol, .lt-doc-body ul { padding-left: 1.4em; }
.lt-doc-body li { margin: .45em 0; padding-left: .2em; }
.lt-doc-body li::marker { color: var(--accent); font-weight: 700; }
.lt-doc-body em { font-style: normal; display: block; margin: 0 0 1.4em; padding: 10px 14px; border-left: 3px solid var(--rule-soft); color: var(--muted) !important; font-size: 14px; line-height: 1.7; }
.lt-doc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.lt-doc-meta span { padding: 4px 10px; border: 2px solid var(--rule); border-radius: 3px; font: 600 12.5px/1.4 var(--mono); color: var(--ink) !important; background: var(--paper-2) !important; }
.lt-prose .lt-doc-note { margin: 28px 0 8px; padding: 20px 22px; border: 2px solid var(--rule); border-radius: 4px; background: var(--card) !important; box-shadow: var(--hard-sm); }
.lt-prose .lt-doc-note > strong { display: block; margin-bottom: 8px; font: 700 12.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent) !important; }
.lt-doc-note ul { margin: 0; }
.lt-doc-body figure.table { margin: 1.4em 0; overflow-x: auto; border: 2px solid var(--rule); border-radius: 4px; background: var(--card) !important; }
.lt-doc-body table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.65; }
.lt-doc-body th { padding: 12px 16px; text-align: left; background: var(--paper-2) !important; border-bottom: 2px solid var(--rule); font-weight: 700; color: var(--ink) !important; white-space: nowrap; }
.lt-doc-body td { padding: 12px 16px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.lt-doc-body tr:last-child td { border-bottom: 0; }
@media (max-width: 991.98px) { .lt-doc { grid-template-columns: 1fr; gap: 28px; } .lt-doc-toc { position: static; max-height: none; } .lt-doc-toc ol { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .lt-doc-toc ol { grid-template-columns: 1fr; } .lt-doc-body th { white-space: normal; } }
.lt-doc-body td { vertical-align: top !important; }
.lt-doc-body figure.table table { margin: 0 !important; }

/* ============ 광고 칸(partials/ad): 728x90 · 336x280 · 468x60 ============ */
.lt-ad { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: fit-content; max-width: 100%; margin: 32px auto 0; }
.lt-ad[hidden] { display: none; }
/* 광고임을 알리는 표시: 광고 폭에 맞춘 가는 선 사이에 작은 글씨 */
.lt-ad-label { display: flex; align-items: center; gap: 10px; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lt-ad-label::before, .lt-ad-label::after { content: ""; flex: 1; border-top: 1px dashed var(--rule-soft); }
.lt-ad-unit { max-width: 100%; overflow: hidden; margin: 0 auto; border-radius: 4px; background: var(--paper-2); }
.lt-ad-unit[data-size="728x90"] { width: 728px; height: 90px; }
.lt-ad-unit[data-size="336x280"] { width: 336px; height: 280px; }
.lt-ad-unit[data-size="468x60"] { width: 468px; height: 60px; }
.lt-ad-unit > * { max-width: 100%; }
.lt-ad.lt-ad-end { margin: 8px auto 48px; }
.lt-bside .lt-ad { margin: 0 auto; }
.lt-panel .dashboard-container > .lt-ad { margin: 40px auto 8px; }
.lt-blog { grid-template-columns: minmax(0, 1fr) 336px; }
@media (max-width: 991.98px) { .lt-blog { grid-template-columns: 1fr; } }

/* ============ 신고 페이지(/report): 도메인 차단 제보 + 남용 신고 ============ */
.lt-report-sec { padding-top: 48px; }
.lt-report { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; }
.lt-rcard { padding: 32px; background: var(--card); border: 2px solid var(--rule); border-radius: 4px; box-shadow: var(--hard); }
.lt-rcard .lt-ic { margin-bottom: 18px; }
.lt-rcard .lt-kicker { margin: 0 0 6px; }
.lt-rcard h2 { margin: 0 0 10px; font-size: clamp(24px, 2.6vw, 32px); }
.lt-rcard-lede { margin: 0 0 24px; color: var(--ink-2); font-size: 15.5px; line-height: 1.75; }
.lt-rform { display: grid; gap: 16px; }
.lt-rfield label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
.lt-rfield label b { color: var(--accent); }
.lt-rfield .form-control { width: 100%; }
.lt-rfield textarea.form-control { resize: vertical; min-height: 110px; }
.lt-rerr { margin: 6px 0 0; color: var(--danger, #c0392b); font-size: 13px; }
.lt-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lt-rnote { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 12px 14px; border: 2px solid var(--rule); border-radius: 4px; background: var(--paper-2); font-size: 14.5px; }
.lt-rnote.is-ok i { color: var(--ok); }
.lt-rcard-sub { margin: 0 0 10px; font: 700 12.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lt-rlist { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.lt-rlist li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.lt-rlist li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 12px; height: 7px; border-left: 3px solid var(--ok); border-bottom: 3px solid var(--ok); transform: rotate(-45deg); }
.lt-rmail { width: 100%; padding: 12px 16px; font-size: 16px; }
.lt-rcard-foot { margin: 18px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.7; }
@media (max-width: 991.98px) { .lt-report { grid-template-columns: 1fr; } .lt-rcard { padding: 24px; } }


/* 사례 페이지별 대표 색: body 의 인라인 --lt-* 값을 사이트 색 토큰으로 연결한다(밝은/어두운 화면 각각) */
.lt-ui.lt-themed { --accent: var(--lt-a); --accent-2: var(--lt-a2); --mark: var(--lt-m); }
[data-theme="dark"] .lt-ui.lt-themed { --accent: var(--lt-ad); --accent-2: var(--lt-ad2); --mark: var(--lt-md); }

/* 색이 입혀지는 인라인 로고: 이미지 로고와 같은 높이 */
.lt-ui .nav .logo .lt-logo-inline svg { height: 38px; width: auto; display: block; }
@media (max-width: 575.98px) { .lt-ui .nav .logo .lt-logo-inline svg { height: 32px; } }

/* ============ 하단 고정 프로모션(커뮤니티 공유 이벤트) ============ */
.lt-promo {
    position: fixed; left: 50%; bottom: 22px; z-index: 1030; width: min(660px, calc(100% - 32px));
    display: flex; align-items: center; gap: 18px; padding: 16px 18px 16px 250px; min-height: 88px;
    color: #f6f0e2; border-radius: 16px; border: 1px solid rgba(246, 240, 226, .2);
    background: radial-gradient(120% 220% at 0% 0%, #6a2c91 0%, #3f1a63 45%, #1f0d33 100%);
    box-shadow: 0 22px 50px -14px rgba(20, 6, 40, .65), 0 2px 0 rgba(255, 255, 255, .08) inset;
    transform: translate(-50%, 150%); opacity: 0; pointer-events: none;
    transition: transform 1.7s cubic-bezier(.16, 1, .3, 1), opacity 1.1s ease;
}
.lt-promo[hidden] { display: none; }
.lt-promo.is-in { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.lt-promo.is-out { transform: translate(-50%, 150%); opacity: 0; transition-duration: .5s; pointer-events: none; }
.lt-promo-mascot { position: absolute; left: 8px; bottom: -1px; width: 236px; height: auto; filter: drop-shadow(0 8px 14px rgba(10, 3, 20, .5)); pointer-events: none; }
.lt-promo-text { flex: 1; min-width: 0; line-height: 1.3; }
.lt-promo-text p { margin: 0 0 3px; font-size: 13.5px; color: rgba(246, 240, 226, .72); }
.lt-promo-text strong { display: block; font: 900 22px/1.2 var(--serif, serif); letter-spacing: -.03em; white-space: nowrap; }
.lt-promo-text em, .lt-ui .lt-promo-text em { font-style: normal; background: none; color: #f2d58a; }
.lt-promo-go {
    flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 999px;
    background: #f6f0e2; color: #2a1247; font: 700 15px/1 var(--sans, sans-serif); cursor: pointer; text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.lt-ui .lt-promo-go, .lt-ui .lt-promo-go:hover, .lt-ui .lt-promo-go:visited { color: #2a1247; }
.lt-promo-go:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .5); }
.lt-promo-go i { font-size: 12px; transition: transform .2s; }
.lt-promo-go:hover i { transform: translateX(3px); }
.lt-promo-x { position: absolute; top: -10px; right: -8px; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgba(246, 240, 226, .3); border-radius: 50%; background: #2a1247; color: #f6f0e2; font-size: 11px; cursor: pointer; }
.lt-promo-x:hover { background: #f6f0e2; color: #2a1247; }
@media (max-width: 640px) {
    .lt-promo { left: 50%; width: calc(100% - 32px); bottom: 14px; padding: 14px 16px; gap: 12px; }
    .lt-promo-mascot { display: none; }
    .lt-promo-text strong { font-size: 20px; }
    .lt-promo-go { padding: 9px 14px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .lt-promo { transform: translate(-50%, 0); transition: opacity 1s ease; } .lt-promo.is-out { transition-duration: .2s; } }