/* ================================================================
   텐비 표면 규칙.

   토큰(tokens.css)이 "값"을 정한다면 여기는 "모양"을 정한다.
   배경 한 겹, 카드 한 종류, 섹션 제목 한 종류. 그것뿐이다.

   왜 필요했나: 화면마다 배경이 bg-slate-50 · bg-white · bg-gray-100 으로 갈리고
   카드 테두리가 border-slate-100 · 200 · 300 으로 갈려 있었다. 색은 같은 계열인데
   조합이 달라서, 제품을 옮기면 "비슷한데 다른 사이트" 느낌이 났다.
   폭과 머리말을 맞춰도 이게 어긋나면 한 제품으로 안 읽힌다.

   쓰는 법
       <div class="t-page">          바탕. 껍데기가 이미 깔면 생략
         <section class="t-sec">
           <h2 class="t-sec-title">제목</h2>
           <div class="t-card"> ... </div>
         </section>
       </div>

   Tailwind 클래스와 섞어 써도 된다. 이 파일은 배경·테두리·모서리·그림자만 정하고
   여백과 배치는 건드리지 않는다. 그래야 기존 화면에 얹어도 레이아웃이 안 흔들린다.

   vite 를 안 타는 이유는 tokens.css 머리말에 적어 뒀다(강의실이 번들을 피한다).
   ================================================================ */

/* ── 바탕 ────────────────────────────────────────────────────
   본문 바탕은 한 겹 내려간 회색이고 그 위에 흰 카드가 뜬다.
   흰 바탕에 흰 카드를 얹으면 테두리 하나로만 구분돼 납작해 보인다. */
.t-page {
    background: var(--t-bg, #f8fafc);
    color: var(--t-fg, #0f172a);
    min-height: 100%;
}

/* ── 카드 ────────────────────────────────────────────────────
   한 종류만 둔다. 강조가 필요하면 안쪽에서 하지 테두리 색을 바꾸지 않는다.
   테두리 색이 화면마다 다르면 그게 제일 먼저 눈에 띈다. */
.t-card {
    background: var(--t-surface, #fff);
    border: 1px solid var(--t-line, #e2e8f0);
    border-radius: var(--t-r-lg, 12px);
}

/* 누를 수 있는 카드. 누를 수 없는 것에는 붙이지 않는다.
   손이 올라갔을 때 반응하는지가 "눌러도 되는가"의 유일한 신호다. */
.t-card-link {
    display: block;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.t-card-link:hover {
    border-color: var(--t-line-strong, #cbd5e1);
    box-shadow: var(--t-shadow, 0 2px 8px rgba(15, 23, 42, .08));
    transform: translateY(-1px);
}

/* 카드 안을 나누는 줄. 머리와 몸을 가른다. */
.t-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--t-sp-3, 12px);
    padding: 13px 16px;
    border-bottom: 1px solid var(--t-line, #e2e8f0);
    font-size: var(--t-fs-md, 14px);
    font-weight: var(--t-fw-heavy, 800);
    color: var(--t-fg, #0f172a);
}
.t-card-head a {
    font-size: var(--t-fs-xs, 12px);
    font-weight: var(--t-fw-bold, 700);
    color: var(--t-brand-strong, #2563eb);
    text-decoration: none;
    white-space: nowrap;
}
.t-card-body { padding: 16px; }

/* ── 섹션 ────────────────────────────────────────────────────
   화면은 섹션의 나열이다. 섹션 사이 간격과 제목 크기가 화면마다 다르면
   같은 리듬으로 안 읽힌다. */
.t-sec { margin-bottom: var(--t-sp-10, 40px); }
.t-sec:last-child { margin-bottom: 0; }

.t-sec-title {
    margin: 0 0 var(--t-sp-4, 16px);
    font-size: var(--t-fs-2xl, 20px);
    font-weight: var(--t-fw-heavy, 800);
    letter-spacing: -.02em;
    color: var(--t-fg, #0f172a);
    word-break: keep-all;
}
/* 제목 옆 보조 설명. 제목 아래 줄이 아니라 옆에 붙는다. */
.t-sec-sub {
    margin: -8px 0 var(--t-sp-4, 16px);
    font-size: var(--t-fs-sm, 13px);
    color: var(--t-fg-3, #94a3b8);
}
/* 제목 줄에 "전체 보기" 같은 것이 붙을 때 */
.t-sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--t-sp-3, 12px);
    margin-bottom: var(--t-sp-4, 16px);
    flex-wrap: wrap;
}
.t-sec-head .t-sec-title { margin-bottom: 0; }

/* ── 본문 폭 ──────────────────────────────────────────────────
   사다리는 화면 규칙 1-10 에 있다. 여기서는 그것을 쓰기 쉽게 감싸 둔다. */
.t-wrap {
    width: 100%;
    max-width: var(--t-w-wide, 1280px);
    margin: 0 auto;
    padding-left: var(--t-sp-5, 20px);
    padding-right: var(--t-sp-5, 20px);
}
.t-wrap-base { max-width: var(--t-w-base, 1024px); }
.t-wrap-form { max-width: var(--t-w-form, 768px); }

/* ─── 즉시 뜨는 툴팁 ──────────────────────────────────────────────
 *
 * 브라우저 기본 title 속성은 1초 넘게 기다려야 뜬다. 지표 이름 옆의 물음표는
 * "이게 무슨 기준이지"를 그 자리에서 풀어주려고 두는 것이라, 기다리게 하면
 * 안 보고 지나간다. 그래서 직접 그린다.
 *
 * 빌드를 타지 않는 곳(public/css)에 둔다. Tailwind 유틸리티로 쓰면 그 클래스가
 * 처음 등장한 커밋에서 CSS 를 다시 빌드해야 하는데, 블레이드만 바뀐 배포는
 * 빌드를 돌리지 않아 규칙 없이 나간다.
 *
 * 마크업:
 *   <span class="tt" tabindex="0"><i class="fa-regular fa-circle-question"></i>
 *     <span class="tt-box">설명</span></span>
 * tabindex 를 두는 이유는 키보드·터치에서도 열리게 하려는 것이다(:focus-within).
 */
.tt { position: relative; display: inline-flex; align-items: center; color: #cbd5e1; cursor: help; }
.tt:hover, .tt:focus, .tt:focus-within { color: #64748b; }
.tt-box {
    position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
    width: max-content; max-width: 260px; padding: 8px 10px; border-radius: 8px;
    background: #0f172a; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.55;
    text-align: left; white-space: normal; z-index: 60; pointer-events: none;
    opacity: 0; visibility: hidden; transition: opacity .1s linear;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .18);
}
.tt:hover .tt-box, .tt:focus .tt-box, .tt:focus-within .tt-box { opacity: 1; visibility: visible; }
/* 화면 왼쪽 끝에 붙은 툴팁이 잘리지 않게, 필요할 때 붙일 수 있는 변형 */
.tt-box.tt-left { left: 0; transform: none; }


/* Alpine 이 붙기 전까지 감춘다. 이게 없으면 접어둔 블록이 한 번 펼쳐졌다 접힌다.
   빌드 CSS 에는 없고(x-cloak 은 유틸이 아니라 속성이다) 여기서만 정의한다. */
[x-cloak] { display: none !important; }