/* ══ 글자 크기 기준 (2026-08-20 소담 요청) ══════════════════════════
   소담: *"글자크기가 작은게 좀 많이 보여. 표준과 기준을 만들어서 좀 다듬을 필요가 있어보여."*

   🔴 **기준이 없었다.** 세어 보니 선언 426개에 크기가 **29가지**였고,
      그중 **넷에 하나(108개)가 13px 미만**이었다.
      10.5 · 12.5 · 12.8 · 13.5 · 13.8 · 14.5 · 15.5 — 0.5px 단위가 여덟 가지.
      그때그때 「조금만 줄이자」 로 손댄 흔적이다.

   ── 사다리 (이 아홉 개만 쓴다) ────────────────────────────────
     12px   딱지·꼬리표          「무료 포함」 「3장」 「지금」  ← **글자의 최저선**
     13px   보조 설명            도움말 · 부연 · 기한
     14px   본문                 카드 안 설명글
     15px   본문(크게)           읽으라고 있는 글 · 목록 항목
     16px   작은 제목            입력칸 글씨(🔴 16px 아래면 사파리가 화면을 확대한다)
     18px   카드 제목
     20px   절 제목
     22px   화면 제목
     24px   큰 제목
     그 위(32·40·120…)는 숫자·장식이라 사다리 밖이다.

   ── 🔴 지키는 규칙 ────────────────────────────────────────────
     ① **0.5px 를 쓰지 않는다.** 「조금만 줄이자」가 기준을 무너뜨린 원인이다.
        작아 보이면 크기를 깎지 말고 **자리를 넓히거나 글을 줄인다.**
     ② **12px 아래로 내려가지 않는다.** 단, **기호는 글자가 아니다** —
        ▾ 화살표 · 점 · 동그라미 안의 K/N/G 는 이 규칙 밖이다(아래 목록).
     ③ **입력칸은 16px 아래로 내리지 않는다.** 사파리가 확대해 버린다.
        (이 규칙은 원래 있었다 — 8/7 모바일 검토)

   ── 기호라서 크기를 안 맞추는 것들 ────────────────────────────
     .lesson-dot · .materials-caret · .coupon-fold-caret · .auth-method-mark
     🔸 글자가 아니라 표시다. 여기에 사다리를 들이대면 오히려 어색해진다.

   🔸 값은 아래 변수로도 둔다. 새 규칙을 쓸 때 숫자 대신 이것을 쓰면
      다음 사람이 사다리를 찾아보지 않아도 된다. */
:root {
  --fs-tag: 12px;    /* 딱지·꼬리표 */
  --fs-sub: 13px;    /* 보조 설명 */
  --fs-body: 14px;   /* 본문 */
  --fs-read: 15px;   /* 읽는 글 */
  --fs-input: 16px;  /* 입력칸 — 이 아래로 내리지 말 것 */
  --fs-card: 18px;   /* 카드 제목 */
  --fs-sec: 20px;    /* 절 제목 */
  --fs-page: 22px;   /* 화면 제목 */
  --fs-hero: 24px;   /* 큰 제목 */
}

/* 글꼴을 둘로 나눠 둔다 (2026-08-07).

   🔴 전에는 한 덩어리 2MB 였다. 한글 11,172 자가 다 들어 있어서인데,
      보통 화면에 나오는 글자는 그중 2,350 자뿐이다.
      휴대폰으로 처음 들어온 손님이 2MB 를 기다렸다.

   글자를 **버린 것이 아니다.** 11,172 자가 그대로 다 있고, 두 파일로 나눴을 뿐이다.
   브라우저는 화면에 실제로 나온 글자가 든 파일만 받는다(unicode-range 가 그 표지판이다).

     흔한 것  687KB   신문·책이 쓰는 2,350 자 + 라틴·기호   ← 거의 모든 화면이 이것만 받는다
     드문 것 1,317KB   나머지 8,822 자                      ← 별명에 '쀼' 같은 글자가 있을 때만

   그래서 네모(두부)가 뜰 일이 없다. 아래 긴 번호 줄은 손으로 적은 것이 아니라
   기계가 뽑은 것이다 — 고치지 말 것. */
@font-face {
  font-family: "Pretendard";
  src: url("./assets/fonts/PretendardVariable-common.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("./assets/fonts/PretendardVariable-rare.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  unicode-range: U+AC02-AC03,U+AC05-AC06,U+AC0B-AC0F,U+AC18,U+AC1E-AC1F,U+AC21-AC23,U+AC25-AC2B,U+AC2E,U+AC32-AC37,U+AC3A-AC3B,U+AC3D-AC3F,U+AC41-AC4A,U+AC4C,U+AC4E-AC53,U+AC55-AC57,U+AC59-AC5B,U+AC5D-AC6F,U+AC72-AC73,U+AC75-AC76,U+AC79,U+AC7B-AC7F,U+AC82,U+AC87-AC88,U+AC8D-AC8F,U+AC91-AC93,U+AC95-AC9B,U+AC9E,U+ACA2-ACA7,U+ACAB,U+ACAD-ACAE,U+ACB1-ACB7,U+ACBA,U+ACBE-ACC0,U+ACC2-ACC3,U+ACC5-ACC7,U+ACC9-ACCB,U+ACCD-ACD4,U+ACD6,U+ACD8-ACDF,U+ACE2-ACE3,U+ACE5-ACE6,U+ACE9,U+ACEB,U+ACED-ACEE,U+ACF2,U+ACF4,U+ACF7-ACFB,U+ACFE-ACFF,U+AD01-AD03,U+AD05,U+AD07-AD0B,U+AD0E,U+AD10,U+AD12-AD17,U+AD19-AD1B,U+AD1D-AD1F,U+AD21-AD28,U+AD2A-AD2B,U+AD2E-AD33,U+AD36-AD37,U+AD39-AD3B,U+AD3D-AD43,U+AD46,U+AD48,U+AD4A-AD4F,U+AD51-AD53,U+AD55-AD57,U+AD59-AD60,U+AD62,U+AD64-AD6B,U+AD6E-AD6F,U+AD71-AD72,U+AD77-AD7A,U+AD7E,U+AD80,U+AD83-AD87,U+AD8A-AD8B,U+AD8D-AD8F,U+AD91-AD9B,U+AD9E-ADA3,U+ADA5-ADB6,U+ADB8-ADBF,U+ADC2-ADC3,U+ADC5-ADC7,U+ADC9-ADCF,U+ADD2,U+ADD4-ADDB,U+ADDD-ADDF,U+ADE1-ADE3,U+ADE5-ADF7,U+ADFA-ADFB,U+ADFD-ADFE,U+AE02-AE07,U+AE0A,U+AE0C,U+AE0E-AE13,U+AE15-AE2F,U+AE32-AE33,U+AE35-AE36,U+AE39,U+AE3B-AE3F,U+AE42,U+AE44,U+AE47-AE49,U+AE4B,U+AE4F,U+AE51-AE53,U+AE55,U+AE57-AE5B,U+AE5E,U+AE62-AE64,U+AE66-AE67,U+AE6A-AE6B,U+AE6D-AE6F,U+AE71-AE77,U+AE7A,U+AE7E-AE83,U+AE86-AE8B,U+AE8D-AEBB,U+AEBF,U+AEC1-AEC3,U+AEC5-AECB,U+AECE,U+AED2-AED7,U+AEDA-AEDB,U+AEDD-AEE7,U+AEE9-AEEA,U+AEEC,U+AEEE-AEF3,U+AEF5-AEF7,U+AEF9-AEFB,U+AEFD-AF06,U+AF09-AF0C,U+AF0E-AF0F,U+AF11-AF2B,U+AF2E-AF2F,U+AF31,U+AF33,U+AF35-AF3B,U+AF3E,U+AF40,U+AF44-AF47,U+AF4A-AF4F,U+AF51-AF5B,U+AF5E-AF63,U+AF66-AF78,U+AF7A-AF7F,U+AF81-AF83,U+AF85-AF87,U+AF89-AF8F,U+AF92-AF94,U+AF96-AF9B,U+AF9D-AFB7,U+AFBA-AFBB,U+AFBD-AFBF,U+AFC1-AFC6,U+AFCA,U+AFCC,U+AFCF-AFD3,U+AFD5-AFDB,U+AFDD-AFE7,U+AFEA-AFEF,U+AFF2-AFF3,U+AFF5-AFF7,U+AFF9-AFFF,U+B002-B003,U+B005-B00B,U+B00D-B00F,U+B011-B013,U+B015-B01B,U+B01E-B027,U+B029-B043,U+B046-B047,U+B049,U+B04B,U+B04D,U+B04F-B052,U+B056,U+B058,U+B05A-B05C,U+B05E-B07B,U+B07E-B07F,U+B081-B083,U+B085-B08B,U+B08E,U+B090,U+B092-B097,U+B09B,U+B09D-B09E,U+B0A3-B0A7,U+B0AA,U+B0B0,U+B0B2,U+B0B6-B0B7,U+B0B9-B0BB,U+B0BD-B0C3,U+B0C6,U+B0CA-B0CF,U+B0D2-B0D3,U+B0D5-B0D7,U+B0D9-B0DF,U+B0E1-B0E4,U+B0E6-B107,U+B10A,U+B10D-B10F,U+B111,U+B114-B117,U+B11A,U+B11E-B122,U+B126-B127,U+B129-B12B,U+B12D-B133,U+B136,U+B13A-B13F,U+B142-B143,U+B145-B147,U+B149-B14F,U+B152-B153,U+B156-B157,U+B159-B15B,U+B15D-B15F,U+B161-B177,U+B17A-B17B,U+B17D-B17F,U+B181,U+B183-B187,U+B18A,U+B18C,U+B18E-B191,U+B195-B197,U+B199-B19B,U+B19D-B1A7,U+B1A9-B1CB,U+B1CD-B1CF,U+B1D1-B1D3,U+B1D5-B1DB,U+B1DE,U+B1E0-B1E7,U+B1EA-B1EB,U+B1ED-B1EF,U+B1F1-B1F8,U+B1FA,U+B1FC,U+B1FE-B203,U+B206-B207,U+B209-B20A,U+B20D-B213,U+B216,U+B218,U+B21A-B21F,U+B221-B233,U+B235-B23B,U+B23D-B257,U+B259-B25B,U+B25D-B25F,U+B261-B267,U+B26A-B273,U+B276-B27B,U+B27D-B283,U+B286-B288,U+B28A-B28F,U+B292-B293,U+B295-B297,U+B29B-B29F,U+B2A2,U+B2A4,U+B2A7-B2A9,U+B2AB,U+B2AD-B2AF,U+B2B1-B2B3,U+B2B5-B2C7,U+B2CA-B2CB,U+B2CD-B2CF,U+B2D1,U+B2D3-B2D7,U+B2DA,U+B2DC,U+B2DE-B2E1,U+B2E3,U+B2E7,U+B2E9-B2EA,U+B2F0-B2F2,U+B2F6,U+B2FC-B2FE,U+B302-B303,U+B305-B307,U+B309-B30F,U+B312,U+B316-B31B,U+B31D-B353,U+B357,U+B359-B35A,U+B35D,U+B360-B363,U+B366,U+B368,U+B36A,U+B36C-B36D,U+B36F,U+B372-B373,U+B375-B377,U+B379-B37F,U+B382,U+B386-B38B,U+B38D-B38F,U+B391-B393,U+B395-B39F,U+B3A2-B3A7,U+B3A9-B3AB,U+B3AD-B3C3,U+B3C6-B3C7,U+B3C9-B3CA,U+B3CD,U+B3CF,U+B3D1-B3D3,U+B3D6,U+B3D8,U+B3DA,U+B3DC,U+B3DE-B3DF,U+B3E1-B3E3,U+B3E5-B3E7,U+B3E9-B3FB,U+B3FD-B40F,U+B411-B417,U+B419-B41B,U+B41D-B41F,U+B421-B427,U+B42A,U+B42C-B433,U+B435-B44F,U+B452-B453,U+B455-B457,U+B459-B45F,U+B462,U+B464,U+B466-B46B,U+B46D-B47F,U+B481-B487,U+B489-B49C,U+B49E-B4A3,U+B4A5-B4A7,U+B4A9-B4AB,U+B4AD-B4B4,U+B4B6,U+B4B8,U+B4BA-B4BF,U+B4C1-B4C3,U+B4C5-B4C7,U+B4C9-B4CF,U+B4D1-B4D4,U+B4D6-B4DB,U+B4DE-B4DF,U+B4E1-B4E2,U+B4E5,U+B4E7-B4EB,U+B4EE,U+B4F0,U+B4F2-B4F7,U+B4F9-B513,U+B516-B517,U+B519-B51A,U+B51D-B523,U+B526,U+B52B-B52F,U+B532-B533,U+B535-B537,U+B539-B53F,U+B542,U+B546-B54A,U+B54E-B54F,U+B551-B553,U+B555-B55B,U+B55E,U+B562-B59F,U+B5A2-B5A3,U+B5A5-B5A7,U+B5A9,U+B5AC-B5AF,U+B5B2,U+B5B6-B5BA,U+B5BE-B5BF,U+B5C1-B5C3,U+B5C5-B5CB,U+B5CE,U+B5D2-B5D7,U+B5D9-B5EB,U+B5ED-B60F,U+B612-B613,U+B615-B617,U+B619-B624,U+B626-B62B,U+B62D-B633,U+B635-B647,U+B649-B663,U+B665-B667,U+B669-B69B,U+B69E-B69F,U+B6A1-B6A3,U+B6A5-B6AA,U+B6AD-B6B0,U+B6B2-B6D3,U+B6D5-B6EF,U+B6F1-B6F3,U+B6F5-B6F7,U+B6F9-B6FF,U+B702-B704,U+B706-B727,U+B72A-B72B,U+B72D-B72E,U+B731-B737,U+B73A,U+B73C-B743,U+B745-B747,U+B749-B74B,U+B74D-B753,U+B756-B75F,U+B761-B763,U+B765-B767,U+B769-B76F,U+B772,U+B774,U+B776-B77B,U+B77E-B77F,U+B781-B783,U+B785-B78B,U+B78E,U+B793-B795,U+B79A-B79B,U+B79D-B79F,U+B7A1-B7A7,U+B7AA,U+B7AE-B7B3,U+B7B6-B7B7,U+B7B9-B7C6,U+B7C8,U+B7CA-B7EB,U+B7EE-B7EF,U+B7F1-B7F3,U+B7F5-B7FB,U+B7FE,U+B802-B806,U+B80A-B80B,U+B80D-B80F,U+B811-B817,U+B81A,U+B81C,U+B81E-B823,U+B826-B827,U+B829-B82B,U+B82D-B833,U+B836,U+B83A-B83F,U+B841-B843,U+B845-B850,U+B852,U+B854-B85B,U+B85E-B85F,U+B861-B863,U+B865-B86B,U+B86E,U+B870,U+B872-B877,U+B879-B87B,U+B87D-B88C,U+B88E-B8A7,U+B8A9-B8AF,U+B8B1-B8B3,U+B8B5-B8B7,U+B8B9-B8BF,U+B8C2,U+B8C4,U+B8C6-B8CB,U+B8CD-B8CF,U+B8D1-B8D3,U+B8D5-B8DC,U+B8DE,U+B8E0,U+B8E2-B8E7,U+B8EA-B8EB,U+B8ED-B8EF,U+B8F1-B8F7,U+B8FA,U+B8FC,U+B8FE-B903,U+B905-B917,U+B919-B91F,U+B921-B93B,U+B93E-B93F,U+B941-B943,U+B945-B94B,U+B94D-B94E,U+B950,U+B952-B957,U+B95A-B95B,U+B95D-B95F,U+B961-B967,U+B96A,U+B96C,U+B96E-B973,U+B976-B977,U+B979-B97B,U+B97D-B983,U+B986,U+B988,U+B98B-B98C,U+B98F-B9AB,U+B9AE-B9AF,U+B9B1-B9B3,U+B9B5-B9BB,U+B9BE,U+B9C0,U+B9C2-B9C7,U+B9CA-B9CB,U+B9CD,U+B9D3-B9D7,U+B9DA,U+B9DC,U+B9DF-B9E0,U+B9E2,U+B9E6-B9E7,U+B9E9-B9EB,U+B9ED-B9F3,U+B9F6,U+B9FB-B9FF,U+BA02-BA07,U+BA09-BA14,U+BA16-BA37,U+BA3A-BA3B,U+BA3D-BA3F,U+BA41,U+BA43-BA47,U+BA4A,U+BA4C,U+BA4F-BA52,U+BA56-BA57,U+BA59-BA5B,U+BA5D-BA63,U+BA66,U+BA6A-BA6F,U+BA72-BA73,U+BA75-BA77,U+BA79-BA82,U+BA86,U+BA88-BA8B,U+BA8D-BAA7,U+BAAA,U+BAAD-BAAF,U+BAB1,U+BAB3-BAB7,U+BABA,U+BABC,U+BABE-BAC3,U+BAC5-BAC7,U+BAC9-BAD7,U+BADA-BAFB,U+BAFD-BAFF,U+BB01-BB03,U+BB05-BB0C,U+BB0E,U+BB10,U+BB12-BB17,U+BB19-BB1B,U+BB1D-BB1F,U+BB21-BB28,U+BB2A,U+BB2C-BB33,U+BB37,U+BB39-BB3A,U+BB3F-BB43,U+BB46,U+BB48,U+BB4A-BB4C,U+BB4E,U+BB51-BB53,U+BB55-BB57,U+BB59-BB60,U+BB62,U+BB64-BB6B,U+BB6D-BB87,U+BB89-BB8B,U+BB8D-BB8F,U+BB91-BBA3,U+BBA5-BBA7,U+BBA9-BBAB,U+BBAD-BBB3,U+BBB5-BBB6,U+BBB8-BBBF,U+BBC1-BBC3,U+BBC5-BBC7,U+BBC9-BBCF,U+BBD1-BBD2,U+BBD4-BBF7,U+BBFA-BBFB,U+BBFD-BBFE,U+BC01,U+BC03-BC07,U+BC0A,U+BC0E,U+BC10,U+BC12-BC13,U+BC19-BC1A,U+BC20-BC23,U+BC26,U+BC28,U+BC2A-BC2C,U+BC2E-BC2F,U+BC32-BC33,U+BC35-BC37,U+BC39-BC3F,U+BC42,U+BC46-BC48,U+BC4A-BC4B,U+BC4E-BC4F,U+BC51-BC5C,U+BC5E-BC83,U+BC86-BC87,U+BC89-BC8A,U+BC8D,U+BC8F-BC93,U+BC96,U+BC98,U+BC9B-BC9F,U+BCA2-BCA3,U+BCA5-BCA6,U+BCA9-BCAF,U+BCB2,U+BCB6-BCBB,U+BCBE-BCBF,U+BCC1-BCC3,U+BCC5-BCCC,U+BCCE,U+BCD2-BCD4,U+BCD6-BCD7,U+BCD9-BCDB,U+BCDD-BCF3,U+BCF7,U+BCF9-BCFB,U+BCFD-BD03,U+BD06,U+BD08,U+BD0A-BD0F,U+BD11-BD13,U+BD15-BD23,U+BD25-BD2B,U+BD2D-BD3F,U+BD41-BD47,U+BD4A-BD4B,U+BD4D-BD4F,U+BD51-BD57,U+BD5A-BD63,U+BD65-BD67,U+BD69-BD7F,U+BD82-BD83,U+BD85-BD86,U+BD8B-BD8F,U+BD92,U+BD94,U+BD96-BD98,U+BD9B,U+BD9D-BDA3,U+BDA5-BDAF,U+BDB1-BDB7,U+BDB9-BDD3,U+BDD6-BDD7,U+BDD9-BDDB,U+BDDD-BDE8,U+BDEA-BDEF,U+BDF1-BDF3,U+BDF5-BDF7,U+BDF9-BDFF,U+BE01-BE02,U+BE04,U+BE06-BE0B,U+BE0E-BE0F,U+BE11-BE13,U+BE15-BE1B,U+BE1E,U+BE20-BE43,U+BE46-BE47,U+BE49-BE4B,U+BE4D,U+BE4F-BE53,U+BE56,U+BE58,U+BE5C-BE5F,U+BE62-BE63,U+BE65-BE67,U+BE69,U+BE6B-BE6F,U+BE72,U+BE76-BE7A,U+BE7E-BE7F,U+BE81-BE83,U+BE85-BE8B,U+BE8E,U+BE92-BE97,U+BE9A-BEA7,U+BEA9-BECF,U+BED2-BED3,U+BED5-BED6,U+BED9-BEDF,U+BEE1-BEE2,U+BEE6-BEEB,U+BEED-BF00,U+BF02-BF07,U+BF0A-BF17,U+BF1A,U+BF1E-BF3F,U+BF42-BF43,U+BF45-BF47,U+BF49-BF4F,U+BF52-BF54,U+BF56-BF93,U+BF95-BFAF,U+BFB1-BFC4,U+BFC6-BFCB,U+BFCE-BFCF,U+BFD1-BFD3,U+BFD5-BFDB,U+BFDD-BFDE,U+BFE0,U+BFE2-C03B,U+C03D-C050,U+C052-C057,U+C059-C05B,U+C05D-C05F,U+C061-C067,U+C06A-C08F,U+C092-C093,U+C095-C097,U+C099-C09F,U+C0A2,U+C0A4,U+C0A6-C0AB,U+C0AE,U+C0B1-C0B2,U+C0B7-C0BB,U+C0BE,U+C0C2-C0C4,U+C0C6-C0C7,U+C0CA-C0CB,U+C0CD-C0CF,U+C0D1-C0D7,U+C0DA,U+C0DE-C0E3,U+C0E6-C0E7,U+C0E9-C0EB,U+C0ED-C0F3,U+C0F6,U+C0F8,U+C0FA-C0FF,U+C101-C103,U+C105-C107,U+C109-C10F,U+C111-C114,U+C116-C11B,U+C121-C122,U+C125,U+C128-C12B,U+C12E,U+C132-C135,U+C137,U+C13A-C13B,U+C13D-C13F,U+C141-C147,U+C14A,U+C14E-C153,U+C156-C157,U+C159-C15B,U+C15D-C163,U+C166,U+C16A-C16F,U+C171-C173,U+C175-C177,U+C179-C184,U+C186-C18B,U+C18F,U+C191-C193,U+C195,U+C197-C19B,U+C19E,U+C1A0,U+C1A2-C1A4,U+C1A6-C1A7,U+C1AA-C1AB,U+C1AD-C1AF,U+C1B1-C1BC,U+C1BE-C1C3,U+C1C5-C1C7,U+C1C9-C1CB,U+C1CD-C1D3,U+C1D5-C1D6,U+C1D9-C1DF,U+C1E1-C1E3,U+C1E5-C1E7,U+C1E9-C1EF,U+C1F2,U+C1F4-C1FB,U+C1FE-C1FF,U+C201-C203,U+C205-C20B,U+C20E,U+C210,U+C212-C217,U+C21A-C21B,U+C21D-C21E,U+C221-C227,U+C22A,U+C22C,U+C22E,U+C230,U+C233,U+C235-C247,U+C249-C24F,U+C252-C253,U+C255-C257,U+C259-C25F,U+C261-C264,U+C266-C26B,U+C26E-C26F,U+C271-C273,U+C275-C27B,U+C27E,U+C280,U+C282-C287,U+C28A-C28F,U+C291-C297,U+C299-C29A,U+C29C,U+C29E-C2A3,U+C2A6-C2A7,U+C2A9-C2AB,U+C2AE-C2B3,U+C2B6,U+C2B8,U+C2BA-C2DB,U+C2DE-C2DF,U+C2E1-C2E2,U+C2E5-C2EA,U+C2EE,U+C2F0,U+C2F2-C2F5,U+C2F7,U+C2FA,U+C2FD-C2FF,U+C301-C307,U+C30A-C30B,U+C30E-C312,U+C316-C317,U+C319-C31B,U+C31D-C323,U+C326-C327,U+C32A-C344,U+C346-C367,U+C36A-C36B,U+C36D-C36F,U+C371,U+C373-C377,U+C37A-C37B,U+C37E-C383,U+C385-C387,U+C389-C38B,U+C38D-C3BF,U+C3C1-C3D7,U+C3DA-C3DB,U+C3DD-C3DE,U+C3E1,U+C3E3-C3E7,U+C3EA-C3EC,U+C3EE-C3F3,U+C3F6-C3F7,U+C3F9-C407,U+C409-C40F,U+C411-C423,U+C425-C42B,U+C42D-C42F,U+C431-C433,U+C435-C43B,U+C43E-C447,U+C449-C463,U+C466-C467,U+C469-C46B,U+C46D-C473,U+C476-C478,U+C47A-C47F,U+C481-C493,U+C495-C49B,U+C49D-C4B7,U+C4B9-C4BB,U+C4BD-C4E8,U+C4EA-C4EF,U+C4F2-C4F3,U+C4F5-C4F7,U+C4F9,U+C4FB-C4FE,U+C502-C50B,U+C50D-C50F,U+C511-C513,U+C515-C51B,U+C51D-C527,U+C52A-C52B,U+C52D-C52F,U+C531-C537,U+C53A,U+C53C,U+C53E-C543,U+C546-C547,U+C54B,U+C54F-C552,U+C556,U+C55A-C55C,U+C55F,U+C562-C563,U+C565-C567,U+C569-C56F,U+C572,U+C576-C57B,U+C57E-C57F,U+C581-C583,U+C585-C586,U+C588-C58B,U+C58E,U+C590,U+C592-C594,U+C596,U+C599-C59B,U+C59D-C59F,U+C5A1-C5A8,U+C5AA-C5B3,U+C5B6-C5B7,U+C5BA,U+C5BF-C5C3,U+C5CB,U+C5CD,U+C5CF,U+C5D2-C5D3,U+C5D5-C5D7,U+C5D9-C5DF,U+C5E2,U+C5E4,U+C5E6-C5EB,U+C5EF,U+C5F1-C5F3,U+C5F5,U+C5F8-C5FB,U+C602-C604,U+C609-C60B,U+C60D-C60F,U+C611-C617,U+C61A,U+C61D-C623,U+C626-C627,U+C629-C62B,U+C62F,U+C631-C632,U+C636,U+C638,U+C63A,U+C63C-C63F,U+C642-C643,U+C645-C647,U+C649-C64F,U+C652,U+C656-C65B,U+C65E-C65F,U+C661-C66B,U+C66D-C66E,U+C670,U+C672-C677,U+C67A-C67B,U+C67D-C67F,U+C681-C687,U+C68A,U+C68C,U+C68E-C693,U+C696-C697,U+C699-C69B,U+C69D-C6A3,U+C6A6,U+C6A8,U+C6AA-C6AF,U+C6B2-C6B3,U+C6B5-C6B7,U+C6BB-C6BF,U+C6C2,U+C6C4,U+C6C6-C6CB,U+C6CE-C6CF,U+C6D1-C6D3,U+C6D5-C6DB,U+C6DE-C6DF,U+C6E2-C6E7,U+C6EA-C6EB,U+C6ED-C6EF,U+C6F1-C6F7,U+C6FA-C6FC,U+C6FE-C703,U+C706-C707,U+C709-C70B,U+C70D-C713,U+C716,U+C718,U+C71A-C71F,U+C722-C723,U+C725-C727,U+C729-C72F,U+C732,U+C734,U+C736,U+C738-C73B,U+C73E-C73F,U+C741-C743,U+C745-C749,U+C74B,U+C74E,U+C750,U+C759-C75B,U+C75D-C75F,U+C761-C767,U+C769-C76A,U+C76C-C773,U+C776-C777,U+C779-C77B,U+C77F-C782,U+C786,U+C78B-C78D,U+C78F,U+C792-C793,U+C795,U+C799,U+C79B-C79F,U+C7A2,U+C7A7-C7AB,U+C7AE-C7AF,U+C7B1-C7B3,U+C7B5-C7BB,U+C7BE,U+C7C2-C7C7,U+C7CA-C7CB,U+C7CD,U+C7CF,U+C7D1-C7D7,U+C7D9-C7DC,U+C7DE-C7E3,U+C7E5-C7E7,U+C7E9-C7EB,U+C7ED-C7FF,U+C802-C803,U+C805-C807,U+C809,U+C80B-C80F,U+C812,U+C814,U+C817-C81B,U+C81E-C81F,U+C821-C823,U+C825-C82B,U+C82E,U+C830,U+C832-C837,U+C839-C83B,U+C83D-C83F,U+C841-C847,U+C84A-C84B,U+C84E-C853,U+C855-C86F,U+C872-C873,U+C875-C877,U+C879,U+C87B-C87F,U+C882,U+C884,U+C888-C88A,U+C88E-C893,U+C895-C89C,U+C89E,U+C8A0,U+C8A2-C8A7,U+C8A9-C8BB,U+C8BE-C8C3,U+C8C5-C8C7,U+C8C9-C8CB,U+C8CD-C8D3,U+C8D6,U+C8D8,U+C8DA-C8DF,U+C8E2-C8E3,U+C8E5-C8F4,U+C8F6-C8FB,U+C8FE-C8FF,U+C901-C903,U+C907-C90B,U+C90E,U+C910,U+C912-C917,U+C919-C92B,U+C92D-C933,U+C935-C94F,U+C952-C953,U+C955-C957,U+C959-C95F,U+C962,U+C964-C96B,U+C96D-C96F,U+C971-C973,U+C975-C97B,U+C97D-C987,U+C98A-C98B,U+C98D-C98F,U+C991-C997,U+C99A,U+C99C,U+C99E-C9BF,U+C9C2-C9C3,U+C9C5-C9C6,U+C9C9,U+C9CB-C9CF,U+C9D2,U+C9D4,U+C9D7-C9D8,U+C9DB,U+C9DE-C9DF,U+C9E1,U+C9E3,U+C9E5-C9E6,U+C9E8-C9EB,U+C9EE,U+C9F2-C9F7,U+C9FA-C9FB,U+C9FD-C9FF,U+CA01-CA07,U+CA0A,U+CA0E-CA13,U+CA15-CA17,U+CA19-CA28,U+CA2A-CA4B,U+CA4E-CA4F,U+CA51-CA53,U+CA55-CA5B,U+CA5E,U+CA62-CA67,U+CA69-CA7C,U+CA7E-CA83,U+CA85-CA97,U+CA99-CABB,U+CABE-CABF,U+CAC1-CAC3,U+CAC5-CACB,U+CACE,U+CAD0,U+CAD2,U+CAD4-CAD7,U+CADA-CADF,U+CAE1-CAEB,U+CAED-CAF3,U+CAF5-CB07,U+CB09-CB0F,U+CB11-CB13,U+CB15-CB17,U+CB19-CB1F,U+CB22-CB40,U+CB42-CB47,U+CB4A-CB4B,U+CB4D-CB4F,U+CB51-CB57,U+CB5A-CB5C,U+CB5E-CB63,U+CB65-CB77,U+CB7A-CB9B,U+CB9D-CBB7,U+CBB9-CBD3,U+CBD5-CBE3,U+CBE5-CBE6,U+CBE8,U+CBEA-CC0B,U+CC0E-CC0F,U+CC11-CC13,U+CC15-CC1B,U+CC1E-CC20,U+CC23-CC26,U+CC2A-CC2B,U+CC2D,U+CC2F,U+CC31-CC37,U+CC3A,U+CC3F-CC43,U+CC46-CC47,U+CC49-CC4B,U+CC4D-CC53,U+CC56,U+CC5A-CC5F,U+CC61-CC63,U+CC65,U+CC67,U+CC69-CC6F,U+CC71-CC74,U+CC76-CC97,U+CC9A-CC9B,U+CC9D-CC9F,U+CCA1-CCA7,U+CCAA,U+CCAE-CCB3,U+CCB6-CCB7,U+CCB9-CCBB,U+CCBD-CCC3,U+CCC6,U+CCC8,U+CCCA-CCCF,U+CCD1-CCD3,U+CCD5-CCE3,U+CCE5-CCEB,U+CCED-CCEF,U+CCF1-CD00,U+CD02-CD07,U+CD0A-CD0B,U+CD0D-CD0F,U+CD11-CD17,U+CD1A,U+CD1C,U+CD1E-CD23,U+CD25-CD27,U+CD29-CD2B,U+CD2D-CD38,U+CD3A-CD5B,U+CD5D-CD5F,U+CD61-CD63,U+CD65-CD6B,U+CD6E,U+CD70,U+CD72-CD77,U+CD79-CD87,U+CD89-CD93,U+CD96-CD97,U+CD99-CD9B,U+CD9D-CDA3,U+CDA6,U+CDA8,U+CDAA-CDAF,U+CDB1-CDC3,U+CDC5-CDCB,U+CDCD-CDCF,U+CDD1-CDE7,U+CDE9-CDEB,U+CDED-CDEF,U+CDF1-CDF7,U+CDFA,U+CDFC,U+CDFE-CE03,U+CE05-CE07,U+CE09-CE0B,U+CE0D-CE13,U+CE15-CE18,U+CE1A-CE1F,U+CE22-CE23,U+CE25-CE27,U+CE29-CE2F,U+CE32,U+CE34,U+CE36-CE57,U+CE5A-CE5B,U+CE5D-CE5E,U+CE62-CE67,U+CE6A,U+CE6C,U+CE6E-CE73,U+CE76-CE77,U+CE79-CE7B,U+CE7D-CE83,U+CE86,U+CE88,U+CE8A-CE8F,U+CE92-CE93,U+CE95-CE97,U+CE99-CE9F,U+CEA2,U+CEA6-CEAB,U+CEAE-CEC0,U+CEC2-CEE3,U+CEE6-CEE7,U+CEE9-CEEA,U+CEED-CEF3,U+CEF6,U+CEFA-CEFF,U+CF02-CF03,U+CF05-CF07,U+CF09-CF0F,U+CF12,U+CF14,U+CF16-CF1B,U+CF1D-CF1F,U+CF21-CF23,U+CF25-CF2B,U+CF2E,U+CF32-CF37,U+CF39-CF53,U+CF56-CF57,U+CF59-CF5B,U+CF5D-CF63,U+CF66,U+CF68,U+CF6A-CF6F,U+CF72-CF73,U+CF75-CF77,U+CF79-CF7F,U+CF81-CF84,U+CF86-CF8B,U+CF8D-CFA0,U+CFA2-CFA7,U+CFA9-CFAF,U+CFB1-CFC3,U+CFC5-CFDF,U+CFE2-CFE3,U+CFE5-CFE7,U+CFE9-CFEF,U+CFF2,U+CFF4,U+CFF6-CFFB,U+CFFD-CFFF,U+D001-D003,U+D005-D010,U+D012-D017,U+D019-D02C,U+D02E-D033,U+D036-D037,U+D039-D03B,U+D03D-D043,U+D046,U+D048,U+D04A-D04F,U+D051-D053,U+D055-D057,U+D059-D05F,U+D061-D06B,U+D06E-D06F,U+D071-D073,U+D075-D07B,U+D07E-D080,U+D082-D0A3,U+D0A6-D0A7,U+D0A9-D0AB,U+D0AD-D0B3,U+D0B6,U+D0B8,U+D0BA-D0BF,U+D0C2-D0C3,U+D0C5-D0C7,U+D0CA-D0CF,U+D0D2,U+D0D6-D0DB,U+D0DE-D0DF,U+D0E1-D0E3,U+D0E5-D0EB,U+D0EE,U+D0F2-D0F7,U+D0F9-D10C,U+D10E-D12F,U+D132-D133,U+D135-D137,U+D139,U+D13B-D13F,U+D142,U+D146-D14B,U+D14E-D14F,U+D151-D153,U+D155-D15B,U+D15E,U+D160,U+D162-D167,U+D169-D16B,U+D16D-D17B,U+D17D-D183,U+D185-D187,U+D189-D19F,U+D1A2-D1A3,U+D1A5-D1A7,U+D1A9-D1AF,U+D1B2,U+D1B4,U+D1B6-D1B9,U+D1BB,U+D1BD-D1BF,U+D1C1-D1D7,U+D1D9-D1F3,U+D1F5-D1F7,U+D1F9-D206,U+D208,U+D20A-D20F,U+D211-D22B,U+D22E-D22F,U+D231-D233,U+D235-D23B,U+D23E,U+D240,U+D242-D247,U+D249-D25B,U+D25D-D263,U+D265-D27F,U+D282-D283,U+D285-D287,U+D289-D28F,U+D292-D294,U+D296-D29B,U+D29D-D29F,U+D2A1-D2A3,U+D2A5-D2AB,U+D2AD-D2B0,U+D2B2-D2B7,U+D2BA-D2BB,U+D2BD-D2BE,U+D2C1,U+D2C3-D2C7,U+D2CA,U+D2CC-D2D3,U+D2D5-D2D7,U+D2D9-D2DB,U+D2DD-D2E3,U+D2E6-D2EF,U+D2F2-D2F3,U+D2F5-D2F7,U+D2F9-D2FF,U+D302,U+D304,U+D306-D30B,U+D30F,U+D311-D313,U+D315,U+D317-D31B,U+D31E,U+D322-D324,U+D326-D327,U+D32A-D32B,U+D32D-D32F,U+D331-D337,U+D33A,U+D33E-D343,U+D346-D37B,U+D37E-D37F,U+D381-D383,U+D385-D38B,U+D38E,U+D392-D397,U+D39A-D39B,U+D39D-D39F,U+D3A1-D3A7,U+D3AA,U+D3AC,U+D3AE-D3B3,U+D3B5-D3B7,U+D3B9-D3BB,U+D3BD-D3C3,U+D3C6-D3C7,U+D3CA-D3CF,U+D3D1-D3D7,U+D3D9-D3E0,U+D3E2,U+D3E4-D3EB,U+D3EE-D3EF,U+D3F1-D3F3,U+D3F5-D3FB,U+D3FE,U+D400,U+D402-D407,U+D409-D41C,U+D41E-D43F,U+D441-D443,U+D445-D45B,U+D45D-D45F,U+D461-D463,U+D465-D46C,U+D46E,U+D470-D477,U+D47A-D47B,U+D47D-D47E,U+D481,U+D483-D487,U+D48A,U+D48C,U+D48E-D493,U+D495-D4A8,U+D4AA-D4CB,U+D4CD-D4CF,U+D4D1-D4D3,U+D4D5-D4DB,U+D4DD-D4DE,U+D4E0-D4E7,U+D4E9-D4EB,U+D4ED-D4EF,U+D4F1-D4F7,U+D4F9-D4FA,U+D4FC,U+D4FE-D503,U+D505-D507,U+D509-D50B,U+D50D-D513,U+D516,U+D518-D53B,U+D53E-D53F,U+D541-D543,U+D545-D54B,U+D54E,U+D550,U+D552-D557,U+D55A-D55B,U+D55D-D55F,U+D561-D564,U+D566-D567,U+D56A,U+D56C,U+D56E-D573,U+D576-D577,U+D579-D57B,U+D57D-D583,U+D586,U+D58A-D58F,U+D591-D5A4,U+D5A6-D5C7,U+D5CA-D5CB,U+D5CD-D5CF,U+D5D1,U+D5D3-D5D7,U+D5DA,U+D5DC,U+D5DE-D5E3,U+D5E6-D5E7,U+D5E9-D5EB,U+D5ED-D5F3,U+D5F6,U+D5F8,U+D5FA-D5FF,U+D602-D603,U+D605-D607,U+D609-D60F,U+D612,U+D616-D61B,U+D61D-D61F,U+D621-D623,U+D625-D62C,U+D62E-D637,U+D63A-D63B,U+D63D-D63F,U+D641-D644,U+D646-D647,U+D64A,U+D64C,U+D64E-D650,U+D652-D653,U+D656-D657,U+D659-D65B,U+D65D-D666,U+D668,U+D66A-D66F,U+D672-D673,U+D675-D682,U+D684,U+D686-D68B,U+D68E-D68F,U+D691-D693,U+D695-D69C,U+D69E,U+D6A0,U+D6A2-D6A7,U+D6A9-D6AB,U+D6AD-D6AF,U+D6B1-D6B8,U+D6BA,U+D6BC-D6C3,U+D6C6-D6C7,U+D6C9-D6CB,U+D6CD-D6D0,U+D6D2-D6D3,U+D6D5-D6D6,U+D6D8,U+D6DA-D6DF,U+D6E1-D6E3,U+D6E5-D6E7,U+D6E9-D6EF,U+D6F1-D6F4,U+D6F6-D6FB,U+D6FE-D6FF,U+D701-D703,U+D705-D710,U+D712-D717,U+D71A-D71B,U+D71D-D71F,U+D721-D727,U+D72A,U+D72C,U+D72E-D733,U+D736-D737,U+D739-D73B,U+D73D-D743,U+D745-D746,U+D748,U+D74A-D74F,U+D752-D753,U+D755,U+D75A-D75F,U+D762,U+D764,U+D766-D768,U+D76A-D76B,U+D76D-D76F,U+D771-D773,U+D775-D77B,U+D77E-D780,U+D782-D787,U+D78A-D78B,U+D78D-D78F,U+D791-D797,U+D79A,U+D79C,U+D79E-D7A3;
}

:root {
  --ink: #1f272c;
  --ink-soft: #34424a;
  /* 🔴 글자색 셋을 어둡게 했다 (2026-09-06).
     종이 바탕(#f3f1ed) 위에서 재 보니 기준(4.5)에 못 미쳤다 —
     --muted 4.23 · --green 4.08 · --gold 2.76.
     바닥글과 곁말이 화면 스물두 쪽에 걸쳐 이 색을 쓰고 있었다.
     🔸 색조(HSL 의 H·S)는 그대로 두고 **명도만** 내렸다. 화면 인상은 달라지지 않는다.
     🔸 흰 카드가 아니라 **종이 바탕**을 기준으로 잡았다 —
        흰 카드만 보면 바탕에 놓인 글이 다시 미달이 된다. */
  --muted: #617077;
  --line: rgba(79, 95, 104, 0.18);
  --line-strong: rgba(38, 56, 66, 0.24);
  --panel: rgba(255, 255, 255, 0.86);
  --blue: #2d6f8f;
  --blue-soft: #e9f5fa;
  /* 🔴 금빛은 **글자용과 칠용을 가른다** (2026-09-06).
     지금 값(#b98a36)은 종이 위에서 2.76 이라 글자로는 읽기 힘든데,
     그렇다고 어둡게 하면 딱지·테두리·강조선의 **금빛이 갈색으로 죽는다.**
     칠하는 색은 그 색으로 보여야 뜻이 서고, 글자는 대비가 뜻이다 — 다른 물건이다.
     ⚠️ 새로 금빛 글자를 쓸 때는 --gold 가 아니라 --gold-ink 를 쓴다. */
  --gold: #b98a36;        /* 칠용 — 테두리 · 배경 · 강조선 */
  --gold-ink: #8b6829;    /* 글자용 — 종이 위 4.53 */
  --green: #4a7761;
  --shadow: 0 22px 64px rgba(48, 63, 71, 0.11);
  --shadow-soft: 0 12px 30px rgba(48, 63, 71, 0.09);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-height: 100%;
  /* 🔴 휴대폰 브라우저는 '읽기 편하게' 한다며 글자를 저 혼자 키울 때가 있다 (2026-08-07).
     특히 아이폰을 가로로 눕혔을 때 나는데, 어떤 문단만 커지므로 **줄 간격과 칸이 어긋난다.**
     우리는 화면 폭마다 글자 크기를 이미 정해 뒀으니 브라우저가 손대지 않게 막는다.
     100% 는 '우리가 정한 그대로' 라는 뜻이지 확대를 막는 것이 아니다 —
     손님이 두 손가락으로 키우는 것은 그대로 된다. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--ink);
  background-color: #f7faf9;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.12) 52%, rgba(247, 251, 252, 0.33) 100%),
    url("./assets/home-bg-sodam-ink.webp") center top / cover no-repeat fixed;
  font-family: "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  line-height: 1.5;
  letter-spacing: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03) 42%, rgba(255, 255, 255, 0.06)),
    radial-gradient(circle at 47% 18%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.25) 100%);
  pointer-events: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  font: inherit;
}

button {
  cursor: pointer;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(92, 111, 121, 0.14);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px);
}

/* ── 공지 띠 (2026-08-16 · site-nav.js 가 만들어 붙인다) ──────────────
   휴강·영상 교체를 알리는 자리. 헤더 바로 아래에 한 줄로 눕는다.

   🔴 헤더처럼 붙박이(sticky)로 만들지 않는다. 스크롤을 내리면 지나간다 —
      붙박이로 두면 휴대폰에서 화면 위쪽을 계속 먹는다.
   🔸 금색 계열. 우리 초록은 '누를 것'에 쓰고 있어서, 알림에 같은 색을 쓰면
      눌러야 하는 것처럼 보인다. */
.site-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(185, 138, 54, 0.35);
  background: rgba(185, 138, 54, 0.1);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}

.site-notice-text {
  /* 🔴 min-width:0 이 없으면 긴 글이 칸을 밀어내 X 단추가 화면 밖으로 나간다. */
  flex: 1;
  min-width: 0;
}

.site-notice-link {
  flex-shrink: 0;
  font-weight: 800;
  color: var(--gold-ink);
  text-decoration: underline;
}

.site-notice-close {
  flex-shrink: 0;
  /* 🔴 44px 아래로 내리지 않는다 — 휴대폰에서 손가락으로 누르는 것이다. */
  width: 44px;
  height: 44px;
  margin: -10px -12px -10px 0;
  border: 0;
  background: none;
  font-size: 15px;
  color: var(--ink-3, #6b7a82);
  cursor: pointer;
}

@media (max-width: 760px) {
  .site-notice {
    align-items: flex-start;
    padding: 10px 14px;
    gap: 0 8px;
    /* 좁은 화면에서는 링크만 아랫줄로 내린다. 한 줄에 다 넣으면 글이 잘린다. */
    flex-wrap: wrap;
  }

  /* 🔴 ✕ 를 글과 **같은 줄**에 둔다.
     처음에는 ✕ 를 윗줄로 올렸더니 띠가 세 줄(136px)이 됐다 — 휴대폰 화면
     6분의 1을 휴강 안내 하나가 먹었다. 글·✕ 한 줄, 링크 한 줄이면 충분하다. */
  .site-notice-text {
    /* 🔴 기준 너비를 0 으로 둔다. `auto` 로 두면 글 길이만큼 자리를 잡아
       한 줄을 통째로 차지하고, ✕ 가 아랫줄로 밀려난다(실제로 그랬다). */
    flex: 1 1 0;
    order: 1;
  }

  .site-notice-close {
    order: 2;
    margin: -10px -8px -10px 0;
  }

  .site-notice-link {
    /* 한 줄을 통째로 차지해 아랫줄로 내려간다. */
    flex: 1 1 100%;
    order: 3;
    margin-top: 2px;
  }
}

/* ── 좁은 화면용 메뉴 버튼 (site-nav.js 가 만들어 붙인다) ──────────────
   넓은 화면에서는 안 보인다. 1160px 이하에서만 나온다. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.nav-toggle:hover {
  border-color: var(--line-strong);
}

/* 줄 세 개 — 가운데 줄을 기준으로 위아래를 그림자로 그린다 */
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.nav-toggle-bars {
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-bars::before {
  top: -6px;
}

.nav-toggle-bars::after {
  top: 6px;
}

/* 열리면 X 로 */
.site-header[data-nav-open="true"] .nav-toggle-bars {
  background: transparent;
}

.site-header[data-nav-open="true"] .nav-toggle-bars::before {
  transform: translateY(6px) rotate(45deg);
}

.site-header[data-nav-open="true"] .nav-toggle-bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

.site-header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  min-height: 64px;
  width: min(1360px, calc(100% - 56px));
  margin: 0 auto;
  padding: 10px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 15px;
  font-weight: 900;
  color: #24323a;
}

.brand img {
  width: 142px;
  height: auto;
  display: block;
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  color: var(--ink-soft);
  font-size: 18px;
  font-weight: 800;
}

.top-nav a,
.login-link {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border-radius: 6px;
}

.top-nav a:hover,
.login-link:hover {
  background: rgba(233, 245, 250, 0.86);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 900;
}

.manse-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 4px 6px;
  border-radius: 6px;
  transition: opacity 0.15s ease;
}

.manse-link:hover {
  opacity: 0.7;
}

.manse-link img {
  height: 34px;
  width: auto;
  display: block;
}

.login-link {
  color: var(--muted);
}

.academy-home {
  width: min(1360px, calc(100% - 56px));
  margin: 0 auto;
  padding: 20px 0 34px;
  flex: 1 0 auto;
}

.lead-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  align-items: center;
  gap: 24px;
}

/* 히어로는 인물 사진 대신 텍스트로 힘을 준다.
   왼쪽에 주제 문장 "사주명리학은 운명기상학입니다" + 강사, 오른쪽에 소개 문구를
   두 칼럼으로 나눠 세로 길이를 줄인다. 뒤에는 '運 命' 한자를 옅게 깔아 깊이를 준다. */
.lead-copy {
  position: relative;
  display: block;
  padding: 12px 0 8px;
  overflow: hidden;
}

/* 왼쪽은 인용문 블록(아이브로우+헤드라인+서명), 오른쪽은 보조 문구(태그라인+본문).
   좌우로 나눠 세로 길이를 줄이고, 왼쪽 벽에서 살짝 떨어뜨려 들여쓴다. */
.lead-copy-text {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: center;
  gap: 0 40px;
  margin-left: 40px;
}

.lead-quote-col,
.lead-support-col {
  min-width: 0;
}

/* 배경 한자 워터마크 '運 命' — 텍스트 뒤에 옅게. 장식이라 스크린리더에서 숨긴다. */
.lead-hanja {
  position: absolute;
  z-index: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 230px;
  line-height: 1;
  font-weight: 900;
  color: rgba(45, 111, 143, 0.06);
  pointer-events: none;
  user-select: none;
}

.lead-hanja-1 {
  left: 20%;
}

.lead-hanja-2 {
  left: 60%;
}

.lead-headline {
  margin: 10px 0 0;
  color: #172026;
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

/* "운명기상학"만 파란색(기상=하늘·날씨의 결) + 붓으로 그은 밑줄. */
.lead-headline-accent {
  position: relative;
  color: var(--blue);
  white-space: nowrap;
}

.lead-headline-accent::after {
  content: "";
  position: absolute;
  left: -1%;
  right: -1%;
  bottom: 0.02em;
  height: 0.12em;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(45, 111, 143, 0.15), rgba(45, 111, 143, 0.55));
  transform: scaleX(0);
  transform-origin: left center;
  animation: heroUnderline 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s forwards;
}

/* 보조 태그라인. 메인 헤드라인과 경쟁하지 않게 톤을 낮추고 금색 막대만 살린다. */
.lead-sub {
  margin: 12px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--gold);
  color: #45555e;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* 헤드라인 인용문의 서명 줄 — "— 강사 현암 김호진". 헤드라인 바로 밑에 붙인다. */
.lead-instructor {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.lead-quote-dash {
  color: #8a97a0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.lead-instructor-label {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: #45555e;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.lead-instructor-name {
  height: 30px;
  width: auto;
  display: block;
}

/* 등장 애니메이션: 왼쪽 인용문 블록 → 오른쪽 보조 문구 순으로 떠오른다. */
.lead-copy-text > * {
  opacity: 0;
  animation: heroRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.lead-quote-col {
  animation-delay: 0.1s;
}
.lead-support-col {
  animation-delay: 0.28s;
}

@keyframes heroRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes heroUnderline {
  to {
    transform: scaleX(1);
  }
}

/* 모션 최소화 설정이면 애니메이션 없이 바로 보이게. */
@media (prefers-reduced-motion: reduce) {
  .lead-copy-text > *,
  .lead-headline-accent::after,
  .continue-play::before {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.lead-cards {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

.eyebrow,
.card-label {
  display: block;
  margin: 0;
  color: var(--blue);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
}

.lead-text {
  max-width: 560px;
  margin: 12px 0 0;
  color: #47575f;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.6;
}

.lead-text-highlight {
  color: var(--blue);
}

.lead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.primary-action,
.secondary-action,
.card-actions a,
.manse-card a,
.quiz-bottom button,
.quiz-bottom a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 6px;
  font-weight: 900;
}

.primary-action {
  background: #21333d;
  color: #fff;
}

.secondary-action,
.card-actions a,
.quiz-bottom a {
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.76);
  color: #283942;
}

.summary-card,
.course-area,
.community-area,
.manse-card,
.quiz-card {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.summary-card {
  min-height: 174px;
  padding: 16px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.continue-state {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.continue-watch {
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  padding: 0;
  display: block;
  background: #fff;
  backdrop-filter: none;
}

.continue-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #cfd8dc;
}

.continue-thumb img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 이어보기는 얼굴 섬네일 대신 CSS로 그린 잔잔한 먹빛 화면을 쓴다.
   가운데 은은한 빛을 두고 그 위에 재생 버튼이 놓인다. 사진이 없어 화면이 덜 어지럽다. */
.continue-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(115% 85% at 50% 38%, rgba(58, 130, 165, 0.55), rgba(58, 130, 165, 0) 62%),
    radial-gradient(140% 120% at 85% 110%, rgba(185, 138, 54, 0.22), rgba(185, 138, 54, 0) 55%),
    linear-gradient(155deg, #1d2c34 0%, #142027 55%, #0e171c 100%);
}

/* 그래픽 화면 위에 큰 '學' 한자를 아주 옅게 깔아 강의 화면다운 깊이를 준다. */
.continue-scene::after {
  content: "學";
  position: absolute;
  right: 12px;
  bottom: -18px;
  font-size: 120px;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.05);
}

.continue-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(15, 23, 27, 0.9), rgba(15, 23, 27, 0.12) 58%, rgba(15, 23, 27, 0) 78%);
}

.continue-badge {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 27, 0.55);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.continue-play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 8px rgba(255, 255, 255, 0.06);
  transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease;
}

/* 재생 버튼이 잔잔하게 숨쉬는 링. 마우스를 올리면 멈추고 살짝 커진다. */
.continue-play::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  animation: continuePulse 2.4s ease-out infinite;
}

.continue-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}

.continue-thumb:hover .continue-play,
.continue-thumb:focus-visible .continue-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(255, 255, 255, 0.26);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 0 10px rgba(255, 255, 255, 0.08);
}

.continue-thumb:hover .continue-play::before,
.continue-thumb:focus-visible .continue-play::before {
  animation: none;
}

@keyframes continuePulse {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}

/* 강의명 위 작은 영문 키커. */
.continue-kicker {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.continue-overlay {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 12px;
  padding: 0 14px;
  color: #fff;
}

.continue-overlay strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.continue-overlay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.continue-overlay-row p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 750;
}

.continue-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: #21333d;
  font-size: 13px;
  font-weight: 800;
}

.continue-progress-track {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.35);
}

.continue-progress-fill {
  display: block;
  height: 100%;
  background: #fff;
}

.mini-thumb {
  width: 100%;
  height: 92px;
  margin-top: 10px;
  border-radius: 8px;
  overflow: hidden;
}

.mini-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 섬네일 전체가 만세력으로 가는 링크다. 이미지는 투명도를 낮춰 배경처럼 깔고
   그 위에 "이동하기" 버튼을 얹는다. */
.manse-preview {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 10px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.manse-preview img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.4;
  transition: opacity 200ms ease;
}

/* 반투명 유리 알약. 뒤의 만세력 화면이 살짝 비쳐서 "이 화면으로 간다"는 게 읽히고,
   섬네일 위에 얹은 흰 버튼이라 이어보기 카드 CTA와도 결이 맞는다. */
.manse-go {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(33, 51, 61, 0.18);
  color: #21333d;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.manse-go::after {
  content: "→";
  font-size: 14px;
  line-height: 1;
  transition: transform 200ms ease;
}

.manse-preview:hover .manse-go,
.manse-preview:focus-visible .manse-go {
  background: #fff;
  box-shadow: 0 10px 26px rgba(33, 51, 61, 0.28);
  transform: translateY(-2px);
}

.manse-preview:hover .manse-go::after,
.manse-preview:focus-visible .manse-go::after {
  transform: translateX(3px);
}

.manse-preview:hover img {
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .manse-preview img,
  .manse-go,
  .manse-go::after {
    transition: none;
  }

  .manse-preview:hover .manse-go {
    transform: none;
  }

  .manse-preview:hover .manse-go::after {
    transform: none;
  }
}

/* 카드 머리: 왼쪽에 소담만세력 로고("필수 도구" 라벨 대체), 오른쪽에 한 줄 설명 */
.manse-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.manse-logo-mark {
  flex: none;
  height: 26px;
  width: auto;
  display: block;
}

/* 유튜브 로고는 가로로 길어서(약 5:1) 만세력 로고보다 조금 낮게 잡아야
   옆의 설명 문구가 한 줄에 들어간다. */
.youtube-logo-mark {
  flex: none;
  height: 22px;
  width: auto;
  display: block;
}

.manse-state .manse-head p,
.youtube-state .manse-head p {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.45;
}

.summary-card strong {
  display: block;
  margin-top: 8px;
  font-size: 22px;
  line-height: 1.25;
}

.summary-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 750;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.card-actions a {
  min-height: 36px;
  padding: 0 12px;
  font-size: 14px;
}

.tier-coin {
  flex: none;
  width: 56px;
  height: auto;
  display: block;
}

/* 테두리 배지를 두른 동전 (2026-08-04).
   테두리를 안 두르면 예전 그대로 동전만 56px 로 보인다.
   두르면 자리를 조금 넓혀 테를 그 바깥에 놓고, 동전은 구멍 크기(59.95%)로 줄인다. */
.tier-coin-wrap {
  flex: none;
  position: relative;
  display: block;
  width: 56px;
  line-height: 0;
  /* 🔴 홈 화면은 카드 전체가 마이페이지 링크다(.profile-card-link, z-index:1).
     동전만 그 위로 올려야 눌린다. 안 올리면 클릭이 링크에 먹힌다. */
  z-index: 2;
  cursor: zoom-in;
  border-radius: 50%;
  transition: transform 0.15s;
}

.tier-coin-wrap:hover {
  transform: scale(1.06);
}

.tier-coin-wrap:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.tier-coin-wrap.has-ring {
  width: 78px;
  aspect-ratio: 1 / 1;
}

.tier-coin-wrap.has-ring .tier-coin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.tier-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.level-meter {
  height: 8px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6eef2;
}

#tierMeter {
  background: rgba(230, 238, 242, 0.55);
}

.level-meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2d6f8f, #85b9cb);
}

.level-state small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 850;
}

.level-state {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.profile-chip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(185, 138, 54, 0.12);
  color: var(--gold-ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.streak-chip strong {
  display: inline;
  margin-top: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: 900;
}

/* 소담만세력 이용권 배지 — 등급 배지(파랑) 옆에 붙는다.
   금색은 '연속 N일' 칩이 이미 쓰는 색이다. 배지 하나 때문에 새 색을 들이지 않는다.
   테두리를 준 이유: 같은 금색이라 연속 칩과 나란히 놓이면 하나로 뭉쳐 보인다. */
.pro-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(185, 138, 54, 0.35);
  background: rgba(185, 138, 54, 0.12);
  color: var(--gold-ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

/* 카드 맨 아래 안내 한 줄. 이용권이 없으면 얻는 방법을, 있으면 연장 규칙을 말한다. */
.profile-pro-note {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.5;
}

/* 마이페이지 오른쪽 열 — 카드가 한 장뿐이라 옆 열 높이에 맞춰 늘이지 않는다.
   늘이면 내용 136px 짜리 카드가 340px 로 벌어져 아래가 텅 빈다.
   홈 화면은 같은 .side-area 에 카드가 네 장이라 건드리지 않는다. */
.my-side {
  align-content: start;
}

.dev-profile-panel {
  margin-top: 24px;
  padding: 14px 18px;
  border: 1px dashed rgba(161, 71, 63, 0.45);
  border-radius: 10px;
  background: rgba(161, 71, 63, 0.06);
}

.dev-profile-title {
  margin: 0 0 10px;
  color: #a1473f;
  font-size: 14px;
  font-weight: 900;
}

.dev-profile-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dev-profile-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dev-profile-label {
  min-width: 150px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}

.dev-profile-row button,
.dev-profile-reset {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(161, 71, 63, 0.35);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.85);
  color: #a1473f;
  font-size: 13px;
  font-weight: 800;
}

.dev-profile-row button:hover,
.dev-profile-reset:hover {
  background: #a1473f;
  color: #fff;
}

.dev-profile-reset {
  margin-top: 12px;
}

.profile-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.profile-identity-info {
  flex: 1;
  min-width: 0;
}

strong.profile-nickname {
  display: block;
  margin-top: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.25;
}

.tier-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

/* 카드 머리: 왼쪽 Profile 라벨 + 오른쪽 "내 강의보기" 버튼 */
.profile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* 카드 전체를 마이페이지 링크로 덮는다. "내 강의보기"는 링크 안에 링크를 넣을 수
   없어서 겹쳐 깔지 않고, z-index로 이 오버레이 위에 올려 각자 다른 곳으로 보낸다. */
.profile-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 8px;
}

.profile-my-courses-link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  background: #21333d;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 18px;
  margin-top: 14px;
}

.course-column {
  min-width: 0;
  /* 커뮤니티가 남는 높이를 가져가 오른쪽 카드 줄과 아래 끝이 맞는다.
     글 수가 바뀌어도 카드 높이가 늘었다 줄었다 하지 않는다. */
  display: flex;
  flex-direction: column;
}

.course-area {
  min-height: 340px;
  padding: 18px;
  border-radius: 8px;
}

.community-area {
  padding: 18px;
  border-radius: 8px;
  margin-top: 18px;
  flex: 1;
}


.detail-side-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.section-head,
.quiz-head,
.quiz-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.section-head h2 {
  margin: 4px 0 0;
  font-size: 22px;
  line-height: 1.2;
}

/* 라벨(COURSES)과 제목을 세로로 쌓지 않고 한 줄에 나란히 두는 머리글 */
.section-head-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.section-head-title h2 {
  margin: 0;
}

.section-head a {
  color: var(--blue);
  font-size: 15px;
  font-weight: 900;
}

.course-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.course-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(79, 95, 104, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.course-card .course-art {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: 8px 8px 0 0;
}

/* 등급 배지는 섬네일 위에 얹는다. 카드 아래 글상자를 제목·설명 두 줄로 줄이려고
   옮긴 것이라, 다시 글상자로 내리면 세 줄로 돌아간다. */
.course-card .course-art span {
  position: absolute;
  top: 8px;
  left: 8px;
  box-shadow: 0 2px 8px rgba(33, 51, 61, 0.18);
}

.course-card:hover {
  border-color: rgba(45, 111, 143, 0.24);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.course-art,
.tool-art {
  overflow: hidden;
  border: 1px solid rgba(79, 95, 104, 0.12);
  border-radius: 7px;
  background: rgba(245, 250, 251, 0.72);
}

.course-art img,
.tool-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 섬네일 아래 글상자.
   글상자에 색을 깔면 섬네일과 색이 싸우고, 카드 4장이 하늘색 배경 위에서 뭉개진다.
   그래서 글상자는 거의 흰색으로 비워 두고, 색은 섬네일 바로 아래 3px 액센트 선
   하나에만 준다. 색은 강의마다 다르고(--course-accent) 배지 색과 짝을 이룬다. */
.course-content {
  min-width: 0;
  flex: 1;
  padding: 13px 12px 14px;
  background: rgba(255, 255, 255, 0.94);
  border-top: 3px solid var(--course-accent, var(--blue));
}

.free-course {
  --course-accent: #4f7f67;
}

/* 입문·실전은 둘 다 "라이브 아카이브"라 한 가족으로 묶는다. 같은 노란 계열. */
.intro-course,
.practice-course {
  --course-accent: #b08a2a;
}

/* 대표 강의는 파란색. 아카이브 두 개와 확실히 갈라진다. */
.featured-course {
  --course-accent: #2d6f8f;
}

.course-card span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

.course-card strong {
  display: block;
  font-size: 18px;
  line-height: 1.3;
}

/* 두 줄뿐이라 제목이 확실히 먼저 읽히도록 설명은 한 단계 낮춘다. */
.course-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.course-card .price {
  margin-top: 8px;
  color: #21333d;
  font-size: 16px;
  font-weight: 900;
}

/* 배지 색은 위 --course-accent와 짝을 이룬다. 배지와 액센트 선이 같은 색이라
   카드마다 색 하나로 읽힌다. */
/* 배지 글씨는 12px로 작아서 옅은 바탕 위에서 대비가 4.5:1은 넘어야 읽힌다.
   기존 --green(4.21)은 살짝 모자랐다. */
.free-course span {
  background: #eef7f1;
  color: #47755d;
}

/* 아카이브 두 개는 같은 노란 배지. 대표 강의는 별도 규칙 없이
   기본값(파란 배지, .course-card span)을 그대로 쓴다. */
.intro-course span,
.practice-course span {
  background: #fdf6e4;
  color: #8e6b1a;
}

/* ===== 커뮤니티 = 소담광장 아카데미 게시판 =====
   배너형 카드 3장이 아니라 진짜 게시판 목록으로 보여준다.
   말머리 탭으로 게시판을 고르고, 한 줄에 [말머리] 제목 ... 작성자·날짜 순으로 읽힌다. */

.board-more {
  flex: none;
  color: var(--blue);
  font-size: 14px;
  font-weight: 900;
}

/* 커뮤니티 머리의 글쓰기 + 전체보기 */
.section-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* 🔴 「.section-head a」 가 이 규칙을 이기고 있었다 (2026-09-06 재서 찾음).
   선택자가 둘(0,2,0) 이라 하나(0,1,0)짜리 .board-write 를 눌렀고,
   그 바람에 **글자색이 배경색과 똑같아져 글씨가 안 보였다.**
   대비를 재니 1.00 — 같은 색이라는 뜻이다. 눈으로는 「단추가 왜 비었지」로만 보인다.
   🔸 선택자를 함께 적어 무게를 맞춘다. !important 를 쓰지 않는다 —
      한 번 쓰면 다음 사람이 또 쓰게 되고, 그러면 무엇이 이기는지 아무도 모르게 된다. */
.section-head .board-write,
.board-write {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.board {
  margin-top: 14px;
}

.board-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--line);
}

.board-tab {
  padding: 9px 13px 10px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  /* 선택된 탭의 아래 선이 탭 줄의 경계선을 덮어써 이어붙은 것처럼 보이게 한다. */
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}

.board-tab:hover {
  color: var(--ink-soft);
}

.board-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--blue);
}

.board-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.board-row + .board-row {
  border-top: 1px solid rgba(79, 95, 104, 0.12);
}

.board-row a {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 9px 4px;
  border-radius: 6px;
}

.board-row a:hover {
  background: rgba(255, 255, 255, 0.55);
}

.board-tag {
  justify-self: start;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(45, 111, 143, 0.1);
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

/* 게시판마다 색을 달리해 목록에서 한눈에 갈린다. 채도는 낮게 — 홈 전체가 옅은 톤이다. */
.board-tag[data-board="quiz"] {
  background: rgba(180, 95, 109, 0.11);
  color: #a2545f;
}

.board-tag[data-board="qna"] {
  background: rgba(79, 127, 103, 0.12);
  color: var(--green);
}

.board-tag[data-board="homework"] {
  background: rgba(185, 138, 54, 0.13);
  color: #97701f;
}

.board-title {
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  /* 제목이 길어도 한 줄로 끊는다. 줄 높이가 들쭉날쭉하면 목록으로 안 읽힌다. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-row a:hover .board-title {
  color: var(--blue);
}

.board-pin {
  margin-right: 5px;
  font-size: 13px;
}

.board-meta {
  flex: none;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.board-empty {
  margin: 0;
  padding: 22px 4px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.board-empty a {
  color: var(--blue);
  font-weight: 900;
  white-space: nowrap;
}

.side-area {
  display: grid;
  gap: 14px;
}

.manse-card {
  display: grid;
  grid-template-columns: 112px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px;
  border-radius: 8px;
}

.tool-art {
  height: 92px;
}

.manse-card strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
}

.manse-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 760;
}

.manse-card a {
  min-width: 68px;
  background: #21333d;
  color: #fff;
}

.quiz-card {
  padding: 14px;
  border-radius: 8px;
}

.quiz-head strong {
  display: block;
  margin-top: 3px;
  font-size: 20px;
}

.quiz-rule {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.quiz-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 10px;
}

.quiz-tabs button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.quiz-tabs button.active {
  border-color: rgba(45, 111, 143, 0.38);
  background: #21333d;
  color: #fff;
}

.quiz-tabs button.done {
  color: var(--green);
}

/* 오늘의 3문항을 다 풀었을 때만 나오는 안내. 초기화 시점은 날짜 기준이라
   자정이 지나면 app.js가 저장된 풀이 기록을 버리고 새 문항을 뽑는다. */
.quiz-complete {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: #eef7f1;
  color: #315f48;
  font-size: 14px;
  font-weight: 780;
  line-height: 1.5;
}

.quiz-complete strong {
  display: block;
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 900;
}

.quiz-body {
  min-height: 172px;
  margin-top: 10px;
}

.quiz-meta {
  color: var(--blue);
  font-size: 14px;
  font-weight: 900;
}

.quiz-body h3 {
  margin: 6px 0 0;
  font-size: 18px;
  line-height: 1.38;
}

.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 10px;
}

.quiz-options button {
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.82);
  color: #2b3940;
  font-size: 15px;
  font-weight: 900;
}

.quiz-options button.correct {
  border-color: rgba(79, 127, 103, 0.5);
  background: #eef7f1;
  color: #315f48;
}

.quiz-options button.wrong {
  border-color: rgba(177, 86, 79, 0.38);
  background: #fff0ee;
  color: #93443d;
}

.quiz-feedback {
  min-height: 34px;
  margin: 9px 0 0;
  color: #51606a;
  font-size: 14px;
  font-weight: 780;
}

.quiz-bottom {
  margin-top: 8px;
}

.quiz-bottom button {
  border: 0;
  background: #21333d;
  color: #fff;
}

.quiz-bottom a {
  font-size: 15px;
}

.unlock-note {
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

/* 강의 목록 페이지 - 가로형 카드 */
.page-head {
  padding: 8px 0 4px;
}

.page-head h1 {
  margin: 8px 0 0;
  font-size: 32px;
  line-height: 1.25;
  color: #182126;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
}

.breadcrumb a {
  color: var(--blue);
}

.course-row-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
}

/* 전체 강의 페이지 리드 문구 */
.page-lead {
  max-width: 640px;
  margin: 12px 0 0;
  color: #45555e;
  font-size: 16px;
  font-weight: 720;
  line-height: 1.65;
}

.page-lead strong {
  color: var(--blue);
  font-weight: 850;
}

/* ===== 강의 학습 로드맵 =====
   무료로 시작 → 핵심 강의 → 라이브 아카이브(선택)의 3단계를 번호·화살표로 보여준다. */
.course-roadmap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 22px;
}

.roadmap-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin: 0;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: #33434c;
  font-size: 15px;
  font-weight: 850;
}

.step-badge.featured {
  border-color: rgba(185, 138, 54, 0.5);
  background: #fff8ec;
  color: #8a6410;
}

.step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.step-badge.featured .step-no {
  background: var(--gold);
  /* 🔴 금색 위에 흰 글자는 3.11 이었다 (2026-09-06 재서 확인).
     배경을 어둡게 하면 **금빛이 갈색으로 죽는다** — 대신 글자를 어둡게 해서 4.88 을 얻는다.
     칠하는 색은 그 색으로 보여야 뜻이 서고, 글자는 대비가 뜻이다. */
  color: var(--ink);
}

.step-optional {
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef1f2;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

/* 단계 사이 화살표 */
.step-arrow {
  margin: 2px 0;
  padding-left: 14px;
  color: rgba(79, 95, 104, 0.5);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

/* 한 단계를 혼자 맡는 카드 — 섬네일 칸을 넓혀 곁들이 카드와 키를 벌린다 (2026-09-04).
   실전 마스터강의를 2단계로 올렸는데 카드 크기가 110,000원짜리 복습 카드와 똑같아서(둘 다 249px)
   **자리만 올라가고 눈에는 그대로**였다. 값이 다섯 배인 강의는 카드도 그만큼 커야 읽힌다.
   🔸 금색(featured)은 여전히 1단계만 쓴다 — 크기로 격을 세우고, 색으로 대표를 세운다. */
.roadmap-step .course-row-card.major {
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 26px;
  padding: 22px;
}

/* 🔴 값과 단추가 한 줄에 안 들어가면 줄을 바꾼다 (2026-09-04).
   섬네일을 키우자 본문 폭이 줄어 830px 창에서 「자세히 보기」가 70px 밖으로 밀려나
   **화면 전체에 가로 스크롤**이 생겼다. 큰 카드는 본문이 좁아지니 이 줄만은 접힐 수 있어야 한다. */
.roadmap-step .course-row-card.major .course-row-bottom {
  flex-wrap: wrap;
}

.roadmap-step .course-row-card.major h3 {
  font-size: 25px;
}

@media (max-width: 720px) {
  .roadmap-step .course-row-card.major {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
  }

  .roadmap-step .course-row-card.major h3 {
    font-size: 22px;
  }
}

/* 핵심 강의 카드 강조 — 로드맵에서 시선이 여기 멈추게 */
.roadmap-step .course-row-card.featured {
  box-shadow: 0 18px 48px rgba(160, 120, 40, 0.16);
}

/* 3단계: 아카이브 두 개를 좌우로 */
.roadmap-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* 🔴 카드 둘을 좌우로 두는 것은 폭이 넉넉할 때만이다 (2026-08-18).
   1160 밑에서는 한 장이 화면의 절반이라 그 안의 섬네일이 42% —
   즉 화면의 5분의 1로 줄어든다. 못 알아볼 그림이 된다.
     폭      좌우로 둘 때      위아래로 쌓을 때
     1100    198×112 (위42·아래42)   418×235 (빈칸 0)
      900    156× 88 (위54·아래54)   334×188 (빈칸 0)
      768    130× 73 (위85·아래85)   ← 8/18 까지 이랬다
   🔸 카드 **안** 을 세로로 세우는 것(760px)과는 다른 이야기다.
      여기서는 카드 **둘** 을 위아래로 놓을 뿐, 카드 안은 그대로 좌우다. */
@media (max-width: 1160px) {
  .roadmap-pair {
    grid-template-columns: 1fr;
  }
}

/* 3단계 아카이브는 '보조'라 마스터보다 작게. 작은 가로형 미니 카드로 낮춘다. */
/* 🔴 2단계 카드를 다시 잡았다 (2026-08-18 소담).
   소담: *"아카이브도 섬네일 카드안에 꿉찼으면 좋겠어. 우측 여백을 활용하면
   충분히 가능해. 가격을 우측 상단이나 중앙에 보기좋게 세팅하면 될거 같아.
   글자도 너무 작은거 같아 전체적으로"*

   카드가 597px 인데 섬네일이 **116×65px** 였다 — 무슨 그림인지 알아볼 수 없는 크기다.
   나머지 437px 를 글자가 쓰는데, 그 글자도 13~17px 로 작았다.

   🔸 1단계에서 배운 것을 그대로 썼다 — **그림을 먼저 크게 잡고 칸을 거기 맞춘다.**
      칸을 먼저 정하면 그림이 그보다 작을 때마다 빈칸이 생긴다. */
.roadmap-pair .course-row-card.compact {
  /* 🔴 42% 는 재보고 고른 값이다. 43% 부터는 설명이 한 줄 더 쌀려
     본문이 146 → 168px 로 뛰고, 그만큼 오히려 더 벌어진다.
       칸 비율   40%    41%    ⭐ 42%    43%    44%
       어긋남    −19px  −16px   −13px   −32px  −28px
       값 자리   23px   17px    11px     6px    0px  ← 이름 옆에 남는 폭 */
  grid-template-columns: minmax(130px, 42%) minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  /* 🔸 align-items 는 안 적는다 — 기본값이 center 다 */
}

/* 🔸 값을 이름 줄 오른쪽으로. 섬네일을 키우자 아래에
      값과 단추를 나란히 둘 폭이 모자랐다. */
.roadmap-pair .course-row-card.compact .course-row-top {
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
}

/* 딱지는 이름이 아니라 분류다. 값보다 눈에 띄면 안 된다 —
   설명글(14.5px)보다는 크게 두되 값(21px)과 싸우지 않게. */
.roadmap-pair .course-row-card.compact .course-row-top > span:first-child {
  font-size: 15px;
  white-space: nowrap;
}

.roadmap-pair .course-row-card.compact .row-prices {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.roadmap-pair .course-row-card.compact h3 {
  margin-top: 7px;
  font-size: 20px;
}

.roadmap-pair .course-row-card.compact .row-desc {
  margin-top: 7px;
  font-size: 15px;
}

/* 값이 위로 갔으니 아래엔 단추만 남는다 — 값 밑에 오도록 오른쪽으로 */
.roadmap-pair .course-row-card.compact .course-row-bottom {
  justify-content: flex-end;
  padding-top: 12px;
}

.roadmap-pair .course-row-card.compact .row-price {
  font-size: 22px;
}

.roadmap-pair .course-row-card.compact .row-list-price {
  margin-right: 7px;
  font-size: 15px;
}

.roadmap-pair .course-row-card.compact .row-cta {
  min-height: 42px;
  padding: 0 18px;
  font-size: 15px;
}

/* 🔴 카드 둘이 나란히 서 있는 동안은 한 장이 화면의 절반이다.
   1200px 밑으로 내려가면 이름 옆에 값을 놓을 폭이 안 나온다 —
   억지로 붙이면 생각지 못한 자리에서 줄이 나뉘어 더 지저분해진다.
   그럴 때는 우리가 먼저 줄을 나눈다. */
@media (max-width: 1200px) {
  .roadmap-pair .course-row-card.compact .course-row-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* 🔴 휴대폰에서는 섬네일을 위로 올리고 글을 그 아래로 내린다.
   옆에 두면 글 칸이 165px 밖에 안 되서 19px 제목이 세 줄로 쌀린다.
   위로 올리면 섬네일이 칸 폭을 다 쓰고(307px) 글도 편하게 들어간다.
   🔸 이 카드 둘은 이미 위아래로 쌓여 있으니(.roadmap-pair) 가로로 비교할 상대가 없다. */
@media (max-width: 760px) {
  .roadmap-pair .course-row-card.compact {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 12px;
  }
}

.roadmap-note {
  margin: 4px 0 0;
  padding: 12px 16px;
  border-radius: 10px;
  background: #fff6e6;
  color: #8a6410;
  font-size: 15px;
  font-weight: 760;
  line-height: 1.55;
}

.roadmap-note strong {
  font-weight: 900;
}

/* 로드맵 카드의 섬네일은 링크(a)라도 기존 course-art 비율을 그대로 유지 */
.course-row-card > a.course-art {
  display: block;
}

/* ── 목록 카드 한 식구 (여기가 기본값이다) ────────────────────────────
   변형이 셋 있다. 셋 다 이 규칙 위에 얹힌다 —
     .featured.has-pack   대표 카드 · 섬네일 두 장          (「목록 카드에서도 …」 절)
     .compact             2단계 아카이브 · 좌우 한 쌍        (「3단계 아카이브는 …」 절)
     (아무것도 안 붙은 것)  무료강의 같은 보통 카드

   🔴 **남는 쪽은 가운데로 둔다 — 그래서 align-items 가 center 다.**
      2026-08-18 까지 여기가 `start` 였다. 그러면 그림이 본문보다 짧을 때
      남는 만큼이 **전부 섬네일 아래 빈칸**으로 몰린다.
      변형 셋은 저마다 `center` 를 적어 그 자리를 때웠는데,
      그것을 안 적은 무료강의 카드에는 8/18 까지 20px 빈칸이 남아 있었다.
      🔴 때우지 말고 기본값을 뒤집는다 — 새 변형은 적지 않아도 저절로 옳다.
         (34-2 에서 회원 기록에 한 것과 같은 자리다)
      🔸 몇 px 이 남든 위아래로 갈리면 '빈칸' 이 아니라 '여백' 으로 읽힌다.

   🔴 **그림을 먼저 크게 잡고 칸을 거기 맞춘다.** 칸을 %로 잡으면
      본문 글이 길어질수록 그림이 작아진다 — 좁은 폭에서 반드시 되풀이된다.
      그래서 그림이 알아볼 수 없게 작아지기 전에 **세로로 세운다**(아래 각 변형의 미디어쿼리). */
.course-row-card {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  padding: 18px;
  border: 1px solid rgba(79, 95, 104, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-soft);
}

.course-row-card.featured {
  border-color: rgba(185, 138, 54, 0.42);
  background: rgba(255, 251, 242, 0.88);
}

.course-row-card .course-art {
  aspect-ratio: 16 / 9;
}

.course-row-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.course-row-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.instructor {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.course-row-card h3 {
  margin: 8px 0 0;
  font-size: 22px;
  line-height: 1.3;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  min-height: 28px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
}

.chip.muted {
  background: #eef1f2;
  color: var(--muted);
}

.row-desc {
  margin: 10px 0 0;
  color: #40505a;
  font-size: 15px;
  font-weight: 750;
}

.row-highlight {
  display: inline-block;
  width: fit-content;
  margin-top: 10px;
  padding: 7px 12px;
  border-radius: 8px;
  background: #fff6e6;
  color: #8a6410;
  font-size: 14px;
  font-weight: 800;
}

.course-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
}

.row-price {
  font-size: 22px;
  font-weight: 900;
  color: #21333d;
}

.row-price.free {
  color: var(--green);
}

/* 오픈 기념 할인 딱지 — 정가 취소선 바로 앞에 붙는다 (2026-09-04 소담).
   지금 값이 왜 싼지를 한 낱말로 알려 준다. 좁은 카드에서는 줄바꿈 없이 붙도록 nowrap. */
.open-sale {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  /* 🔴 흰 글자 11px 이라 4.5 를 넘어야 한다 (2026-09-06 재서 확인).
     #d94141 은 4.39 로 아슬아슬하게 미달이었다 — 한 걸음만 어둡게 했다(4.53).
     ⚠️ 눈으로는 같은 빨강이다. 재야만 보인다. */
  background: #d83c3c;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* 좁은 카드(입문·실전 나란히)에서는 한 칸 더 줄인다. */
.roadmap-pair .course-row-card.compact .open-sale {
  margin-right: 4px;
  padding: 1px 5px;
  font-size: 10px;
}

/* 정가(취소선) — 할인 판매 중일 때만 판매가 앞에 붙는다. */
.row-list-price {
  margin-right: 8px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
  text-decoration: line-through;
}

.row-cta {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  background: #21333d;
  color: #fff;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
}

.course-row-card.featured .row-cta {
  background: #906923;
}

/* 강의 상세 페이지 */
.course-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 26px;
  align-items: stretch;
  margin-top: 10px;
}

/* 대표 이미지는 16:9 원본 그대로 보여준다.
   예전에는 오른쪽 구매 패널 높이에 맞춰 세로로 늘어났고(align-items: stretch),
   그만큼 object-fit: cover 가 좌우를 잘라내 강의 제목과 '30년'의 앞글자가 사라졌다.
   비율을 고정하고 위쪽에 붙여 두면 패널이 아무리 길어져도 잘리지 않는다. */
.course-detail-hero .course-art {
  align-self: start;
  aspect-ratio: 16 / 9;
  min-height: 0;
  border-radius: 10px;
}

.detail-buy-panel {
  padding: 22px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: start;
  position: sticky;
  top: 16px;
}

.detail-eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

.detail-title {
  margin: 4px 0 0;
  font-size: 24px;
  line-height: 1.3;
}

.detail-instructor-line {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

/* 구매 패널 안의 한 줄 강의 요약. 혜택 목록과 가격 사이에서 톤을 잡는다. */
.detail-lead {
  margin: 2px 0 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: #40505a;
  font-size: 15px;
  font-weight: 760;
  line-height: 1.6;
}

.detail-buy-panel .row-price {
  font-size: 24px;
}

.buy-button {
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  background: #21333d;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 🔴 못 누르는 상태를 눈에 보이게 한다 (2026-08-08).
   규칙이 아예 없어서, 막아 놓아도 겉모습이 똑같았다. 두 자리에서 문제였다 —
   ① 이미 수강 중이라 막은 때  ② 결제창을 여는 동안 두 번 눌리지 않게 막는 때.
   ②는 특히 나쁘다. 아무 반응이 없어 보이니 손님이 계속 누른다.
   8/6 에 어드민 대시보드에서 고친 것과 같다 — 눌러도 안 되는 것을 눌러 보게 두지 않는다. */
.buy-button:disabled {
  background: #8a9aa3;
  cursor: not-allowed;
}

.benefit-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.benefit-list li {
  padding-left: 20px;
  position: relative;
  color: #34424a;
  font-size: 14px;
  font-weight: 780;
}

.benefit-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--blue);
  font-weight: 900;
}

.detail-section {
  margin-top: 32px;
}

.detail-section h2 {
  margin: 0 0 14px;
  font-size: 22px;
}

.badge-section-note {
  margin: -8px 0 16px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 750;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

.badge-card {
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

/* 못 딴 카드 (2026-08-04).
   🔴 흑백 100% · 투명도 0.35 였다. 그러면 여섯 칸이 회색 벽으로 서서
      2026-07-31 에 이 칸을 통째로 접게 만들었던 그 화면으로 돌아간다.
      지금은 '아직 아닌 것'이지 '없는 것'이 아니므로 형태와 색은 남긴다 —
      내 동전이 그 테를 두르면 어떻게 되는지가 보여야 갖고 싶어진다. */
.badge-card.locked {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}

.badge-card.locked .badge-icon-wrap img {
  filter: grayscale(0.6);
  opacity: 0.55;
}

.badge-card.locked strong {
  color: var(--ink-soft);
}

.badge-card.locked .badge-desc {
  color: var(--muted);
}

/* 진행 — 조건문을 눈금으로 바꾸는 자리.
   "7일 연속 참여"만 적혀 있으면 4일째인 사람에게도 0일째와 같은 화면이다. */
.badge-progress {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.badge-progress-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.badge-progress-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--blue);
  /* 0일째에도 막대가 보이게 — 완전히 비면 고장으로 읽힌다 */
  min-width: 3px;
}

.badge-progress-text {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 750;
  color: var(--ink-soft);
}

/* 아직 줄 수 없는 배지 — 조건이 아니라 사정을 밝힌다 */
.badge-card .badge-meta.badge-pending {
  color: var(--gold-ink);
}

.badge-icon-wrap {
  position: relative;
  width: 92px;
  margin: 0 auto 12px;
}

/* 테두리 배지 (2026-08-04).
   🔴 그림 여섯 장이 모두 같은 규격이다 — 캔버스 1216, 구멍 729, 구멍은 정중앙.
      그래서 테두리를 원하는 크기로 놓고 동전을 그 59.95%(=729/1216)로 두면 저절로 맞는다.
      숫자를 손으로 맞추려 들면 테두리마다 어긋난다. */
.badge-ring {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.badge-ring-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.badge-ring-coin {
  position: absolute;
  width: 59.95%;
  height: 59.95%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: block;
}

.badge-icon-wrap > img {
  width: 100%;
  height: auto;
  display: block;
}

.badge-count {
  position: absolute;
  top: -4px;
  right: -10px;
  min-width: 24px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.badge-card strong {
  display: block;
  font-size: 15px;
}

.badge-card .badge-desc {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.badge-card .badge-meta {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
  color: var(--muted);
  font-weight: 750;
}

.badge-card.earned .badge-meta {
  color: var(--green);
}

/* ── 등급 안내 (2026-08-03) ──────────────────────────────────
   사다리 여섯 칸. 가로로 밀리게 두는 이유 — 좁은 화면에서 두 줄로 접히면
   '올라가는 길'로 안 읽히고 그냥 목록이 된다. 계단은 한 줄이어야 계단이다. */
.tier-ladder {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(84px, 1fr);
  gap: 8px;
  overflow-x: auto;
  /* 🔴 위쪽 여백을 넉넉히 둔다. overflow-x:auto 는 위아래도 함께 잘라내서,
     칸 위로 삐져나온 '지금' 표가 통째로 잘렸다(2026-08-03). */
  padding: 16px 2px 10px;
  /* 스크롤이 있다는 것을 손가락 없이도 알 수 있게 */
  scrollbar-width: thin;
}

/* 🔴 휴대폰에서는 위 scrollbar-width 가 아무 일도 하지 않는다 (2026-08-07 실측).
   막대가 자리를 **0px** 차지한다 — 손을 대야 잠깐 뜨는 겹침 막대라서다.
   375px 에서 사다리는 640px 이고 **46%가 화면 밖**이었다. 손님 눈에는
   신동~적동 네 칸이 전부이고, 흑동·사동이 있다는 것을 알 길이 없었다.

   그래서 가장자리를 흐리게 지운다. 배경색을 몰라도 되는 방법이라
   (덮는 게 아니라 내용을 투명하게 만든다) 어느 화면에 놓아도 맞는다.
   더 갈 데가 없으면 tier-guide.js 가 클래스를 떼어 흐림도 사라진다. */
.tier-ladder.has-more-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

.tier-ladder.has-more-left {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
}

.tier-ladder.has-more-left.has-more-right {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent, #000 40px, #000 calc(100% - 40px), transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent, #000 40px, #000 calc(100% - 40px), transparent
  );
}

.tier-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 6px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  text-align: center;
}

/* 아직 못 간 칸은 흐리게 — 지나온 길과 남은 길이 한눈에 갈린다 */
.tier-step:not(.reached) {
  opacity: 0.45;
}

.tier-step.is-now {
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: var(--shadow-soft);
}

.tier-step-coin {
  width: 42px;
  height: auto;
  display: block;
}

.tier-step-name {
  font-size: 15px;
  font-weight: 900;
}

.tier-step-hanja {
  font-size: 12px;
  color: var(--muted);
  font-weight: 750;
}

.tier-step-exp {
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

/* 사동 — 사다리 밖의 한 칸.
   내공으로 오르는 자리가 아니라 소속으로 주어지는 자리다.
   앞에 여백과 세로선을 둬서 "흑동 다음 칸"으로 읽히지 않게 떼어 놓는다. */
.tier-step.is-master {
  margin-left: 14px;
  border-style: dashed;
  border-color: var(--gold);
  background: rgba(185, 138, 54, 0.06);
  position: relative;
}

.tier-step.is-master::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 12px;
  bottom: 12px;
  border-left: 1px solid var(--line);
}

.tier-step.is-master .tier-step-exp {
  color: var(--gold-ink);
  font-weight: 900;
}

/* 사동은 못 갔다고 흐려 두지 않는다 — 오르는 자리가 아니라 받는 자리다 */
.tier-step.is-master:not(.reached) {
  opacity: 1;
}

.tier-master-note {
  margin: 8px 0 0;
  padding-left: 11px;
  border-left: 2px solid var(--gold);
  font-size: 14px;
  font-weight: 750;
  color: var(--muted);
}

/* 등급 안의 다섯 단계. 5 → 1 로 줄어들면서 올라간다.
   지금 단계만 진하게 짚어 준다 — 다섯 개를 다 진하게 하면 어느 칸인지 안 보인다. */
.tier-step-subs {
  display: flex;
  gap: 3px;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  opacity: 0.7;
}

.tier-step-subs b {
  color: var(--blue);
  font-weight: 900;
  opacity: 1;
  /* 지금 단계에 동그라미를 둘러 눈이 먼저 가게 */
  background: #fff;
  border: 1px solid var(--blue);
  border-radius: 999px;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  margin: -2px 0;
}

.tier-step-subs .tier-step-open {
  letter-spacing: 0.02em;
}

.tier-step-here {
  position: absolute;
  top: -9px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.5;
}

.tier-next {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink-soft);
}

.tier-next b {
  color: var(--ink);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* 내공 얻는 법 — 강의와 퀴즈를 갈라서 적는다.
   한 문단으로 뭉치면 하루 상한 50이 강의에도 걸리는 것처럼 읽힌다(퀴즈에만 걸린다). */
.tier-how {
  margin: 10px 0 0;
  display: grid;
  gap: 5px;
}

.tier-how-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0;
  font-size: 14px;
  font-weight: 750;
  color: var(--muted);
}

.tier-how-key {
  flex: none;
  min-width: 58px;
  padding: 1px 8px;
  border-radius: 5px;
  background: var(--ground-2, #e0eae8);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}

.tier-how-row b {
  color: var(--ink);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* ── 못 딴 배지 줄 (2026-08-03) ──────────────────────────────
   큰 회색 카드를 6개 세우면 화면이 빈 껍데기로 보인다(2026-07-31에 겪었다).
   작은 칩 한 줄이면 자리를 거의 안 먹으면서 목표는 보인다. */
/* 못 딴 배지를 작은 알약(.badge-chip)으로 밀어 두던 규칙은 2026-08-04 에 지웠다.
   여섯 개를 같은 카드로 세우기로 하면서 쓰는 곳이 없어졌다. */

/* [두르기] — 지금 두르고 있는 카드는 테를 둘러 표시한다 */
.badge-card.is-worn {
  border-color: var(--blue);
  box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--blue);
}

.badge-wear {
  margin-top: 10px;
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.badge-wear:hover:not(:disabled) {
  border-color: var(--blue);
  color: var(--blue);
}

.badge-wear:disabled {
  opacity: 0.5;
  cursor: default;
}

.badge-card.is-worn .badge-wear {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* 모은 수. 제목 옆이라 제목보다 작고 조용해야 한다 */
.badge-tally {
  margin-left: 8px;
  font-size: 15px;
  font-weight: 850;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 섹션 소제목(예: "10개 챕터 · 총 176강") */
.detail-section-sub {
  margin: -8px 0 16px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 780;
}

/* "이런 분께 추천" 체크 리스트 */
.recommend-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.recommend-list li {
  position: relative;
  padding: 14px 16px 14px 46px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: #34424a;
  font-size: 15px;
  font-weight: 760;
}

.recommend-list li::before {
  content: "✓";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.recommend-list strong {
  color: #21333d;
}

/* 강의 소개 본문 */
.intro-copy p {
  margin: 0 0 14px;
  color: #3c4a52;
  font-size: 16px;
  font-weight: 640;
  line-height: 1.75;
}

.intro-copy p:last-child {
  margin-bottom: 0;
}

.intro-copy strong {
  color: #21333d;
  font-weight: 820;
}

/* 강사 소개 카드 */
/* 이력이 붙으면서 오른쪽이 훨씬 길어졌다(2026-08-02).
   align-items:center 로 두면 사진이 카드 한가운데에 떠서 이름과 어긋난다. */
.instructor-card {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(233, 245, 250, 0.5), var(--panel) 60%);
  box-shadow: var(--shadow-soft);
}

.instructor-portrait {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: sticky;
  top: 20px;
}

.instructor-portrait img {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
}

.instructor-name {
  display: block;
  font-size: 20px;
  color: #1c2830;
}

.instructor-role {
  margin: 4px 0 12px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 850;
}

.instructor-bio p {
  margin: 0 0 10px;
  color: #45535b;
  font-size: 15px;
  font-weight: 680;
  line-height: 1.7;
}

.instructor-bio p:last-of-type {
  margin-bottom: 0;
}

/* 실적 숫자 — 강사 소개에서 가장 먼저 눈에 들어와야 하는 자리.
   '30년'만 적혀 있을 때는 55만원짜리 강의를 파는데 강사에 대해
   알 수 있는 게 사실상 없었다(2026-08-02). */
.instructor-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
}

.instructor-stats span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.instructor-stats b {
  color: var(--blue);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* '+'는 숫자보다 한 단계 작게 — 30년과 3만 명이 먼저 읽혀야 한다. */
.instructor-stats i {
  font-style: normal;
  font-size: 15px;
  margin-left: 1px;
}

/* 이력 — 갈래(사사·학회·강의·운영)를 앞에 세워야 훑어볼 수 있다. */
.instructor-facts {
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.instructor-facts li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: #45535b;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.6;
}

.fact-label {
  flex: none;
  width: 38px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 850;
}

/* 커리큘럼 카드 그리드 */
.curriculum-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.curriculum-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.curriculum-card:hover {
  border-color: rgba(45, 111, 143, 0.28);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.cc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cc-no {
  font-size: 22px;
  font-weight: 900;
  color: var(--blue);
  letter-spacing: 0.02em;
}

.cc-count {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 13px;
  font-weight: 850;
}

.cc-title {
  display: block;
  font-size: 18px;
  color: #1f2b33;
}

.cc-desc {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 680;
  line-height: 1.6;
}

/* ===== 무료강의 페이지 "다음 단계" funnel 안내 =====
   무료 시청자를 사주퀴즈(붙잡기) → 유료 강의(수익)로 이어주는 두 카드. */
.next-step-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.next-step-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.next-step-card:hover {
  border-color: rgba(45, 111, 143, 0.28);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.next-step-card.featured {
  border-color: rgba(185, 138, 54, 0.42);
  background: #fffaf0;
}

.next-step-icon {
  flex: none;
  font-size: 24px;
  line-height: 1.2;
}

.next-step-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.next-step-body strong {
  font-size: 18px;
  color: #1f2b33;
}

.next-step-desc {
  color: var(--muted);
  font-size: 15px;
  font-weight: 680;
  line-height: 1.6;
}

.next-step-cta {
  margin-top: 4px;
  color: var(--blue);
  font-size: 15px;
  font-weight: 850;
}

.next-step-card.featured .next-step-cta {
  color: #906923;
}

/* 커리큘럼이 아직 안 나온 강의(입문·실전 아카이브)용 안내 카드. */
.curriculum-pending {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--panel);
  color: #45535b;
  font-size: 15px;
  font-weight: 720;
  line-height: 1.6;
}

.curriculum-pending::before {
  content: "📝";
  flex: none;
  font-size: 24px;
}

/* 마이페이지 '내 정보' (2026-08-02).
   기존 회원은 휴대폰이 없어서, 만세력이 내려주기 시작하기 전까지 여기서 받는다.
   닉네임·이메일은 만세력이 원본이라 읽기 전용으로 둔다. */
.my-profile-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 보기 모드 / 수정 모드 (2026-08-03).
   카드에 붙는 is-editing 한 가지로 전부 갈린다.
   요소마다 hidden 을 켜고 끄면 새 칸을 넣을 때 꼭 한 자리를 빠뜨린다. */
.my-profile-form .edit-only {
  display: none;
}

.my-profile-form.is-editing .view-only {
  display: none;
}

.my-profile-form.is-editing p.edit-only {
  display: block;
}

.my-profile-form.is-editing input.edit-only {
  display: block;
  width: 100%;
}

.my-profile-form.is-editing label.edit-only,
.my-profile-form.is-editing .my-edit-actions.edit-only {
  display: flex;
}

/* My Info 제목줄 — 오른쪽 끝에 [수정하기]를 앉힌다. */
.my-info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.btn-edit-profile {
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.btn-edit-profile:hover {
  background: #fff;
  color: var(--ink);
}

.my-edit-actions {
  gap: 8px;
}

.my-edit-actions .btn-save-profile {
  flex: 1;
}

.btn-cancel-profile {
  padding: 11px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--muted);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.btn-cancel-profile:hover {
  background: #fff;
  color: var(--ink-soft);
}

.my-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 보기 모드의 값. 입력칸처럼 보이면 안 된다 — 눌러도 안 고쳐지니까. */
.my-field-value {
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 700;
  word-break: break-all;
}

/* 아직 안 넣은 값은 옅게. 비어 보여야 채우고 싶어진다. */
.my-field-value.empty {
  color: var(--muted);
  font-weight: 650;
}

.my-field-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

/* 읽기 전용 항목은 입력칸처럼 보이면 안 된다 — 눌러도 안 고쳐지니까. */
.my-field.readonly b {
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 700;
  word-break: break-all;
}

/* 닉네임(text)과 휴대폰(tel) 두 칸이 같은 모양이어야 한다.
   예전에는 tel 만 꾸며 놔서, 닉네임을 입력칸으로 바꾸자 혼자 맨몸으로 나왔다. */
.my-field input[type="tel"],
.my-field input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
}

.my-field input[type="tel"]:focus-visible,
.my-field input[type="text"]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.my-field-note,
.my-field-help {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.my-field-note {
  padding-top: 2px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.my-agree {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
  cursor: pointer;
}

.my-agree input {
  margin-top: 2px;
  flex: none;
}

.btn-save-profile {
  padding: 11px 14px;
  border: 0;
  border-radius: 9px;
  background: var(--blue);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.btn-save-profile:hover {
  filter: brightness(1.06);
}

.btn-save-profile:disabled {
  opacity: 0.55;
  cursor: default;
}

.my-save-msg {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.my-save-msg.ok {
  color: var(--green);
}

.my-save-msg.err {
  color: #b0503c;
}

.my-save-msg.hint {
  color: var(--muted);
  font-weight: 650;
}

/* 단축키가 먹었다는 짧은 표시 (2026-08-03).
   영상 위에 잠깐 떴다 사라진다. 화면을 가리면 안 되므로 왼쪽 위 구석에 작게 둔다.
   pointer-events 를 꺼서 이 표시가 떠 있는 동안에도 영상을 누를 수 있게 한다. */
.video-hint {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 7px 13px;
  border-radius: 8px;
  background: rgba(17, 17, 17, 0.78);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  pointer-events: none;
}

/* 영상 아래 도움말 묶음 (2026-08-03).
   속도 조절과 단축키는 성격이 다르다 —
   속도는 손가락으로도 쓰는 기능이라 휴대폰에 남고, 단축키는 키보드가 있어야 쓴다.
   그래서 한 덩어리로 보이되 각각 따로 숨길 수 있게 감싼다. */
.player-help {
  margin-top: 12px;
}

/* 속도 안내를 단축키보다 앞·위에 둔다.
   "배속으로 듣고 싶다"가 수강생이 가장 자주 찾는 기능이라 먼저 눈에 닿아야 한다. */
.player-speed {
  margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.65;
}

.player-speed b {
  color: var(--ink);
  font-weight: 800;
}

/* 영상 아래 단축키 안내 (2026-08-02).
   재생 중에 눈이 가는 자리라 영상 바로 밑에 둔다. 다만 강의 제목보다 세면 안 되므로
   글자를 죽이고 한 줄로 흘린다. 좁은 화면에서는 알아서 여러 줄로 접힌다. */
.player-keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
}

.player-keys-title {
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 800;
}

.player-keys kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #fff;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  line-height: 1.5;
}

/* 이 한 줄만 끝으로 밀어 둔다 — 단축키가 아니라 조건이라 성격이 다르다. */
.player-keys-note {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

/* 휴대폰에는 키보드가 없다. 그런데 접히면서 136px 를 잡아먹어,
   영상 바로 아래 가장 좋은 자리를 쓸모없는 안내가 차지하게 된다. */
@media (max-width: 720px) {
  .player-keys {
    display: none;
  }
}

/* 부가세 표기 (2026-08-02).
   원격평생교육시설 신고가 없어 교육용역 면세가 아니다 → 과세 사업자다.
   소비자 대상 판매는 총액 표시가 의무라 사이트의 모든 가격이 부가세를 포함한 값이고,
   이 문구들이 그 사실을 밝힌다. 가격 옆에 붙지만 가격을 이기면 안 되므로 작고 흐리게.
   🔴 나중에 면세 신고를 마치면 이 문구들을 지워야 한다. */
/* .detail-buy-panel 이 flex column 이라, 감싸지 않으면 '부가세 포함'이 제 행으로 떨어진다. */
.price-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.price-vat {
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}

.order-vat {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  text-align: right;
}

/* 이미 수강 중인 강의를 또 사려 할 때 (2026-08-08).
   경고가 아니라 안내다 — 손님이 잘못한 것이 없으므로 붉게 하지 않는다.
   대신 결제 버튼 바로 위에 두어, 누르기 전에 반드시 지나가게 한다. */
.order-owned {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent, #2d6f8f);
  border-radius: 10px;
  background: var(--surface-2, rgba(45, 111, 143, 0.06));
}
.order-owned p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  word-break: keep-all;
}
.order-owned-go {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent, #2d6f8f);
  text-decoration: none;
}
.order-owned-go:hover {
  text-decoration: underline;
}

.roadmap-vat {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* 혜택 줄에 붙는 부연(예: PRO 누적 조건). 본문보다 한 단계 죽여서 읽는 흐름을 막지 않는다. */
.benefit-sub {
  color: #6b7a83;
  font-size: 14px;
  font-weight: 600;
}

/* 입문 아카이브처럼 회차와 단원이 1:1로 맞지 않는 강의에 붙이는 단서.
   구매 전에 알아야 하는 내용이라 카드 아래에 눈에 띄게 둔다. */
.curriculum-note {
  margin-top: 16px;
  padding: 14px 16px;
  border-left: 3px solid var(--blue);
  border-radius: 0 8px 8px 0;
  background: var(--panel);
  color: #45535b;
  font-size: 15px;
  line-height: 1.7;
}

.curriculum-table {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
}

.curriculum-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 780;
}

.curriculum-row:last-child {
  border-bottom: 0;
}

.curriculum-row .ch-no {
  color: var(--blue);
  font-weight: 900;
}

.curriculum-row .ch-count {
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}

.upgrade-box {
  margin-top: 32px;
  padding: 18px 20px;
  border-radius: 10px;
  border: 1px solid rgba(185, 138, 54, 0.32);
  background: rgba(255, 251, 242, 0.86);
}

.upgrade-box h2 {
  margin: 0 0 6px;
  font-size: 18px;
  color: #8a6410;
}

.upgrade-box p {
  margin: 0;
  color: #6b5225;
  font-size: 15px;
  font-weight: 760;
}

.bottom-cta {
  margin-top: 34px;
  padding: 22px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* 사전예약/문의 페이지 */
.enroll-panel {
  max-width: 560px;
  margin: 10px auto 0;
  padding: 24px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.enroll-panel p.lead {
  margin: 8px 0 20px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 750;
}

.enroll-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.enroll-field label {
  font-size: 14px;
  font-weight: 800;
  color: #34424a;
}

.enroll-field input,
.enroll-field select,
.enroll-field textarea {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
}

.enroll-field textarea {
  min-height: 88px;
  padding: 10px 12px;
  resize: vertical;
}

.enroll-submit {
  width: 100%;
  min-height: 46px;
  margin-top: 6px;
  border: 0;
  border-radius: 8px;
  background: #21333d;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

.enroll-success {
  display: none;
  padding: 20px;
  border-radius: 8px;
  background: #eef7f1;
  color: #315f48;
  font-size: 15px;
  font-weight: 780;
  text-align: center;
}

.enroll-success.show {
  display: block;
}

.enroll-panel.submitted form {
  display: none;
}

/* ===== 수강 신청(결제) 화면 ===== */
.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 24px;
  margin-top: 18px;
  align-items: start;
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.checkout-block {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.checkout-block h2 {
  margin: 0 0 12px;
  font-size: 18px;
}

.checkout-select {
  width: 100%;
  /* 고르는 칸은 가장 긴 항목 이름만큼 최소 폭을 갖는다. 좁은 화면에서 그대로 두면
     칸을 밀어내므로 줄어들 수 있게 한다. */
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  font-size: 15px;
  font-weight: 780;
  color: #21333d;
}

.checkout-upgrade {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(185, 138, 54, 0.4);
  border-radius: 8px;
  background: #fffaf0;
  color: #6b5225;
  font-size: 15px;
  font-weight: 780;
  cursor: pointer;
}

.checkout-upgrade b {
  color: #8a6410;
}

/* ── 환불·청약철회 규정 페이지 ── */
.policy-wrap {
  max-width: 860px;
  margin: 0 auto 60px;
  padding: 28px 30px 34px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.policy-summary {
  padding: 20px 22px 18px;
  margin-bottom: 30px;
  border: 1px solid rgba(45, 111, 143, 0.24);
  border-radius: 10px;
  background: var(--blue-soft);
}

.policy-summary h2 {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 850;
  color: var(--blue);
}

.policy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.policy-table th,
.policy-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(45, 111, 143, 0.18);
  text-align: left;
  vertical-align: middle;
}

.policy-table thead th {
  font-size: 13px;
  font-weight: 850;
  color: var(--blue);
}

.policy-table tbody tr:last-child td {
  border-bottom: 0;
}

.policy-table td {
  color: #3d4d56;
  font-weight: 720;
}

.policy-good {
  color: var(--green);
}

.policy-bad {
  color: #a8342b;
}

.policy-note {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px dashed rgba(45, 111, 143, 0.3);
  color: #3d4d56;
  font-size: 14px;
  font-weight: 720;
  line-height: 1.6;
}

.policy-h2 {
  margin: 30px 0 10px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -0.2px;
}

.policy-wrap > .policy-h2:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.policy-wrap p {
  margin: 0 0 10px;
  color: #46565f;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.72;
}

.policy-ol {
  margin: 0 0 10px;
  padding-left: 20px;
  color: #46565f;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.72;
}

.policy-ol li {
  margin-bottom: 8px;
}

.policy-ol b,
.policy-wrap p b {
  color: #21333d;
  font-weight: 850;
}

.policy-formula {
  margin: 10px 0 4px;
  padding: 13px 16px;
  border-radius: 8px;
  background: #f2f6f8;
  color: #21333d;
  font-size: 15px;
  font-weight: 850;
  text-align: center;
}

.policy-example {
  margin: 16px 0 4px;
  padding: 16px 18px;
  border: 1px solid rgba(79, 127, 103, 0.28);
  border-radius: 9px;
  background: #f0f7f3;
}

.policy-example > b {
  display: block;
  margin-bottom: 8px;
  color: #2b5a45;
  font-size: 14px;
  font-weight: 850;
}

.policy-example p {
  margin: 0 0 6px;
  font-size: 14px;
  color: #46565f;
}

.policy-example-calc {
  margin: 8px 0 0 !important;
  font-size: 15px !important;
  color: #2b5a45 !important;
  font-weight: 800 !important;
}

.policy-caution {
  margin-top: 8px;
  color: var(--muted) !important;
  font-size: 14px !important;
}

.policy-addendum {
  margin-top: 34px;
  padding: 18px 20px;
  border-radius: 9px;
  background: #f4f6f8;
}

.policy-addendum > b {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 850;
}

.policy-addendum p {
  margin: 0 0 6px;
  font-size: 14px;
}

.policy-back {
  margin-top: 30px !important;
  text-align: center;
}

.policy-back a {
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 760px) {
  .policy-wrap {
    padding: 22px 18px 26px;
  }

  .policy-table th,
  .policy-table td {
    padding: 9px 8px;
    font-size: 14px;
  }
}

/* 강의 상세 구매 패널의 '무료 강의로 미리 보기' 안내.
   전자상거래법이 요구하는 '시험 사용 기회 제공'을 실제로 안내하는 역할도 한다. */
/* 무료 강의 — 로드맵 번호에서 빼고 맨 아래 안내로 (2026-08-16).
   순서의 첫 칸이 아니라 **찾는 사람이 찾는 자리**다. 단계 카드보다 조용하게 둔다. */
/* 곁들이 자리 — 번호 매긴 차례 밖에 둔다 (2026-09-04).
   복습용 아카이브와 무료 강의가 여기 온다. 파는 차례에 끼면 "또 사야 하나" 로 읽힌다. */
.roadmap-extra {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.extra-lead {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.55;
}

.extra-lead b {
  color: var(--ink-2, #3f5058);
  font-weight: 850;
}

.roadmap-free {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.free-lead {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.55;
}

.free-lead b {
  color: var(--ink-2, #3f5058);
  font-weight: 850;
}

/* 🎁 마스터 = 두 강의 (2026-08-16).
   값을 안 받는 것일수록 눈에 보여야 한다 — 글로만 적어 두면 혜택인 줄 모르고 지나가고,
   나중에 강의실에서 발견하면 혜택이 아니라 사고로 읽힌다. */
.pack-visual {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 10px;
}

.pack-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pack-item img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
}

.pack-item b {
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
}

.pack-item span {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

/* 낱개 값은 취소선으로 — '이만큼을 안 받는다'가 한눈에 보인다 */
.pack-item span em {
  font-style: normal;
  text-decoration: line-through;
  opacity: 0.75;
}

.pack-plus {
  flex: none;
  font-size: 22px;
  font-weight: 850;
  color: var(--green);
  /* 그림 두 장의 가운데에 오게 — 아래 글자 높이만큼 올린다 */
  align-self: center;
}

.pack-note {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2, #3f5058);
  line-height: 1.55;
}

.pack-note b {
  color: var(--green);
  font-weight: 850;
}

/* 휴대폰에서는 두 장을 위아래로 쌓는다. 나란히 두면 한 장이 150px 밑으로 내려가
   무엇인지 알아볼 수 없다 (8/7 모바일 검토에서 배운 것). */
@media (max-width: 560px) {
  .pack-visual {
    flex-direction: column;
    gap: 8px;
  }

  .pack-item {
    width: 100%;
  }

  .pack-plus {
    font-size: 18px;
  }
}

/* 무료 강의로 가는 길 — 강의 소개 화면 **맨 아래**에 둔다 (2026-08-16).
   원래는 결제 버튼 바로 아래(.buy-try-note)였다. 사려고 버튼까지 온 사람에게
   "망설여지시면"이라고 먼저 말을 거는 자리라 떼어 냈다.
   없애지는 않는다 — 정말 망설이는 사람에게는 환불보다 나은 길이다. */
.free-fallback {
  max-width: 1120px;
  margin: 8px auto 40px;
  padding: 0 20px;
}

.free-fallback p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.free-fallback a {
  color: var(--green);
  font-weight: 850;
}

/* ── 청약철회 고지 (전자상거래법 제17조 6항 요건) ──
   눈에 잘 띄어야 법적 효력이 있으므로 일부러 배경·테두리를 준다. */
.withdraw-block {
  border: 1px solid rgba(169, 116, 26, 0.34);
  background: #fdf8ee;
}

.withdraw-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 850;
  color: #7a5c17;
}

.withdraw-list {
  margin: 0;
  padding-left: 18px;
  color: #4a5b64;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.65;
}

.withdraw-list li {
  margin-bottom: 7px;
}

.withdraw-list li:last-child {
  margin-bottom: 0;
}

.withdraw-list b {
  color: #21333d;
  font-weight: 850;
}

.withdraw-key {
  padding: 9px 12px;
  margin-left: -6px;
  border-radius: 7px;
  background: rgba(169, 116, 26, 0.1);
  list-style-position: inside;
}

.withdraw-sub {
  display: block;
  margin-top: 4px;
  color: #6b7a83;
  font-size: 13px;
  font-weight: 700;
}

.withdraw-try-note {
  /* 법이 요구하는 '시험 사용 기회' 고지. 광고가 아니라 안내라 눈에 덜 띄게 둔다
     (2026-08-16 — 여기 있던 큰 CTA 상자를 강의 소개 화면 아래로 옮겼다). */
  color: var(--ink-3, #6b7a82);
}

.withdraw-try {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(79, 127, 103, 0.28);
  border-radius: 8px;
  background: #f0f7f3;
}

.withdraw-try-text {
  flex: 1;
  min-width: 220px;
  font-size: 14px;
  line-height: 1.55;
}

.withdraw-try-text b {
  display: block;
  color: #2b5a45;
  font-weight: 850;
}

.withdraw-try-text span {
  color: #557063;
  font-weight: 700;
  font-size: 13px;
}

.withdraw-try-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  font-size: 14px;
  font-weight: 850;
  text-decoration: none;
}

.withdraw-try-link:hover {
  background: #3f6a55;
}

/* 아카이브 함께 담기 — 체크박스 2개(입문/실전) 묶음 */
.checkout-addon-title {
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 850;
  color: #6b5225;
}

.checkout-addon-title span {
  font-weight: 750;
  color: #8a6410;
}

#addonRow .checkout-upgrade {
  margin-top: 8px;
}

.checkout-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 4px;
  color: #34424a;
  font-size: 15px;
  font-weight: 760;
  cursor: pointer;
}

.checkout-upgrade input,
.checkout-agree input {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  accent-color: var(--blue);
}

.checkout-note {
  margin: 0;
  padding: 13px 15px;
  border-radius: 10px;
  background: var(--blue-soft);
  color: #2c5266;
  font-size: 14px;
  font-weight: 720;
  line-height: 1.55;
}

/* 내 쿠폰함 (2026-08-15) — 소담이 지목해 준 쿠폰을 눌러서 쓴다 */
.my-coupons {
  margin-bottom: 12px;
}

.my-coupons-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 820;
  color: var(--green);
}

.my-coupon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.my-coupon {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* 🔴 휴대폰에서 손가락으로 누르는 것이라 44px 아래로 내려가면 안 된다.
     8/7 모바일 검토에서 같은 이유로 여러 단추를 키웠다. */
  min-height: 52px;
  padding: 8px 14px;
  border: 1.5px solid var(--green);
  border-radius: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.my-coupon b {
  font-size: 15px;
  font-weight: 850;
  color: var(--green);
}

.my-coupon span {
  /* 🔴 12px 이하로 내리지 않는다. 사파리가 16px 미만 입력칸에서 화면을 확대하는 문제와는
     다른 이야기지만, 유효기간은 손님이 실제로 읽는 값이라 작으면 안 읽는다. */
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3, #6b7a82);
}

.my-coupon.is-on {
  background: var(--green);
}

.my-coupon.is-on b,
.my-coupon.is-on span {
  color: #fff;
}

/* 이 강의에는 못 쓰는 쿠폰. 지우지 않고 흐리게 둔다 —
   안 보이면 "받았다던 쿠폰이 사라졌다"는 문의가 온다. */
.my-coupon.is-off {
  border-color: var(--line-strong);
  opacity: 0.55;
  cursor: not-allowed;
}

.my-coupon.is-off b {
  color: var(--ink-3, #6b7a82);
}

/* 마이페이지 쿠폰함 — 보여주기만 한다(누르는 것은 결제 화면) */
.my-coupon-card .my-coupon-list {
  flex-direction: column;
}

.my-coupon.is-static {
  width: 100%;
  cursor: default;
}

.my-coupon-empty {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-3, #6b7a82);
}

.my-coupon-note {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3, #6b7a82);
}

/* ── 소담만세력 쿠폰 (2026-08-16) ──────────────────────────
   🔴 우리 쿠폰과 색을 다르게 둔다(금색). 같은 초록이면 결제 화면에서
      누를 수 있는 줄 알고 눌러 보다가 "왜 안 되지" 가 된다.
      여기 것은 만세력에서만 쓴다. */
/* 🔴 `.my-coupon-list` 를 앞에 붙여 둔다. 마이페이지 쿠폰함은 `.summary-card` 안에 있고
      거기 `.summary-card p { color: var(--muted) }` 가 더 세다 — 안 붙이면 회색이 된다.
      (2026-08-16 에 실제로 회색으로 떴다) */
/* ── 쿠폰함 묶음 제목 (2026-08-20 소담 요청) ────────────────────
   소담: *"아카데미 쿠폰이랑 만세력 쿠폰이랑 구분돼서 볼 수 있었으면 좋겠고,
          레이아웃이 좀 보기 좋았으면 좋겠어."*

   🔴 전에는 **만세력 쪽에만** 제목이 있었다. 그래서 위쪽 「받으신 쿠폰이 없습니다」가
      무엇이 없다는 말인지 알 수 없었다 — 바로 아래 만세력 쿠폰은 세 장이나 있는데.
   🔸 `.my-coupon-list` 를 앞에 붙여 둔다. 쿠폰함은 `.summary-card` 안에 있고
      거기 `.summary-card p { color: var(--muted) }` 가 더 세다 — 안 붙이면 회색이 된다.
      (2026-08-16 에 실제로 회색으로 떴다) */
.my-coupon-list .coupon-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 850;
}

.my-coupon-list .coupon-group-head.is-academy {
  color: var(--green);
}

/* 🔴 만세력 묶음은 **선을 그어** 위와 갈라 놓는다. 쓰는 곳이 다른 쿠폰이라
      한 덩어리로 보이면 아카데미 결제에 쓸 수 있는 줄 안다. */
.my-coupon-list .coupon-group-head.is-manse {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--gold-ink);
}

/* 몇 장인지 — 제목 옆 작은 알약. 접혀 있어도 "있다" 가 보여야 한다 */
.coupon-group-count {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(79, 95, 104, 0.1);
  color: var(--ink-3, #6b7a82);
  font-size: 12px;
  font-weight: 800;
}

.my-coupon.is-manse {
  border-color: var(--gold);
}

.my-coupon.is-manse b {
  color: var(--gold-ink);
}

/* 이미 쓴 쿠폰 — 지우지 않고 흐리게 남긴다(2026-08-16 소담 결정).
   무제한 회원 2년은 큰 혜택이라 "내가 받은 적 있다" 는 기록이 남아야 한다. */
.my-coupon.is-manse.is-used {
  border-color: var(--line-strong);
  opacity: 0.5;
}

.my-coupon.is-manse.is-used b {
  color: var(--ink-3, #6b7a82);
}

/* 저쪽이 느려서 못 읽었을 때 뜨는 줄. 제목과 같은 자리(선 아래)지만 회색이다 —
   금색이면 "쿠폰이 있다"로 읽힌다. 없는 게 아니라 못 읽은 것이다. */
.my-coupon-list .manse-coupon-warn {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* 결제 화면의 알림 한 줄. 🔴 회색 그대로 둔다 — 눈에 띄면 누르려 든다. */
.my-coupons .manse-coupon-hint {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3, #6b7a82);
}

/* 「눌러야 시작됩니다」 안내. 쿠폰 칸과 갈 곳 사이에 낀다. */
.my-coupon-list .manse-coupon-note {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink-3, #6b7a82);
}

.my-coupon-list .manse-coupon-note b {
  color: var(--gold-ink);
}

.my-coupon-list .manse-coupon-go {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 800;
  color: var(--gold-ink);
  text-decoration: underline;
}

/* 쿠폰 입력 */
.coupon-row {
  display: flex;
  gap: 8px;
}

.coupon-input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  font-size: 15px;
  font-weight: 700;
}

.coupon-apply {
  flex: none;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #21333d;
  color: #fff;
  font-size: 15px;
  font-weight: 850;
}

.coupon-message {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 780;
}

.coupon-message.is-ok {
  color: var(--green);
}

.coupon-message.is-error {
  color: #c0564e;
}

/* 약관 동의 */
.agree-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.agree-all {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  font-weight: 900;
  color: #1f2b33;
  cursor: pointer;
}

.agree-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.agree-item {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #45535b;
  font-size: 15px;
  font-weight: 720;
  cursor: pointer;
}

.agree-all input,
.agree-item input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--blue);
}

.agree-item span {
  flex: 1;
  min-width: 0;
}

.agree-link {
  flex: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  text-decoration: underline;
}

/* 주문 요약 금액 상세 */
.order-amount {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.order-amount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 760;
  color: #40505a;
}

.order-discount-row span:last-child {
  color: #c0564e;
  font-weight: 850;
}

/* 정가는 '얼마를 아끼는지'의 기준일 뿐이라 흐리게 두고, 취소선으로 옛 가격임을 알린다. */
#orderList {
  color: var(--muted);
  font-weight: 760;
}

/* 할인율은 금액보다 먼저 눈에 들어와야 한다 — 42%가 이 상품의 핵심이다. */
#orderPackageRate {
  margin-right: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(192, 86, 78, 0.1);
  font-size: 13px;
  font-weight: 900;
}

.order-legal {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 640;
  line-height: 1.55;
}

.order-legal a {
  color: var(--blue);
  font-weight: 800;
}

/* 오른쪽 주문 요약 (스크롤 따라옴) */
.order-summary {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.order-summary h2 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--muted);
}

.order-thumb {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
}

.order-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.order-badge {
  align-self: flex-start;
  margin: 4px 0 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

.order-name {
  font-size: 20px;
  line-height: 1.3;
  color: #1c2830;
}

.order-instructor {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.order-benefits {
  margin: 6px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.order-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.order-total span {
  font-size: 15px;
  font-weight: 800;
  color: #40505a;
}

.order-total b {
  font-size: 24px;
  font-weight: 900;
  color: #21333d;
}

.order-summary .buy-button {
  margin-top: 6px;
}

.order-secure {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

/* ===== 결제 성공·실패 결과 페이지 ===== */
.payment-result {
  max-width: 520px;
  margin: 30px auto 0;
}

.payment-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 34px 26px 30px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.payment-state h1 {
  margin: 18px 0 0;
  font-size: 24px;
}

.payment-sub {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 740;
  line-height: 1.6;
}

.payment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  font-size: 32px;
  font-weight: 900;
  color: #fff;
}

.payment-icon.success {
  background: var(--green);
}

.payment-icon.error {
  background: #c0564e;
}

.payment-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid var(--line);
  border-top-color: var(--blue);
  animation: paymentSpin 0.8s linear infinite;
}

@keyframes paymentSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .payment-spinner {
    animation-duration: 2.4s;
  }
}

.payment-receipt {
  width: 100%;
  margin: 22px 0 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(240, 244, 246, 0.7);
}

.payment-receipt div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
}

.payment-receipt dt {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.payment-receipt dd {
  margin: 0;
  color: #21333d;
  font-size: 15px;
  font-weight: 820;
  text-align: right;
  word-break: break-all;
}

.payment-receipt dd.mono {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.payment-hint {
  margin: 18px 0 0;
  padding: 12px 15px;
  border-radius: 10px;
  background: var(--blue-soft);
  color: #2c5266;
  font-size: 14px;
  font-weight: 720;
  line-height: 1.55;
}

.payment-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.payment-actions .buy-button {
  padding: 0 26px;
}

.payment-secondary {
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

/* MY 페이지 - 내 강의 */
/* 🔴 넓은 화면에서 카드를 **두 장씩** 놓는다 (2026-08-07 소담 지적).
   한 줄에 한 장이면 카드가 914px 이나 되는데 그림은 140px 뿐이라
   **우표가 붙은 것처럼** 보이고 오른쪽은 텅 빈다.

   두 장씩 놓으면 카드가 450px 이 되어 그림이 카드의 31% 를 차지한다 —
   휴대폰(309px 카드에 96px 그림 = 31%)과 **똑같은 비율**이다.
   화면이 넓어져도 카드가 늘어나기만 하는 것이 아니라 개수가 늘어난다. */
/* 🔴 카드 한 장이 지나치게 넓어지지 않게 막는다 (2026-08-07).
   강의가 한 개뿐이면 칸이 한 줄을 통째로 먹어 카드가 914px 이 됐다.
   그 폭에서는 그림이 아무리 커도 카드에 비해 작아 보인다. 560px 에서 끊는다.
   🔴 이어보기 줄(.resume-row)에는 걸지 않는다 — 그건 일부러 폭 전체를 쓴다. */
.enrolled-list .enrolled-card {
  max-width: 560px;
}

.enrolled-list {
  display: grid;
  /* 🔴 '화면 폭 몇 px 부터 두 장' 으로 자르지 않는다.
     처음에 761px 부터 두 장으로 했더니, 761px 에서 카드가 **319px** 로 쪼그라들어
     제목 칸이 149px 밖에 안 남았다 — 고치려던 문제가 그대로 재현됐다.
     대신 **한 장이 360px 를 못 받으면 두 장으로 안 나눈다** 고 정한다.
     자리가 나면 저절로 두 장이 되고, 좁으면 저절로 한 장으로 돌아온다. */
  /* 🔴 `min(360px, 100%)` 의 min() 을 빼면 안 된다.
     그냥 `minmax(360px, 1fr)` 로 두면 화면이 360px 보다 좁을 때도 칸이 360px 을
     차지해 **화면 밖으로 밀려난다.** 실제로 375·414·320px 에서 가로 스크롤이 생겼다. */
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 14px;
  /* 제목 아래 간격은 #myCourses .section-head 가 준다. 여기서 또 주면 두 겹이 된다. */
  margin-top: 0;
}

.enrolled-card {
  display: grid;
  /* 🔴 그림 칸을 **비율**로 잡되 위아래로 한계를 둔다 (2026-08-07).
     · 140px 로 못 박아 뒀더니 카드가 넓어질수록 그림만 그대로라 우표처럼 보였다
     · 그렇다고 32% 만 두면 이번엔 반대로, 카드가 914px 일 때 그림이 283×159 로 커져
       **윗줄이 159px 이나 되는데 제목은 48px 뿐**이라 옆이 텅 비었다
     110~180px 안에서만 32% 를 따른다. */
  grid-template-columns: minmax(110px, min(32%, 180px)) minmax(0, 1fr);
  /* 가로 틈은 그림과 제목 사이, 세로 틈은 윗줄과 아랫단 사이다. 값이 달라야 한다. */
  column-gap: 16px;
  row-gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

/* 그림은 16:9 그대로 두고 위에 붙인다. 예전처럼 최소 높이만 주면
   글이 길어질 때 그림이 함께 늘어나 좌우가 잘렸다. */
.enrolled-card .course-art {
  min-height: 0;
  aspect-ratio: 16 / 9;
  align-self: start;
}

/* 카드 속을 '윗줄(그림 옆)'과 '아랫단'으로 나눈다 (2026-08-07 소담 지적).
   넓은 화면에서는 지금까지와 똑같이 보인다 — 아랫단도 그림 옆 칸에 들어간다.
   좁은 화면에서만 아랫단이 카드 폭 전체로 내려온다(아래 미디어쿼리). */
.enrolled-main {
  min-width: 0;
  /* 그림이 제목보다 키가 크면 남는 자리가 생긴다. 위에 붙이면 아래가 텅 빈 것처럼
     보이므로 가운데에 맞춘다 — 그림과 제목이 나란히 읽힌다. */
  align-self: center;
}

.enrolled-title {
  display: block;
  font-size: 18px;
  line-height: 1.3;
}

/* 아랫단은 어느 폭에서든 카드 폭 전체를 쓴다.
   진행률 막대·강수/시간은 가로로 긴 정보라, 그림 옆 좁은 칸에 두면 늘 접힌다. */
.enrolled-foot {
  grid-column: 1 / -1;
  min-width: 0;
}

/* 제목과 첫 카드가 맞붙어 있었다 (2026-08-07 소담 지적 — 실측 0px).
   홈은 .course-list 가 margin-top:14px 로 띄우는데, 여기는 띄우는 것이 없었다. */
#myCourses .section-head {
  margin-bottom: 16px;
}

.enrolled-progress {
  margin-top: 10px;
}

.enrolled-progress .level-meter {
  margin-top: 6px;
}

.enrolled-progress-label {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

/* 몇 강 중 몇 강을 봤는지, 실제로 본 시간이 얼마인지.
   진행률 막대만으로는 "32%가 몇 강인지"를 알 수 없어 함께 적는다. */
.enrolled-detail {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.enrolled-total {
  opacity: 0.72;
  font-weight: 600;
}

/* 수강 중인 강의가 없거나 로그인 전일 때 */
.my-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}

.enrolled-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 12px;
}

.more-courses-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--blue);
  font-size: 15px;
  font-weight: 900;
}

.side-link-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.side-link-card a {
  color: var(--blue);
  font-size: 15px;
  font-weight: 900;
}

/* 강의 수강(재생) 페이지 */
.player-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  margin-top: 14px;
  align-items: start;
}

.video-frame {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: center / cover no-repeat;
  position: relative;
  overflow: hidden;
}

.video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(14, 26, 32, 0.32);
}

.video-frame .play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #21333d;
  font-size: 15px;
  font-weight: 900;
}

.player-info {
  margin-top: 16px;
}

.player-info h1 {
  margin: 0;
  font-size: 22px;
}

.player-info .chip-row {
  margin-top: 8px;
}

.player-progress {
  margin-top: 14px;
}

.chapter-sidebar {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  max-height: 560px;
  overflow-y: auto;
}

.chapter-sidebar .curriculum-row {
  cursor: pointer;
}

.chapter-sidebar .curriculum-row.active {
  background: var(--blue-soft);
}

/* 수강권/결제내역 페이지 */
.table-scroll {
  overflow-x: auto;
  margin-top: 14px;
}

.order-table {
  min-width: 620px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
}

.order-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 120px 110px;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 780;
}

.order-row:last-child {
  border-bottom: 0;
}

.order-row.head {
  background: #f3f6f7;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.order-status {
  display: inline-flex;
  padding: 0 10px;
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  background: #eef7f1;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  width: fit-content;
}

/* 환불된 주문은 결제완료와 확실히 구분되게 */
.order-status.is-refunded {
  background: #fbeae8;
  color: #b4443a;
}

.order-status.is-partial {
  background: #faf1de;
  color: #a9741a;
}

.order-substatus {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

/* 묶음 주문에 함께 담긴 아카이브 표시 */
.order-addons {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.orders-loading,
.orders-empty {
  margin: 22px 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 750;
}

.orders-empty a {
  color: var(--blue);
  font-weight: 850;
}

/* 퀴즈 더보기 페이지 */
.quiz-page-head p.row-desc {
  margin-top: 6px;
  font-size: 18px;
}

.quiz-page-head .eyebrow {
  font-size: 15px;
  letter-spacing: 0.04em;
}

.quiz-page-head h1 {
  margin: 0;
  font-size: 40px;
}

.quiz-head-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 10px;
}

.quiz-head-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.quiz-head-controls .quiz-mode-toggle {
  margin-bottom: 0;
}

.quiz-head-row .quiz-filter-bar {
  margin: 0;
}

@keyframes qmFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes qmCheckPop {
  0% { transform: translateY(-50%) scale(0); opacity: 0; }
  60% { transform: translateY(-50%) scale(1.3); opacity: 1; }
  100% { transform: translateY(-50%) scale(1); opacity: 1; }
}

@keyframes qmShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

@keyframes qmGlowCorrect {
  0% { box-shadow: 0 0 0 0 rgba(79, 127, 103, 0.45); }
  100% { box-shadow: 0 0 0 18px rgba(79, 127, 103, 0); }
}

@keyframes qmGlowWrong {
  0% { box-shadow: 0 0 0 0 rgba(177, 86, 79, 0.4); }
  100% { box-shadow: 0 0 0 18px rgba(177, 86, 79, 0); }
}

@keyframes qmScorePulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.quiz-side-col {
  align-self: start;
}

.quiz-scoreboard {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.quiz-scoreboard.pulse {
  animation: qmScorePulse 380ms ease;
}

.score-item {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.score-label {
  display: block;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.score-item strong {
  display: block;
  margin-top: 4px;
  font-size: 24px;
  color: #21333d;
}

.quiz-filter-bar {
  display: flex;
  gap: 10px;
  margin: 20px 0 18px;
  flex-wrap: wrap;
}

.quiz-dropdown {
  position: relative;
}

.quiz-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  transition: border-color 140ms ease;
}

.quiz-dropdown.open .quiz-dropdown-toggle {
  border-color: rgba(45, 111, 143, 0.45);
}

.quiz-dropdown-label {
  color: var(--muted);
  font-weight: 800;
}

.quiz-dropdown-value {
  font-weight: 900;
  color: var(--ink);
}

.quiz-dropdown-arrow {
  color: var(--muted);
  font-size: 15px;
}

.quiz-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow);
}

.quiz-dropdown-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 15px;
  font-weight: 800;
  text-align: left;
  color: inherit;
}

.quiz-dropdown-menu button:hover:not(:disabled) {
  background: var(--blue-soft);
}

.quiz-dropdown-menu button.active {
  background: #21333d;
  color: #fff !important;
}

.quiz-dropdown-menu button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.quiz-dropdown-menu button[data-tier="입문"] { color: #3f6b56; }
.quiz-dropdown-menu button[data-tier="초급"] { color: #1f6363; }
.quiz-dropdown-menu button[data-tier="중급"] { color: var(--blue); }
.quiz-dropdown-menu button[data-tier="고급"] { color: #906923; }
.quiz-dropdown-menu button[data-tier="심화"] { color: #8a3a34; }

.quiz-dropdown-menu button[data-tier="입문"].active { background: #4f7f67; }
.quiz-dropdown-menu button[data-tier="초급"].active { background: #2b8a8a; }
.quiz-dropdown-menu button[data-tier="중급"].active { background: #2d6f8f; }
.quiz-dropdown-menu button[data-tier="고급"].active { background: #b98a36; }
.quiz-dropdown-menu button[data-tier="심화"].active { background: #a1473f; }

.quiz-order-toggle,
.quiz-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.quiz-mode-toggle {
  margin-bottom: 14px;
}

.quiz-order-toggle button,
.quiz-mode-toggle button {
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
  transition: background 140ms ease, color 140ms ease;
}

.quiz-order-toggle button.active,
.quiz-mode-toggle button.active {
  background: #21333d;
  color: #fff;
}

.quiz-mode-toggle button[data-mode="ranking"].active {
  background: #a1473f;
}

.combo-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff0e6;
  color: #b9581f;
  font-size: 15px;
  font-weight: 900;
}

@keyframes qmComboPop {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.combo-popup {
  position: fixed;
  top: 38%;
  left: 50%;
  z-index: 100;
  padding: 14px 30px;
  border-radius: 999px;
  font-size: 24px;
  font-weight: 950;
  color: #fff;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.combo-popup.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: qmComboPop 320ms ease;
}

.combo-popup.tier-3 { background: rgba(45, 111, 143, 0.94); }
.combo-popup.tier-5 { background: rgba(185, 138, 54, 0.94); }
.combo-popup.tier-10 { background: rgba(161, 71, 63, 0.94); }

.ranking-reward-toast {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 110;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  transform: translateX(-50%);
}

.ranking-reward-toast .toast-item {
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(185, 138, 54, 0.96);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.ranking-reward-toast .toast-item.show {
  opacity: 1;
  transform: translateY(0);
}

.profile-exp-badge {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 15px;
  font-weight: 900;
  color: #4f7f67;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.profile-exp-badge.show {
  opacity: 1;
  transform: translateY(-8px);
}

.ta-setup {
  margin: 0;
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  text-align: center;
}

.ta-setup-title {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 900;
  color: var(--ink);
}

.ta-duration-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.ta-duration-toggle button {
  min-height: 52px;
  min-width: 92px;
  border: 0;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  font-size: 16px;
  font-weight: 800;
  transition: background 140ms ease, color 140ms ease;
}

.ta-duration-toggle button.active {
  background: #a1473f;
  color: #fff;
}

.ta-best-record {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 750;
}

.ta-start-btn {
  margin-top: 20px;
  min-height: 56px;
  padding: 0 40px;
  border: 0;
  border-radius: 8px;
  background: #a1473f;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  transition: background 160ms ease, opacity 160ms ease;
}

.ta-start-btn:disabled {
  background: #d3dade;
  color: #8a969c;
  cursor: not-allowed;
}

.ta-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: #f7e7e6;
  color: #8a3a34;
  font-size: 15px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.ta-timer::before {
  content: "⏱";
}

.ta-timer.urgent {
  background: #a1473f;
  color: #fff;
  animation: qmScorePulse 900ms ease infinite;
}

.ta-result-card {
  margin: 0;
  padding: 32px 36px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  text-align: center;
  animation: qmFadeIn 280ms ease;
}

.ta-result-title {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 900;
  color: var(--ink);
}

.ta-result-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.ta-result-stat {
  padding: 16px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
}

.ta-result-stat strong {
  display: block;
  font-size: 24px;
  color: #21333d;
}

.ta-result-stat span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.ta-result-best {
  margin: 20px 0 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--gold-ink);
}

.ta-result-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.ta-result-actions button {
  flex: 1;
  min-height: 52px;
  border: 0;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 900;
}

.ta-retry-btn {
  background: #a1473f;
  color: #fff;
}

.ta-change-btn {
  border: 1px solid var(--line) !important;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
}

.quiz-empty {
  margin: 0;
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  font-weight: 760;
}

.quiz-main-card {
  margin: 0;
  padding: 32px 36px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.quiz-main-card.enter {
  animation: qmFadeIn 280ms ease;
}

.quiz-main-card.is-correct {
  animation: qmGlowCorrect 700ms ease;
}

.quiz-main-card.is-wrong {
  animation: qmGlowWrong 700ms ease;
}

.quiz-main-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.tier-badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
  background: var(--blue-soft);
  color: var(--blue);
}

.tier-badge[data-tier="입문"] { background: #eaf4ef; color: #3f6b56; }
.tier-badge[data-tier="초급"] { background: #e6f3f3; color: #1f6363; }
.tier-badge[data-tier="중급"] { background: var(--blue-soft); color: var(--blue); }
.tier-badge[data-tier="고급"] { background: #fff0d0; color: #906923; }
.tier-badge[data-tier="심화"] { background: #f7e7e6; color: #8a3a34; }

.quiz-main-category {
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.quiz-main-counter {
  margin-left: auto;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.quiz-progress-track {
  height: 6px;
  margin-top: 16px;
  border-radius: 999px;
  background: #e6eef2;
  overflow: hidden;
}

.quiz-progress-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2d6f8f, #85b9cb);
  transition: width 300ms ease;
}

.quiz-main-question {
  margin: 20px 0 0;
  font-size: 24px;
  line-height: 1.45;
  color: #182126;
}

.quiz-main-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 24px;
}

.quiz-main-options button {
  min-height: 52px;
  padding: 10px 20px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #2b3940;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  position: relative;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.quiz-main-options button.selected {
  border-color: var(--blue);
  background: var(--blue-soft);
  transform: translateY(-1px);
}

.quiz-main-options button.correct {
  border-color: rgba(79, 127, 103, 0.6);
  background: #eef7f1;
  color: #315f48;
}

.quiz-main-options button.correct::after {
  content: "✓";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  font-weight: 900;
  animation: qmCheckPop 320ms ease forwards;
  animation-delay: 60ms;
}

.quiz-main-options button.wrong {
  border-color: rgba(177, 86, 79, 0.5);
  background: #fff0ee;
  color: #93443d;
  animation: qmShake 380ms ease;
}

.quiz-answer-form {
  margin-top: 22px;
}

.quiz-answer-form input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  transition: border-color 160ms ease;
}

.quiz-answer-form input:focus {
  border-color: var(--blue);
  outline: none;
}

/* 사주퀴즈 페이지 전용 해설 박스(페이드인). 홈 화면 카드의 .quiz-feedback까지
   덮어써서 해설이 opacity:0으로 안 보이던 문제가 있어 이 카드 안으로 한정한다. */
.quiz-main-card .quiz-feedback {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 8px;
  background: #f5f8f8;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 750;
  color: #40505a;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.quiz-main-card .quiz-feedback.show {
  opacity: 1;
  transform: translateY(0);
}

.quiz-main-bottom {
  margin-top: 24px;
}

.submit-answer-btn,
.next-question-btn {
  width: 100%;
  min-height: 56px;
  padding: 0 32px;
  border: 0;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 900;
  transition: background 160ms ease, opacity 160ms ease;
}

.submit-answer-btn {
  background: #21333d;
  color: #fff;
}

.submit-answer-btn:disabled {
  background: #d3dade;
  color: #8a969c;
  cursor: not-allowed;
}

.next-question-btn {
  background: var(--blue);
  color: #fff;
}

.admin-mode-toggle {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
}

.admin-mode-toggle.active {
  border-color: var(--gold);
  background: var(--gold);
  color: #fff;
}

.review-filter-toggle button {
  min-height: 42px;
  padding: 0 14px;
}

.admin-progress {
  margin: 0 0 14px;
  color: #906923;
  font-size: 15px;
  font-weight: 800;
}

.admin-panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px dashed rgba(185, 138, 54, 0.55);
  border-radius: 10px;
  background: rgba(185, 138, 54, 0.08);
}

.admin-panel-label {
  color: #906923;
  font-size: 15px;
  font-weight: 900;
}

.admin-diff-buttons {
  display: inline-flex;
  border: 1px solid rgba(185, 138, 54, 0.4);
  border-radius: 8px;
  overflow: hidden;
}

.admin-diff-buttons button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  background: rgba(255, 255, 255, 0.85);
  color: #906923;
  font-size: 15px;
  font-weight: 800;
}

.admin-diff-buttons button.active {
  background: #b98a36;
  color: #fff;
}

.admin-reviewed-badge {
  font-size: 15px;
  font-weight: 900;
  color: #a1473f;
}

.admin-reviewed-badge.done {
  color: #4f7f67;
}

.admin-delete-btn {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(161, 71, 63, 0.45);
  border-radius: 8px;
  background: rgba(161, 71, 63, 0.08);
  color: #a1473f;
  font-size: 14px;
  font-weight: 800;
}

.admin-delete-btn:hover {
  background: #a1473f;
  color: #fff;
}

.admin-question-id {
  margin-left: auto;
  color: var(--muted);
  font-size: 15px;
  font-weight: 750;
}

.ranking-mini-card {
  display: block;
}

.wrong-notes-mini-card strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
  color: #21333d;
}

.wrong-notes-mini-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
}

.wrong-notes-mini-card a {
  display: block;
  margin-top: 12px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 800;
  text-align: right;
}

.ranking-mini-tabs {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.ranking-mini-tabs button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.ranking-mini-tabs button.active {
  background: #21333d;
  color: #fff;
  border-color: #21333d;
}

.ranking-mini-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ranking-mini-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
}

.ranking-mini-row.is-me {
  background: var(--blue-soft);
}

.ranking-mini-rank {
  min-width: 18px;
  font-size: 14px;
  font-weight: 900;
  color: var(--muted);
  text-align: center;
}

.ranking-mini-name {
  flex: 1;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-mini-score {
  font-size: 14px;
  font-weight: 800;
  color: #21333d;
  white-space: nowrap;
}

.ranking-mini-ellipsis {
  text-align: center;
  color: var(--muted);
  font-weight: 900;
  padding: 2px 0;
}

.ranking-mini-note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.ranking-mini-more {
  display: block;
  margin-top: 12px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 800;
  text-align: right;
}

.ranking-my-detail {
  margin: 14px 0 0;
  padding: 14px 18px;
  border: 1px solid rgba(45, 111, 143, 0.3);
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 15px;
  font-weight: 800;
}

.ranking-tab-bar {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 18px;
}

.ranking-tab-bar button {
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
  transition: background 140ms ease, color 140ms ease;
}

.ranking-tab-bar button.active {
  background: #21333d;
  color: #fff;
}

.ranking-disclaimer {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}

.ranking-board {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.wn-empty-note {
  margin: 14px 0 0;
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.category-report {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.category-report-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 52px auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.category-report-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

.category-report-track {
  height: 8px;
  border-radius: 999px;
  background: #e6eef2;
  overflow: hidden;
}

.category-report-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2d6f8f, #85b9cb);
  transition: width 300ms ease;
}

.category-report-pct {
  font-size: 15px;
  font-weight: 900;
  color: #21333d;
  text-align: right;
}

.category-report-n {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

.wn-list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wn-card {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  transition: opacity 400ms ease;
}

.wn-card.resolved {
  opacity: 0.4;
}

.wn-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wn-card-category {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.wn-card-wrong-count {
  margin-left: auto;
  color: #a1473f;
  font-size: 14px;
  font-weight: 800;
}

.wn-card-question {
  margin: 12px 0 0;
  font-size: 18px;
  line-height: 1.5;
}

.wn-card-options {
  margin-top: 16px;
}

.wn-card-feedback {
  margin-top: 14px;
}

/* ── 오답노트 고르개·요약·지우기 (2026-08-05) ──────────────────
   오답노트는 손님이 자기 약점을 마주하는 자리다. 성적표처럼 몰아세우지 않고
   '정리된 복습 도구'로 읽히게 한다 — 조용한 색, 넉넉한 여백, 붉은색은 최소한만. */

/* 한 줄 요약 — 목록을 보기 전에 어디가 문제인지 먼저 말해 준다 */
.wn-summary {
  margin: 12px 0 0;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--ground-2, rgba(0, 0, 0, 0.03));
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.wn-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* 분야 단추 — 좁은 화면에서는 옆으로 밀린다.
   두 줄로 접히면 목록이 아래로 밀려 정작 풀 문제가 안 보인다. */
.wn-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.wn-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.wn-chip:hover {
  border-color: var(--line-strong);
  color: var(--ink-soft);
}

.wn-chip.is-on {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.wn-chip-n {
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.wn-sort {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
}

.wn-sort-label {
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
}

.wn-sort select {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}

/* 세 번 이상 틀린 문제 — 왼쪽에 띠 하나로만 표시한다.
   카드 전체를 붉게 물들이면 목록이 경고판이 된다. */
.wn-card.is-stubborn {
  border-left: 3px solid #a1473f;
}

.wn-card-wrong-count.is-stubborn {
  padding: 2px 9px;
  border-radius: 999px;
  background: #fbeae5;
  color: #8f3b33;
}

/* 지우기 — 평소엔 조용히 있다가 다가가면 드러난다.
   되돌릴 수 없는 단추라 먼저 눈에 띄면 안 된다. */
.wn-card-remove {
  flex: none;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s;
}

.wn-card:hover .wn-card-remove,
.wn-card-remove:focus-visible {
  opacity: 1;
  border-color: var(--line);
  color: var(--ink-soft);
}

/* 지울까요 — 카드 안에서 묻는다.
   브라우저 확인창은 화면 밖으로 튀어나와 무엇을 지우는지 안 보여준다. */
.wn-confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid #e6c4bc;
  border-radius: 10px;
  background: #fbeae5;
}

.wn-confirm-text {
  flex: 1 1 auto;
  min-width: 180px;
  color: #8f3b33;
  font-size: 14px;
  font-weight: 750;
}

.wn-confirm button {
  flex: none;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.wn-confirm-yes {
  border: 1px solid #a1473f;
  background: #a1473f;
  color: #fff;
}

.wn-confirm-yes:disabled {
  opacity: 0.55;
  cursor: default;
}

.wn-confirm-no {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .wn-tools {
    align-items: stretch;
  }
  /* 좁은 화면에서는 '지우기'가 늘 보인다 — 손가락에는 hover 가 없다. */
  .wn-card-remove {
    opacity: 1;
    border-color: var(--line);
  }
}

.ranking-empty-note {
  margin: 0;
  padding: 20px 24px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 750;
  border-bottom: 1px solid var(--line);
}

/* 이 순위표가 언제 기록으로 겨루는지 (2026-08-05).
   순위표마다 기간이 달라서 머리글로 뭉뚱그릴 수 없다 — 표 맨 위에서 밝힌다.
   순위 줄보다 조용해야 한다. 안내지 성적이 아니다. */
.ranking-period {
  margin: 0;
  padding: 12px 24px;
  background: var(--panel-soft, rgba(0, 0, 0, 0.02));
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

/* 순위 · 동전 · 이름 · 점수 · 보조.
   2026-08-04 에 동전 칸이 하나 늘었다(등급 동전 + 테두리 배지). */
.ranking-row {
  display: grid;
  grid-template-columns: 44px auto 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
}

/* 등급 동전. 테두리를 두른 사람은 자리를 조금 더 넓게 쓴다 —
   그림 규격상 동전이 테 안쪽 59.95% 에 들어가므로, 같은 크기로 두면 동전이 작아 보인다. */
.ranking-face {
  position: relative;
  display: block;
  width: 34px;
  aspect-ratio: 1 / 1;
  line-height: 0;
}

.ranking-face.has-ring {
  width: 44px;
}

.ranking-coin {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

.ranking-face.has-ring .ranking-coin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 59.95%;
  height: 59.95%;
  transform: translate(-50%, -50%);
}

.ranking-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 560px) {
  .ranking-row {
    grid-template-columns: 34px auto 1fr auto;
    gap: 10px;
    padding: 12px 14px;
  }
  /* 좁은 화면에서는 보조 값을 이름 아래로 내린다 */
  .ranking-sub {
    grid-column: 3 / -1;
  }
}

.ranking-row:last-child {
  border-bottom: 0;
}

.ranking-row.is-me {
  background: var(--blue-soft);
}

.ranking-rank {
  font-size: 18px;
  font-weight: 900;
  color: var(--muted);
  text-align: center;
}

.ranking-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

.ranking-score {
  font-size: 16px;
  font-weight: 900;
  color: #21333d;
  white-space: nowrap;
}

.ranking-sub {
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

/* ===== 오행 파스텔 카드 배경 =====
   홈 5카드에 오행 색 수묵 물번짐 배경을 깔아준다.
   COURSES=水 하늘 / Profile=木 연두 / 퀴즈=火 연분홍 / 커뮤니티·만세력·유튜브=金 연회색.
   배경은 색이 사방 테두리를 액자처럼 감싸는 구도라서 cover(잘라내기)를 쓰면 테두리가 잘린다.
   그래서 100% 100%로 늘려서 채운다 — 무늬 없는 물번짐이라 늘어나도 티가 안 난다.
   카드마다 PC/태블릿/모바일 세 가지 비율을 따로 만들어 두고 분기점에서 갈아끼운다. */

.course-area,
.level-state,
.my-profile-form,
.quiz-card,
.community-area,
.manse-state,
.youtube-state {
  /* 오행 배경 이미지 위에 흰색을 옅게 덧씌워 채도를 낮춘다.
     너무 알록달록하면 아래 --bg-wash 알파값을 키우면 전 카드가 한 번에 더 연해진다. */
  --bg-wash: rgba(255, 255, 255, 0.42);
  background-image: linear-gradient(var(--bg-wash), var(--bg-wash)), var(--card-bg);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.course-area {
  --card-bg: url("./assets/card-backgrounds/courses-pc.webp");
}

/* Profile 과 My Info 는 둘 다 '나'에 대한 카드라 같은 목(木) 연두를 쓴다.
   마이페이지에서 위아래로 붙어 있어서, 색이 다르면 남남처럼 갈라져 보인다.
   My Info 는 입력칸이 들어가는 카드라 배경이 진하면 글자가 묻힌다 —
   그래서 흰색 덧칠을 조금 더 올린다(0.42 -> 0.58). */
.level-state {
  --card-bg: url("./assets/card-backgrounds/profile-pc.webp");
}

.my-profile-form {
  --bg-wash: rgba(255, 255, 255, 0.58);
  --card-bg: url("./assets/card-backgrounds/profile-pc.webp");
}

.quiz-card {
  --card-bg: url("./assets/card-backgrounds/quiz-pc.webp");
}

/* 커뮤니티·만세력·유튜브는 금(金) 연회색 배경을 함께 쓴다.
   셋 다 소담 쪽으로 넘어가는 영역이라 같은 색으로 묶어 읽힌다. */
.community-area,
.manse-state,
.youtube-state {
  --card-bg: url("./assets/card-backgrounds/manse-pc.webp");
}

@media (max-width: 1160px) {
  .course-area {
    --card-bg: url("./assets/card-backgrounds/courses-tablet.webp");
  }

  .level-state,
  .my-profile-form {
    --card-bg: url("./assets/card-backgrounds/profile-tablet.webp");
  }

  .quiz-card {
    --card-bg: url("./assets/card-backgrounds/quiz-tablet.webp");
  }

  .community-area,
  .manse-state,
  .youtube-state {
    --card-bg: url("./assets/card-backgrounds/manse-tablet.webp");
  }
}

@media (max-width: 760px) {
  .course-area {
    --card-bg: url("./assets/card-backgrounds/courses-mobile.webp");
  }

  .level-state,
  .my-profile-form {
    --card-bg: url("./assets/card-backgrounds/profile-mobile.webp");
  }

  .quiz-card {
    --card-bg: url("./assets/card-backgrounds/quiz-mobile.webp");
  }

  .community-area,
  .manse-state,
  .youtube-state {
    --card-bg: url("./assets/card-backgrounds/manse-mobile.webp");
  }
}

@media (max-width: 1160px) {
  /* 로고 · (메뉴버튼) · 만세력/로그인 */
  .site-header-inner {
    grid-template-columns: 1fr auto;
  }

  .site-header.has-nav-toggle .site-header-inner {
    grid-template-columns: 1fr auto auto;
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* 🔴 메뉴 버튼이 실제로 붙었을 때만 드로어로 바꾼다.
     site-nav.js 가 안 돌면 has-nav-toggle 이 없어서 메뉴가 그냥 보인다
     — 링크가 통째로 사라지는 일이 없게 하는 안전장치다. */
  .site-header.has-nav-toggle .top-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 12px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow-soft);
  }

  .site-header.has-nav-toggle[data-nav-open="true"] .top-nav {
    display: flex;
  }

  .site-header.has-nav-toggle .top-nav a {
    /* 손가락으로 누르기 편한 높이 */
    min-height: 52px;
    padding: 0 28px;
    justify-content: flex-start;
  }

  .site-header.has-nav-toggle .top-nav a + a {
    border-top: 1px solid var(--line);
  }

  /* 좁아지면 히어로 카피 들여쓰기를 줄여 카드와 겹치지 않게 한다. */
  .lead-copy-text {
    margin-left: 32px;
  }

  .home-grid {
    grid-template-columns: 1fr;
  }

  .course-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .side-area {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .course-detail-hero {
    grid-template-columns: 1fr;
  }

  .player-layout {
    grid-template-columns: 1fr;
  }

  .chapter-sidebar {
    max-height: none;
  }
}

@media (max-width: 760px) {
  body {
    background-attachment: scroll;
    background-position: center top;
  }

  /* 강의 상세: 모바일에선 구매 패널 sticky 해제(아래 섹션 스크롤을 방해) + 강사 카드 세로 스택. */
  .detail-buy-panel {
    position: static;
  }

  .instructor-card {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
  }

  .instructor-portrait img {
    max-width: 150px;
    margin: 0 auto;
  }

  .instructor-role {
    margin-bottom: 8px;
  }

  .site-header-inner {
    min-height: 64px;
    width: calc(100% - 32px);
    padding: 10px 0;
    gap: 12px;
  }

  .brand img {
    width: 122px;
  }

  .brand span,
  .login-link {
    display: none;
  }

  .manse-link {
    min-height: 36px;
    padding: 2px 4px;
  }

  .manse-link img {
    height: 28px;
  }

  .academy-home {
    width: min(100% - 28px, 560px);
    padding: 18px 0 28px;
  }

  .lead-panel {
    grid-template-columns: 1fr;
  }

  .lead-copy {
    padding: 6px 0 4px;
    text-align: center;
  }

  /* 모바일에선 두 칼럼을 세로로 쌓고, 들여쓰기를 풀어 가운데 정렬한다. */
  .lead-copy-text {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-left: 0;
    align-items: center;
    text-align: center;
  }

  /* 모바일에선 배경 한자를 더 옅게, 좌우로 벌려 가운데 텍스트를 안 가리게. */
  .lead-hanja {
    font-size: 150px;
    color: rgba(45, 111, 143, 0.045);
  }
  .lead-hanja-1 {
    left: -4%;
    top: 30%;
  }
  .lead-hanja-2 {
    left: auto;
    right: -4%;
    top: 68%;
  }

  .lead-sub {
    border-left: none;
    padding-left: 0;
    border-top: 3px solid var(--gold);
    padding-top: 12px;
    display: inline-block;
  }

  .lead-instructor {
    justify-content: center;
  }

  .lead-text {
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
  }

  .side-area,
  .course-list {
    grid-template-columns: 1fr;
  }

  .summary-card,
  .course-area,
  .manse-card,
  .quiz-card {
    box-shadow: 0 14px 42px rgba(48, 63, 71, 0.1);
  }

  /* 모바일에서는 한 줄에 [말머리] 제목 / 작성자·날짜 두 단으로 접는다.
     세 칸을 그대로 두면 제목이 남는 폭이 없어 죄다 말줄임으로 잘린다. */
  .board-row a {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 10px;
    padding: 11px 4px;
  }

  /* 탭 5개가 폭에 안 들어가 두 줄로 접힌다. 접히면 지저분하니 한 줄로 두고 옆으로 민다. */
  .board-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .board-tabs::-webkit-scrollbar {
    display: none;
  }

  .board-tab {
    flex: none;
    padding-left: 11px;
    padding-right: 11px;
  }

  /* 폭이 좁아 한 줄로는 제목 절반이 말줄임으로 잘린다.
     작성자·날짜가 어차피 아랫줄로 내려가므로 제목도 두 줄까지 허용한다. */
  .board-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .board-meta {
    grid-column: 2;
    font-size: 13px;
  }

  .manse-card {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .manse-card a {
    grid-column: 2;
    justify-self: start;
    min-height: 36px;
  }

  .tool-art {
    height: 78px;
  }

  .quiz-options {
    grid-template-columns: 1fr;
  }

  .mini-thumb {
    height: 84px;
  }

  .course-row-card {
    grid-template-columns: 1fr;
  }

  /* 로드맵 3단계 아카이브 쌍도 모바일에선 세로로 */
  .roadmap-pair {
    grid-template-columns: 1fr;
  }

  /* 무료강의 "다음 단계" 두 카드도 모바일에선 세로로 */
  .next-step-grid {
    grid-template-columns: 1fr;
  }

  /* 결제 화면: 주문 요약을 아래로 내리고 sticky 해제 */
  .checkout-layout {
    /* 🔴 `1fr` 이 아니라 `minmax(0, 1fr)` 이어야 한다 (2026-08-07).
       `1fr` 의 최소값은 0 이 아니라 **안에 든 것의 최소 폭**이다.
       입력칸 글자를 16px 로 키우자(아이폰 확대 방지) `<select>` 의 최소 폭이
       347px 로 늘었고, 칸이 그만큼 벌어져 **화면이 1px 밀렸다.**
       minmax(0, …) 로 두면 칸이 화면에 맞춰 줄어든다. */
    grid-template-columns: minmax(0, 1fr);
  }

  .order-summary {
    position: static;
  }

  .payment-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .payment-actions .buy-button {
    justify-content: center;
  }

  .course-row-bottom {
    flex-direction: column;
    align-items: stretch;
  }

  .row-cta {
    justify-content: center;
  }

  /* 좁은 화면에서도 비율을 지킨다. 예전처럼 최소 높이를 주면
     폭이 좁을수록 세로가 남아 좌우가 다시 잘린다. */
  .course-detail-hero .course-art {
    min-height: 0;
  }

  .curriculum-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .curriculum-row .ch-count {
    grid-column: 2;
  }

  .bottom-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .enroll-panel {
    padding: 18px;
  }

  /* 🔴 휴대폰에서 글자 칸이 167px 밖에 안 됐다 (2026-08-07 실측).
     거기에 제목·마지막 본 강의·진행률·막대·강수/시간·단추까지 여섯 줄이 들어가
     죄다 접혔다. 아랫단을 **카드 폭 전체**로 내려 숨통을 틔운다.

       전            후
       [그림][제목      ]      [그림][제목        ]
            [마지막본  ]           [마지막 본 강의]
            [진행률 12%]      [진행률          12%]
            [막대      ]      [━━━━━━━━━━━━━━━]
            [12/176강  ]      [12 / 176강 · 본 시간 …]
            [본 시간…  ]      [        이어보기      ]
            [이어보기  ] */
  .enrolled-progress {
    margin-top: 0;
  }

  /* 🔸 이어보기 줄(.resume-row-go)은 여기서 못 고친다 —
     그 기본 규칙이 이 파일 **아래쪽**에 있어서 나중에 나온 쪽이 이긴다.
     (미디어쿼리는 힘을 더해 주지 않는다.) 파일 맨 끝에서 다시 잡는다. */

  .quiz-main-card {
    padding: 20px;
    margin-top: 16px;
  }

  .quiz-main-question {
    font-size: 22px;
  }

  .quiz-main-options {
    grid-template-columns: 1fr;
  }

  .quiz-main-options button {
    min-height: 54px;
    font-size: 15px;
  }

  .quiz-main-counter {
    margin-left: 0;
    width: 100%;
  }

  .quiz-main-bottom {
    justify-content: stretch;
  }

  .submit-answer-btn,
  .next-question-btn {
    width: 100%;
  }

  .quiz-scoreboard {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .score-item {
    flex: 1;
    min-width: 100px;
  }

  .ta-setup,
  .ta-result-card {
    padding: 24px 18px;
  }

  .ta-duration-toggle button {
    min-width: 72px;
    min-height: 48px;
    font-size: 15px;
  }

  .ta-result-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .ta-result-actions {
    flex-direction: column;
  }

  .ranking-tab-bar {
    width: 100%;
  }

  .ranking-tab-bar button {
    flex: 1;
    padding: 0 8px;
    font-size: 14px;
  }

  .ranking-row {
    grid-template-columns: 32px 1fr;
    row-gap: 4px;
  }

  .ranking-score,
  .ranking-sub {
    grid-column: 2;
    justify-self: start;
  }

  .category-report-row {
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-areas:
      "name pct"
      "track track"
      "n n";
    row-gap: 6px;
  }

  .category-report-name { grid-area: name; }
  .category-report-pct { grid-area: pct; }
  .category-report-track { grid-area: track; }
  .category-report-n { grid-area: n; text-align: right; }
}

/* ===== 강의 재생 화면 ===== */

.video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #10171b;
}

/* 초점을 여기로 되받아 오지만(reclaimFocus), 그건 우리 사정이지 수강생이 알 일은 아니다.
   테두리가 그려지면 영상 둘레에 파란 줄이 생겨 거슬린다. */
.video-wrap:focus,
.video-wrap:focus-visible {
  outline: none;
}
.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 구매자 이메일 워터마크. 영상 위를 떠다니지만 조작은 방해하지 않는다. */
/* 워터마크 (2026-08-03 에 '가끔·옅게'로 바꿈).
   기본은 투명이고, is-on 이 붙은 동안만 천천히 떠올랐다 사라진다.
   그림자를 얇게 남기는 이유: 밝은 화면에서 완전히 묻히면 유출본에서도 안 읽힌다.
   억제 장치로서 최소한의 판독성은 지켜야 한다. */
.video-mark {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.16);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 1.6s ease;
}

.video-mark.is-on {
  opacity: 1;
}

.video-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  color: #cfdde4;
}
.video-empty .big { font-size: 34px; opacity: 0.85; }
.video-empty p { margin: 0; font-size: 15px; font-weight: 700; }

.video-gate {
  margin-top: 12px;
  width: min(360px, 100%);
}
.video-gate label {
  display: block;
  font-size: 13px;
  font-weight: 750;
  margin-bottom: 7px;
  color: #e4eef3;
}
.gate-row { display: flex; gap: 7px; }
.gate-row input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
}
.gate-row input::placeholder { color: rgba(255, 255, 255, 0.45); }
.gate-row button {
  padding: 9px 16px;
  border-radius: 8px;
  border: 0;
  background: var(--accent, #2f7d8c);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
.gate-note {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.5);
}

/* 커리큘럼 — 챕터를 눌러 펼치면 차시가 나온다 */
.chapter-sidebar .curriculum-row {
  width: 100%;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.chapter-block .lesson-list { display: none; }
.chapter-block.open .lesson-list { display: block; }

.lesson-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 16px 9px 22px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fbfdfe;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2, #41525c);
  cursor: pointer;
}
.lesson-row:hover { background: #f2f8fa; }
.lesson-row.now {
  background: #e9f5fa;
  color: var(--ink, #1c2b33);
  font-weight: 850;
}
.lesson-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #cfdde4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
}
.lesson-dot.seen { background: #2c7a52; border-color: #2c7a52; }
.lesson-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.player-nav { display: flex; gap: 9px; margin-top: 16px; }
.btn-lesson {
  padding: 9px 15px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 780;
  color: var(--ink-2, #41525c);
  cursor: pointer;
}
.btn-lesson:hover:not(:disabled) { background: #f2f8fa; }
.btn-lesson:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 860px) {
  .player-layout { grid-template-columns: minmax(0, 1fr); }
  .chapter-sidebar { max-height: 420px; }
}

/* 여러 강의를 함께 사면 PRO 기간이 늘어난다 — 그 이득이 눈에 띄게 */
.order-benefits .benefit-strong {
  font-weight: 850;
  color: var(--good, #2c7a52);
}

/* 결제 완료 후 '그래서 이제 어떻게 되나'를 알려주는 블록 */
.payment-next {
  margin: 18px 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7fbfc;
  display: grid;
  gap: 11px;
  text-align: left;
}
.payment-next-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.payment-next-icon { font-size: 15px; line-height: 1.5; }
.payment-next-row b { display: block; font-size: 14px; font-weight: 820; margin-bottom: 2px; }
.payment-next-row span { font-size: 13px; font-weight: 650; color: var(--ink-2, #41525c); line-height: 1.65; }

/* ===== 무료 강의 — 유튜브 재생목록 ===== */

.watch-lead {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 650;
  color: var(--ink-2, #41525c);
  line-height: 1.7;
}
/* ===== 무료강의 재생 (유튜브 277강) =====
   목록이 길어서 왼쪽 플레이어는 스크롤을 따라오게 두고 목록만 안쪽에서 굴린다. */
.free-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.free-progress {
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--blue-soft, #e9f5fa);
  color: var(--blue, #2d6f8f);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.free-watch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  margin-top: 14px;
  align-items: start;
}

.free-now {
  margin-top: 12px;
}
.free-now strong {
  display: block;
  font-size: 16px;
  line-height: 1.4;
}
.free-now span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted, #66757d);
}

.free-nav {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.free-nav button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.76);
  color: #283942;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.free-nav button:disabled {
  opacity: 0.4;
  cursor: default;
}

.free-list-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  padding: 12px;
}
.free-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.free-list-head strong {
  font-size: 14px;
}
.free-resume {
  padding: 6px 11px;
  border: 0;
  border-radius: 6px;
  background: var(--blue, #2d6f8f);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}
.free-search {
  width: 100%;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  font-size: 14px;
  margin-bottom: 10px;
}

.free-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* 277개를 다 펼치면 페이지가 끝없이 길어진다. 목록만 안에서 굴린다. */
  max-height: 420px;
  overflow-y: auto;
}
.free-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.free-item:hover {
  background: rgba(255, 255, 255, 0.9);
}
.free-item-no {
  font-size: 12px;
  font-weight: 900;
  color: var(--muted, #66757d);
  text-align: center;
}
.free-item-title {
  font-size: 13px;
  line-height: 1.4;
  /* 유튜브 제목이 길고 해시태그가 붙어 있어 두 줄에서 끊는다 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.free-item-time {
  font-size: 12px;
  color: var(--muted, #66757d);
  white-space: nowrap;
}
.free-item.is-done .free-item-no {
  color: var(--green, #4f7f67);
}
.free-item.is-done .free-item-title {
  color: var(--muted, #66757d);
}
.free-item.is-watching .free-item-no::after {
  content: "·";
  color: var(--blue, #2d6f8f);
}
.free-item.is-playing {
  background: var(--blue-soft, #e9f5fa);
}
.free-item.is-playing .free-item-title {
  color: var(--blue, #2d6f8f);
  font-weight: 800;
}
.free-empty {
  margin: 14px 4px;
  font-size: 14px;
  color: var(--muted, #66757d);
}

@media (max-width: 900px) {
  .free-watch {
    grid-template-columns: 1fr;
  }
  .free-list {
    max-height: 320px;
  }
}

.yt-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #10171b;
  border: 1px solid var(--line);
}
.yt-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.watch-more {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 650;
  color: var(--muted, #8598a3);
}
.watch-more a { color: var(--accent, #2f7d8c); font-weight: 780; }

/* 결제에서 이메일은 수강권의 유일한 열쇠라 필수임을 눈에 띄게 한다 */
.field-required {
  margin-left: 5px;
  font-size: 12px;
  font-weight: 800;
  color: #b3363b;
  vertical-align: 1px;
}
.field-help {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 650;
  color: var(--muted, #8598a3);
}

/* 헤더 로그인 상태 */
.login-link.is-member { color: var(--ink, #1c2b33); font-weight: 900; }
.logout-link {
  margin-left: 2px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted, #8598a3);
  align-self: center;
}
.logout-link:hover { color: var(--ink-2, #41525c); }
@media (max-width: 860px) { .logout-link { display: none; } }

/* ===== 로그인 =====
   방식을 고르는 화면이다. 실제 로그인은 소담만세력 화면에서 일어난다.
   버튼은 각 서비스의 상징색을 쓰되 채도를 낮춰 홈의 옅은 톤과 어긋나지 않게 한다. */
.auth-layout { max-width: 420px; margin: 0 auto; padding: 8px 0 40px; }
.auth-card {
  background: var(--panel, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 30px 28px 26px;
  box-shadow: var(--shadow-soft);
}
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-head h1 { margin: 0 0 8px; font-size: 22px; }
.auth-head p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted, #8598a3); }

.auth-msg {
  margin: 0 0 14px; padding: 10px 13px; border-radius: 9px;
  font-size: 14px; font-weight: 700; text-align: center;
  background: var(--good-soft, #e9f6ef); color: var(--good, #2c7a52);
}

.auth-methods { display: grid; gap: 9px; }
.auth-method {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 22px; /* 글자가 버튼 정중앙에 오게 좌우 균형을 맞춘다 */
  align-items: center;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  color: #283942;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.auth-method:hover { box-shadow: var(--shadow-soft); }

/* 지난번에 쓰신 방법 (2026-08-04).
   🔴 버튼은 3칸 그리드(22px · 글자 · 22px)라 네 번째 자식을 그냥 넣으면 줄이 바뀐다.
      글자를 정중앙에 두는 균형을 깨지 않으려고 띄워서 얹는다. */
.auth-method { position: relative; }
.auth-method.is-last-used {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.auth-method-last {
  position: absolute;
  top: -9px;
  right: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
}
.auth-method-mark {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 900;
}
.auth-method-label { text-align: center; }

/* 🔴 아래 `.is-kakao` · `.is-naver` **보다 앞에** 있어야 한다 (2026-08-20).
   CSS 는 세기가 같으면 뒤에 쓴 것이 이긴다 — 뒤에 두면 여기 흰 배경이
   카카오 노란색을 덮어 버린다. 실제로 그렇게 만들었다가 고쳤다. */
/* ── 로그인 수단 알약 (2026-08-20 소담) ─────────────────────────────
   소담: *"각 소셜에 맞는 버튼을 예쁘게 넣는걸로. 직관적으로 한번에 알아볼 수 있게."*
   🔸 색과 글자(K/N/G)는 **로그인 화면(.is-kakao 등)에서 그대로 가져온다.**
      여기서 다른 모양을 만들면 손님이 같은 것을 두 모양으로 배우게 된다. */
.provider-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

/* 🔸 여러 개를 연결한 분은 알약이 둘 이상 온다 — 줄바꿈되게 둔다 */
.my-profile-form:not(.is-editing) #myProviderText {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

/* 로그인 화면 것보다 작다. 여기서는 '지금 무엇으로 들어와 있나' 를 알리는 표시일 뿐,
   누르는 단추가 아니다. */
.provider-chip .auth-method-mark {
  width: 18px;
  height: 18px;
  font-size: 10.5px;
}

.is-kakao { background: #fee500; border-color: #f2d900; color: #2c2118; }
.is-kakao .auth-method-mark { background: #2c2118; color: #fee500; }
.is-naver { background: #03c75a; border-color: #02b350; color: #fff; }
.is-naver .auth-method-mark { background: #fff; color: #03c75a; }
.is-google .auth-method-mark { background: #f1f3f5; color: #4285f4; }
.is-email .auth-method-mark { background: var(--blue-soft, #e9f5fa); color: var(--blue, #2d6f8f); }

/* 만세력이 아직 문을 안 열었을 때 — 버튼을 지우지 않고 눌리지 않게만 한다 */
.auth-methods.is-disabled .auth-method { opacity: 0.45; cursor: default; }
.auth-methods.is-disabled .auth-method:hover { box-shadow: none; }

.auth-signup {
  margin: 18px 0 0; text-align: center;
  font-size: 14px; color: var(--muted, #8598a3);
}
.auth-signup a { color: var(--blue, #2d6f8f); font-weight: 900; cursor: pointer; }

.auth-note {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 14px; line-height: 1.65; color: var(--ink-soft, #34424a);
}

/* 로그인 화면의 '셋 다 쓸 수 있어요' 블록 (2026-08-02).
   🔴 소담만세력 로그인 화면과 같은 모양이어야 한다 — 문안뿐 아니라 생김새도.
      다르게 보이면 같은 계정이라는 말이 덜 믿긴다.
   주인공은 위쪽 소셜 버튼 3개다. 여기가 세지면 로그인이 늘어져 보이므로
   글자를 죽이고 줄 간격만 벌린다. */
.auth-family {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.auth-family-title {
  margin: 0 0 12px;
  color: var(--ink-soft, #34424a);
  font-size: 14px;
  font-weight: 800;
}

.auth-family-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-family-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 11px;
  border-left: 2px solid var(--line);
}

/* 지금 보고 있는 서비스만 색을 준다. 나머지 둘이 '새로 보이는 것'이 되어야 한다. */
.auth-family-list li.is-here {
  border-left-color: var(--blue, #2d6f8f);
}

.auth-family-list b {
  color: var(--ink, #1f272c);
  font-size: 14px;
  font-weight: 800;
}

.auth-family-list span {
  color: var(--muted, #66757d);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.55;
}

.auth-here {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--blue-soft, #e9f5fa);
  color: var(--blue, #2d6f8f);
  font-size: 12px;
  font-weight: 800;
  vertical-align: 1px;
}
.auth-help {
  margin: 12px 0 0;
  font-size: 13px; line-height: 1.6; color: var(--muted, #8598a3);
}

/* ===== 회원가입 ===== */
.signup-layout { max-width: 520px; margin: 0 auto; }
.signup-card {
  background: var(--panel, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 28px;
  box-shadow: var(--shadow-soft);
}
.signup-note { margin-bottom: 20px; }
.su-steps {
  display: flex; gap: 7px; align-items: center;
  font-size: 13px; font-weight: 700; color: var(--muted, #8598a3);
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.su-steps b { color: var(--accent, #2f7d8c); font-weight: 900; }
.su-steps span { opacity: 0.45; }
.su-msg {
  margin: 0 0 14px; padding: 10px 13px; border-radius: 9px;
  font-size: 14px; font-weight: 700;
  background: var(--good-soft, #e9f6ef); color: var(--good, #2c7a52);
}
.su-msg.is-error { background: #fdeef0; color: #b3363b; }
.su-done { text-align: center; padding: 14px 0 6px; }
.su-done-icon { font-size: 40px; margin-bottom: 10px; }
.su-done h2 { margin: 0 0 8px; font-size: 20px; }
.su-done p { margin: 0 0 20px; font-size: 15px; color: var(--ink-2, #41525c); line-height: 1.7; }
.signup-link {
  margin-left: 2px; padding: 0 8px;
  font-size: 13px; font-weight: 800;
  color: var(--accent, #2f7d8c); align-self: center;
}
@media (max-width: 860px) { .signup-link { display: none; } }

/* ==========================================================================
   마이페이지 리뉴얼 (2026-07-31)
   ==========================================================================
   예전 마이페이지는 절반이 회색 "아직 획득하지 못했어요" 배지였고,
   정작 "나 어디까지 봤지?"라는 이 화면에 오는 진짜 이유를 안 보여줬다.
   그래서 '이어보기'를 제일 위에 가장 크게 두고, 나머지는 숫자로 압축했다.
   ========================================================================== */

/* ② 이어보기 — 2026-08-04 에 오른쪽 열로 옮기면서 홈 화면의 .continue-watch 를
   그대로 쓰게 됐다. 여기 있던 .resume-* 규칙은 쓰는 곳이 없어져 걷어냈다. */

/* ③ 내 강의 — 마지막으로 본 강의 이름 한 줄 */
.enrolled-last {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--muted);
}

/* ④ 내 기록 — 숫자 4개 */
.record-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.record-tile {
  display: grid;
  gap: 6px;
  padding: 20px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.record-label {
  font-size: 14px;
  color: var(--muted);
}

.record-value {
  font-size: 24px;
  color: var(--ink);
}

/* ── 문의 (2026-08-17) ────────────────────────────────────────
   손님이 사이트에서 문의를 남길 자리가 한 곳도 없었다. */
.inquiry-lead {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.7;
  color: var(--ink-2, #46565e);
}

.inquiry-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  /* 🔴 16px 아래로 내리지 않는다 — 사파리가 그보다 작은 입력칸에서 화면을 확대한다.
     8/7 모바일 검토에서 같은 이유로 입력칸을 전부 키웠다. */
  font-size: 16px;
  font-weight: 650;
  line-height: 1.7;
  color: var(--ink);
  resize: vertical;
}

.inquiry-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.inquiry-send {
  /* 손가락으로 누르는 단추라 44px 아래로 내려가지 않는다. */
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  background: var(--green);
  font-size: 14px;
  font-weight: 850;
  color: #fff;
  cursor: pointer;
}

.inquiry-send:disabled {
  opacity: 0.6;
  cursor: default;
}

.inquiry-msg {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3, #6b7a82);
}

.inquiry-msg.is-bad {
  color: #c0392b;
}

.inquiry-list-head {
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 820;
  color: var(--ink-3, #6b7a82);
}

.inquiry-row {
  display: grid;
  /* 날짜·상태는 폭을 고정하고, 글이 남은 자리를 다 쓴다.
     🔴 minmax(0,1fr) 이 아니면 긴 글이 칸을 밀어내 상태가 화면 밖으로 나간다. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.inquiry-when {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-3, #6b7a82);
}

.inquiry-text {
  margin: 0;
  /* 손님이 줄을 나눠 적으면 그대로 보여준다. 한 줄로 뭉치면 읽기 어렵다. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.7;
  color: var(--ink);
}

.inquiry-state {
  font-size: 13px;
  font-weight: 800;
  color: var(--gold-ink);
}

.inquiry-row.is-done .inquiry-state {
  color: var(--ink-3, #6b7a82);
}

@media (max-width: 620px) {
  .inquiry-row {
    /* 좁으면 날짜·상태를 윗줄에 나란히, 글은 아랫줄 전체를 쓴다. */
    grid-template-columns: auto 1fr;
  }

  .inquiry-when { order: 1; }
  .inquiry-state { order: 2; text-align: right; }
  .inquiry-text { order: 3; grid-column: 1 / -1; }
}

/* 완강 혜택 안내 (2026-08-16) — 숫자 넷 아래에 붙는다.
   🔸 금색으로 둔다. 여기까지 온 분에게 주는 말이라 눈에 띄어야 한다
      (만세력 쿠폰과 같은 색 — 실제로 만세력 쿠폰으로 나간다). */
.done-benefit {
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1.5px solid var(--gold);
  border-radius: 12px;
  background: var(--panel);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink);
}

.done-benefit b {
  color: var(--gold-ink);
  font-weight: 850;
}

/* 「아래 문의 칸」 — 누르면 문의 칸으로 데려가고 미리 적어 준다 (2026-08-17). */
.done-benefit a {
  font-weight: 800;
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ⑤ 수강권 · 결제 */
.purchase-list {
  display: grid;
  gap: 10px;
}

.purchase-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.purchase-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.purchase-meta {
  font-size: 14px;
  color: var(--muted);
}

.purchase-side {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 「이 결제 문의하기」 (2026-08-17).
   🔴 눈에 띄게 만들지 않는다. 결제 화면이 아니라 지난 주문을 보는 자리이고,
      대부분은 문의할 일이 없다. 필요한 사람만 찾으면 된다.
   🔸 그래도 손가락으로 눌러야 하니 높이는 44px 를 지킨다. */
.purchase-ask {
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: 750;
  color: var(--ink-3, #6b7a82);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}

.purchase-ask:hover {
  color: var(--green);
}

.purchase-amount {
  font-weight: 900;
  color: var(--ink);
}

.purchase-tag {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(185, 138, 54, 0.16);
  color: var(--gold-ink);
  font-size: 13px;
  font-weight: 800;
}

/* 환불한 주문은 흐리게 — 지우지 않는다. 기록으로 남아 있어야 한다 */
.purchase-row.is-refunded {
  opacity: 0.62;
}

.purchase-row.is-refunded .purchase-amount {
  text-decoration: line-through;
}

/* ⑥ 사주퀴즈 */
.quiz-summary {
  display: grid;
  gap: 14px;
  padding: 20px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.quiz-summary-line {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

.quiz-summary-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

@media (max-width: 720px) {
  .resume-card {
    padding: 20px 18px;
  }
  .resume-title {
    font-size: 22px;
  }
}

/* ── 동전 크게 보기 (2026-08-04) ─────────────────────────────────
   프로필의 동전은 56~78px 이라 테두리 무늬가 안 보인다.
   눌러서 크게 보고 감상할 수 있게 한다. */
.coin-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
}

.coin-modal-back {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 28, 0.62);
  backdrop-filter: blur(3px);
}

.coin-modal-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 340px;
  padding: 30px 28px 24px;
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 30px 70px rgba(12, 20, 24, 0.4);
  text-align: center;
  animation: coin-pop 0.18s ease-out;
}

@keyframes coin-pop {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .coin-modal-body { animation: none }
  .tier-coin-wrap { transition: none }
}

/* 테두리를 두른 사람은 테가 밖을 감싸고 동전이 구멍(59.95%)에 들어간다.
   안 두른 사람은 동전만 크게 — 빈 자리를 남기지 않는다. */
.coin-modal-art {
  position: relative;
  display: block;
  width: 232px;
  aspect-ratio: 1 / 1;
  margin-bottom: 6px;
}

.coin-modal-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.coin-modal-coin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.coin-modal-coin.in-ring {
  width: 59.95%;
  height: 59.95%;
}

.coin-modal-tier {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.coin-modal-badge {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 14px;
  font-weight: 850;
}

.coin-modal-exp {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 780;
  color: var(--muted);
}

.coin-modal-close {
  margin-top: 12px;
  min-height: 44px;
  padding: 0 26px;
  border: 0;
  border-radius: 10px;
  background: #21333d;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 850;
  cursor: pointer;
}

@media (max-width: 420px) {
  .coin-modal-art { width: 190px }
}

/* ── 자주 묻는 질문 (2026-08-04) ─────────────────────────────────
   문항이 23개라 다 펼쳐 두면 벽이 된다. 눌러서 펴는 <details> 로 둔다
   (자바스크립트가 필요 없고, 브라우저 검색(Ctrl+F)에도 걸린다). */
.faq-wrap {
  max-width: 820px;
  margin: 18px auto 0;
}

.faq-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.faq-jump a {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.faq-jump a:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.faq-h2 {
  margin: 34px 0 10px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.02em;
  scroll-margin-top: 20px;
}

.faq-h2:first-of-type {
  margin-top: 8px;
}

/* 만세력과 같은 말을 쓰는 묶음이라는 것을 밝혀 둔다 */
.faq-shared-note {
  margin: -4px 0 12px;
  padding-left: 11px;
  border-left: 2px solid var(--blue);
  font-size: 14px;
  font-weight: 750;
  color: var(--muted);
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  margin-bottom: 8px;
  overflow: hidden;
}

.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 46px 15px 18px;
  position: relative;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.5;
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

/* 펼침 표시. 글자가 아니라 도형이라 어느 브라우저에서나 같게 보인다 */
.faq-item > summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 22px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s;
}

.faq-item[open] > summary::after {
  transform: rotate(-135deg);
  top: 25px;
}

.faq-item > summary:hover {
  color: var(--blue);
}

.faq-item > summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.faq-item[open] > summary {
  border-bottom: 1px solid var(--line);
}

.faq-a {
  padding: 15px 18px 17px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.faq-a p {
  margin: 0 0 9px;
}

.faq-a p:last-child {
  margin-bottom: 0;
}

.faq-a b {
  color: var(--ink);
}

.faq-a ul {
  margin: 0 0 9px;
  padding-left: 19px;
}

.faq-a li {
  margin-bottom: 5px;
}

.faq-more {
  margin-top: 12px !important;
}

.faq-more a {
  color: var(--blue);
  font-weight: 800;
  text-underline-offset: 3px;
}

.faq-contact {
  margin-top: 38px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--blue-soft);
}

.faq-contact h2 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 900;
}

.faq-contact p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.faq-contact b {
  color: var(--ink);
}

@media (max-width: 560px) {
  .faq-item > summary { font-size: 15px; padding-right: 40px }
  .faq-h2 { font-size: 18px }
}

/* ── 이어보기 — '내 강의' 목록의 첫 줄 (2026-08-05) ───────────────
   8/4 에는 오른쪽 열에 따로 있었다. 남는 자리는 없어졌지만 '내 강의'와 따로 놀았다 —
   이어볼 강의도 결국 내 강의 중 하나다.
   아래 강의 카드와 같은 골격(.enrolled-card)을 그대로 쓰고, 파란 테로만 짚어 준다. */
.resume-row {
  display: grid;
  align-items: center;
  margin-bottom: 10px;
  border-color: var(--blue);
  background: linear-gradient(135deg, var(--blue-soft), var(--panel));
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s;
}

.resume-row:hover {
  transform: translateY(-1px);
}

.resume-row:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* 그림 위에 진행바를 얹는다 — 유튜브·넷플릭스와 같은 방식이라 설명이 필요 없다 */
.resume-row-art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  min-height: 0 !important;
}

.resume-row-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.resume-row-meter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: rgba(20, 30, 36, 0.35);
}

.resume-row-meter > span {
  display: block;
  height: 100%;
  background: var(--blue);
}

.resume-row-body {
  display: grid;
  gap: 3px;
  min-width: 0;
  /* 그림이 글보다 키가 클 때 위쪽에 몰리지 않게 (2026-08-07). */
  align-self: center;
}

.resume-row-label {
  font-size: 12px;
  font-weight: 900;
  color: var(--blue);
}

.resume-row-body strong {
  font-size: 18px;
  line-height: 1.35;
  color: var(--ink);
  /* 유튜브 원제목은 길다. 두 줄까지만 보인다(앞부분은 my-page.js 가 이미 잘라낸다). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.resume-row-course {
  font-size: 13px;
  font-weight: 750;
  color: var(--muted);
}

.resume-row-where {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-soft);
}

.resume-row-go {
  /* 글 묶음 밖으로 나왔으므로 카드 격자에서 자리를 직접 잡는다 —
     넓은 화면에서는 지금까지처럼 그림 옆 칸 안, 글 아래에 붙는다. */
  grid-column: 2;
  justify-self: start;
  margin-top: -4px;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 8px;
  background: #21333d;
  color: #fff;
  font-size: 14px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 560px) {
  .resume-row { grid-template-columns: 96px minmax(0, 1fr) }
  .resume-row-body strong { font-size: 15px }
}

/* 오답노트 [더 보기] (2026-08-06).
   최대 1,028문항까지 쌓이는 목록이라 스무 장씩 끊어 그린다.
   단추는 목록의 끝이라는 표시이기도 하므로 폭을 다 쓴다. */
.wn-more {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.wn-more:hover {
  border-color: var(--blue);
  color: var(--blue);
}

/* 랭킹 훈장의 '가는 길' (2026-08-06).
   연속출석은 진행 막대가 있는데 랭킹은 셀 것이 없어 아래가 비었다.
   비워 두면 덜 만든 카드처럼 보이고, 어디서 겨루는지도 알 수 없다.
   진행 막대와 같은 자리·같은 무게로 둔다 — 눈에 띄되 앞서지 않게. */
.badge-goto {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--blue);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}
.badge-goto:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── 휴대폰에서 입력칸을 누를 때 화면이 확 커지던 것 (2026-08-07) ──────────

   🔴 아이폰 사파리는 입력칸 글자가 **16px 보다 작으면** 손님이 그 칸을 누르는 순간
      화면을 통째로 확대한다. 한 번 커진 화면은 저절로 안 돌아온다 —
      손님이 두 손가락으로 오므려 되돌려야 한다.

      가장 나쁜 자리에서 났다. **결제 화면이다.**
        쿠폰 14px · 이름 14px · 이메일 14px · 강의 고르기 15px
        마이페이지 별명 15px · 휴대폰 15px

      이름을 치려고 눌렀는데 화면이 확 커지면, 그다음 칸은 화면 밖에 있다.
      결제 직전에 이런 일이 나면 손님은 그냥 나간다.

   좁은 화면에서만 16px 로 올린다. 넓은 화면의 생김새는 건드리지 않는다.
   🔴 16px 은 취향이 아니라 사파리가 정한 경계값이다. 15.5px 도 확대된다. */
/* 🔴 `select` 만 적으면 `.checkout-select` 같은 클래스 규칙에 진다(미디어쿼리는 힘을 안 더한다).
      `:not([hidden])` 을 붙여 힘을 클래스와 같은 급으로 맞춘다 — 고르는 칸도 다 잡히게. */
@media (max-width: 760px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select:not([hidden]),
  textarea:not([hidden]) {
    font-size: 16px;
  }
}

/* ── 이어보기 줄의 좁은 화면 자리 (2026-08-07) ──────────────────────────
   🔴 이 규칙은 반드시 파일 **맨 끝**에 있어야 한다.
      `.resume-row-go` 의 기본 규칙이 위쪽(7500줄대)에 있어서, 좁은 화면 규칙을
      6300줄대 미디어쿼리에 적으면 나중에 나온 기본 규칙에 진다.
      미디어쿼리는 힘(우선순위)을 더해 주지 않는다 — 순서만이 갈랐다.
      실제로 한 번 당했다: 단추가 113px 로 남아 있었다.

   🔴 폭(760px)은 위 `.enrolled-card` 규칙과 **같아야 한다.** 다르면 그 사이 폭에서
      카드 아랫단만 내려오고 이어보기 단추는 안 내려와 둘이 어긋난다. */
@media (max-width: 760px) {
  .resume-row-go {
    grid-column: 1 / -1;
    margin-top: 0;
  }
}

/* 단추를 폭 전체로 늘리는 것은 **휴대폰에서만** (2026-08-07).
   760px(태블릿)까지 늘리면 '이어보기' 단추가 492px 이 되어 우스꽝스럽다.
   좁아서 손가락 자리가 아쉬운 것은 폰이다.

   🔴 `.enrolled-bottom` 은 flex 라 `justify-self` 가 안 먹는다(그건 격자용이다).
      flex 자식은 `flex:1` 로 늘린다. 한 번 헛짚어서 95px 로 남아 있었다. */
/* 🔴 폭을 480px 로 잡은 이유 (2026-08-07).
   처음에 760px 로 했다가 560px 로 줄였는데도 그 구간에서 **카드는 500px 인데
   그림만 96px** 이라 카드의 18~20% — 넓은 화면에서 지적받은 '우표' 모습이
   그대로 재현됐다. 요즘 폰이 320~430px 이라 480px 이 경계로 맞다.
   481~760px 은 140px 을 그대로 쓴다(카드의 27~35%). */
@media (max-width: 480px) {
  .enrolled-card {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .enrolled-bottom .row-cta {
    flex: 1;
    justify-content: center;
    text-align: center;
  }

  .resume-row-go {
    justify-self: stretch;
    justify-content: center;
    text-align: center;
  }
}

/* ── 이어보기 줄은 폭 전체를 쓴다 — 그림도 그만큼 키운다 (2026-08-07) ────
   강의 카드는 넓은 화면에서 두 장씩 놓여 450px 가 되지만, 이어보기는 한 줄로
   914px 를 다 쓴다. 거기에 140px 그림을 두면 우표처럼 보인다.
   비율(약 30%)을 맞춰 260px 로 키운다. */
@media (min-width: 761px) {
  .resume-row {
    /* 강의 카드와 같은 방식(비율 + 위아래 한계). 260px 로 못 박으면
       그 사이 폭(800px 쯤)에서 그림만 커 보인다. */
    grid-template-columns: minmax(110px, min(30%, 260px)) minmax(0, 1fr);
  }
}

/* 이용이 제한된 계정 안내 (2026-08-08).
   막힌 회원은 '로그아웃'으로 보인다. 이유를 안 붙이면 손님은 로그인을 다시 시도하고
   또 로그아웃되어 왜 안 되는지 끝내 모른다. 화면 맨 위에서 그 고리를 끊는다. */
.account-blocked {
  position: sticky;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: #a8503a;
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  word-break: keep-all;
}
.account-blocked b {
  font-weight: 800;
}
.account-blocked a {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 640px) {
  .account-blocked {
    padding: 10px 14px;
    font-size: 13px;
    text-align: left;
  }
}

/* ── 목록 카드에서도 "마스터 = 두 강의" 가 보이게 (2026-08-18 소담 요청) ──
   상세 화면(.pack-visual)에는 8/16 에 넣었는데 목록에는 없었다.
   상세로 들어오지 않는 손님은 영영 모른다 — 그리고 대부분은 안 들어온다.

   🔴 모양을 세 번 고쳤다. 적어 둔다 — 다음에 또 같은 길을 가지 않게.
     ① 가로 · 섬네일 아래에 강의 이름을 글자로
        → 그림 안에 이미 인쇄돼 있는 말이었고, 그만큼 묶음 아래에 빈칸 67px
     ② 세로로 세움 (좁은 칸 199px)
        → 아래 빈칸은 사라졌는데 🔴 **오른쪽에 빈칸이 엄청나게 남았다**(소담).
           본문이 짧은데 칸만 849px 를 차지하고 있었다
     ③ 지금 · 좌우로 크게
        → 섬네일이 카드의 절반을 쓴다. 남는 쓸모없는 폭을 그림이 가져간다

   🔸 배운 것 — **칸을 먼저 정하고 그 안에 그림을 맞췄다.**
      그러면 그림이 칸보다 작을 때마다 빈칸이 생긴다.
      그림을 먼저 크게 잡고 칸을 거기 맞춰야 빈칸이 안 생긴다. */
.course-row-card.has-pack {
  /* 섬네일 쪽이 절반 조금 넘게 가져간다 — 한 장이 300px 대가 된다.
     🔴 58% 는 재보고 고른 값이다. 더 늘리면 오히려 벌어진다 —
        본문 칸이 좁아져 글이 한 줄 더 쌀리고, 그만큼 본문이 길어진다.
        재본 값 (그림높이 − 본문높이)
          50%  −65px    56%  −46px    ⭐ 58%  −39px    60%  −53px    62%  −68px */
  grid-template-columns: minmax(300px, 58%) minmax(0, 1fr);
  gap: 20px;   /* 🔸 align-items 는 안 적는다 — 기본값이 center 다 */
}

.course-art-pack {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pack-thumb {
  flex: 1;
  min-width: 0;
  display: block;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(79, 95, 104, 0.12);
  border-radius: 7px;
  background: rgba(245, 250, 251, 0.72);
}

.pack-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

/* 🔸 「+」를 두 장 사이에 둔다. 다시 좀 은은하게 —
      그림이 커졌으니 딱지까지 크면 셀이 둘이 아니라 셋으로 보인다. */
.course-art-pack .pack-plus {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--green, #4f7f67);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

/* 🔴 딱지는 아래 섬네일에만. 값을 안 받는 쪽이 어느 쪽인지
      그림만 보고 알 수 있어야 한다 — 글을 읽게 만들면 안 된다. */
.pack-free {
  position: absolute;
  left: 7px;
  bottom: 7px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--green, #4f7f67);
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 8px rgba(33, 51, 61, 0.18);
}

.pack-inline {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2, #3f5058);
  line-height: 1.55;
}

.pack-inline b {
  color: var(--green);
  font-weight: 850;
}

/* 낱개 값은 취소선으로 — '이만큼을 안 받는다' 가 한눈에 보인다 */
.pack-inline em {
  font-style: normal;
  text-decoration: line-through;
  opacity: 0.75;
}

/* 좁아지면 위아래로 바꾼다 — 그림이 칸 전체 폭을 쓰게 된다.
   두 장은 그대로 나란히 둔다(위아래로 쌓으면 값이 한 화면 아래로 밀린다).

   🔴 이 폭을 860 → 1040 으로 올렸다 (2026-08-18).
      860 은 "글이 깨지는 폭" 이었지 "그림이 못 알아볼 만큼 작아지는 폭" 이 아니었다.
      그 사이 구간에서 그림만 쪼그라들고 위아래 여백이 벌어지고 있었다 —
        폭      섬네일        위·아래 여백    세로로 세우면
        1100    575×150        56px          991×267
        1040    ────────── 여기서 갈린다 ──────────
        1000    517×134        64px          891×239
         900    459×118        82px          791×211
      🔸 64px 부터는 '여백' 이 아니라 '비어 있다' 로 읽힌다. 거기를 경계로 잡았다. */
@media (max-width: 1040px) {
  .course-row-card.has-pack {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 14px;
  }
}

/* 🎁 홈 카드에서도 "마스터 = 두 강의" (2026-08-18 소담).
   목록·상세는 섬네일 둘로 보여주는데, 홈은 카드 네 칸이라 섬네일을 두 장 넣으면
   칸 모양이 깨진다. 딱지 하나로 대신한다.
   🔸 색·모양을 목록 카드의 「무료 포함」 딱지와 맞춘다 —
      같은 것을 말하는데 모양이 다르면 다른 것으로 읽힌다. */
.course-card .course-art .art-free {
  position: absolute;
  top: auto;
  left: 8px;
  bottom: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--green, #4f7f67);
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(33, 51, 61, 0.18);
}

/* 📎 강의자료 — 마이페이지 강의 카드 안 (2026-08-19 소담 요청).
   🔸 자료가 있을 때만 나온다(없으면 칸째로 숨는다). 없는데 빈 칸을 두면
      "받을 게 있나?" 하고 눌러 보게 되고, 눌러도 아무 일이 없으면 고장으로 읽힌다. */
.enrolled-materials {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(79, 95, 104, 0.14);
}

.materials-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 850;
  color: var(--ink-2, #3f5058);
}

.materials-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.materials-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

/* 🔸 자료 이름이 길면 줄이 무너진다. 이름만 줄이고 크기는 끝에 붙여 둔다 —
      크기는 짧아서 접히면 오히려 이상해 보인다. */
.materials-list a {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--blue);
  font-size: 14px;
  font-weight: 800;
}

.materials-list a:hover {
  text-decoration: underline;
}

.materials-size {
  flex: none;
  font-size: 13px;
  font-weight: 750;
  color: var(--muted);
}

/* 📎 「전체 보기」 — 자료가 넉넉히 많을 때만 나온다 (2026-08-20 소담 요청).
   🔴 10개를 늘어놓으면 강의 카드가 200px 넘게 길어진다. 세 개만 보이고 나머지는 접는다.
   🔸 화살표만 두면 무슨 뜻인지 모른다 — 「전체 보기」를 옆에 적는다(소담). */
.materials-more {
  margin-top: 6px;
  /* 🔸 글씨는 작아도 **누르는 칸은 넉넉히**. 27px 였을 때 휴대폰에서 손가락에 안 잡혔다. */
  padding: 9px 2px;
  min-height: 36px;
  border: 0;
  background: none;
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.materials-more:hover {
  text-decoration: underline;
}

.materials-caret {
  font-size: 11px;
  line-height: 1;
}

/* 몇 개가 더 있는지. 펼치면 숨는다 — 펼친 뒤에는 셀 필요가 없다. */
.materials-rest-count {
  color: var(--muted);
  font-weight: 750;
}

/* 접혔다 펼쳐진 줄은 위 목록과 같은 간격으로 이어 붙인다 */
.materials-rest {
  margin-top: 6px;
}

/* 🔍 훈장을 눌러서 크게 보기 (2026-08-20 소담 요청).
   🔸 누를 수 있어 보이지 않으면 아무도 안 누른다 — 손 모양과 살짝 커지는 것으로 알린다. */
.badge-icon-wrap[role="button"] {
  cursor: zoom-in;
  border-radius: 999px;
  transition: transform 140ms ease;
}

.badge-icon-wrap[role="button"]:hover {
  transform: scale(1.04);
}

/* 키보드로 옮겨 다닐 때 어디에 있는지 보여야 한다 */
.badge-icon-wrap[role="button"]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}


/* ── 쿠폰 한 장의 모양 (2026-08-20) ─────────────────────────────
   🔸 값 → 어디에 쓰나 → 언제까지, 순으로 눈이 흐르게 둔다.
      전에는 「소담만세력 이용권 · 2027-08-15까지」처럼 한 줄에 뭉쳐 있어
      **둘 다 안 읽혔다.** 기한을 오른쪽으로 뺀다. */
.my-coupon.is-static {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.my-coupon .coupon-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* 이름이 길면 이름만 줄인다. 기한은 짧아서 접히면 오히려 이상해 보인다. */
.my-coupon .coupon-main b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-coupon .coupon-where {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3, #6b7a82);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-coupon .coupon-until {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(79, 95, 104, 0.08);
  color: var(--ink-3, #6b7a82);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

/* 이미 쓴 것은 딱지까지 회색으로 — 흐리게만 두면 「사용함」이 기한처럼 읽힌다 */
.my-coupon.is-used .coupon-until {
  background: rgba(79, 95, 104, 0.14);
}

/* ── 내 정보 칸을 한 줄로 (2026-08-20 소담: *"마이 인포도 디자인이나 레이아웃이 구려"*) ──
   🔴 칸마다 **이름 위 · 값 아래**로 두 줄씩 쌓여 있었다.
      다섯 칸이 230px 를 먹는데 카드 폭은 347px 였다 — 오른쪽이 통째로 비고,
      화면은 '카드' 가 아니라 **입력 서식을 늘어놓은 것**처럼 보였다.
   🔸 이름은 왼쪽, 값은 오른쪽. 사이에 얇은 줄. 눈이 세로로 한 번에 훑린다.

   🔴 **보기 모드에서만** 이렇게 둔다. 수정 모드에서는 입력칸이 칸 폭을 다 써야 해서
      원래대로 위아래로 쌓는다(`.is-editing` 이 붙는다). */
.my-profile-form:not(.is-editing) .my-field {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  /* 🔸 한 줄로 바꾸고도 높이가 안 줄면 고친 보람이 없다(46 → 45px 였다).
     여백을 조여 다섯 칸에서 40px 를 덜어낸다. */
  padding: 8px 0;
  border-top: 1px solid rgba(79, 95, 104, 0.1);
}

/* 첫 칸 위에는 줄을 긋지 않는다 — 바로 위 제목줄과 겹쳐 두 줄로 보인다 */
.my-profile-form:not(.is-editing) .my-field:first-of-type {
  border-top: 0;
  padding-top: 4px;
}

.my-profile-form:not(.is-editing) .my-field-label {
  flex: none;
}

/* 값은 오른쪽에 붙이고, 길면 값만 줄바꿈한다.
   🔸 이메일은 `word-break: break-all` 이 이미 걸려 있어 칸을 안 넘는다. */
.my-profile-form:not(.is-editing) .my-field-value {
  flex: 1;
  min-width: 0;
  text-align: right;
  color: var(--ink-2, #3f5058);
  font-weight: 800;
}

/* 아직 안 정한 값은 흐리게 — 값이 있는 것과 없는 것이 한눈에 갈려야 한다 */
.my-profile-form:not(.is-editing) .my-field-value.empty {
  color: var(--muted);
  font-weight: 700;
}

/* 문자 수신은 켜짐/꺼짐이라 알약이 읽기 쉽다 */
.my-profile-form:not(.is-editing) #myMarketingText {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(31, 122, 82, 0.1);
  color: var(--green);
  font-size: 13px;
  font-weight: 850;
}

.my-profile-form:not(.is-editing) #myMarketingText.empty {
  background: rgba(79, 95, 104, 0.1);
  color: var(--muted);
}

/* 로그인 수단 아래 안내 — 값이 아니라 '조심하라' 는 말이다. 배경을 깔아 갈라 둔다.
   🔴 여기가 "돈 냈는데 강의가 없어졌다" 문의를 미리 막는 자리다(2026-08-04). */
.my-profile-form:not(.is-editing) #myProviderNote {
  margin: 10px 0 0;
  padding: 9px 11px;
  border-radius: 8px;
  background: #fff6e6;
  color: #8a6410;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.6;
}

/* [수정하기] 는 제목 옆 작은 글 단추다. 누를 수 있어 보이게만 둔다 */
.btn-edit-profile {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-3, #6b7a82);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.btn-edit-profile:hover {
  border-color: var(--blue);
  color: var(--blue);
}

/* ── 소담만세력 쿠폰 묶음은 접어 둔다 (2026-08-20 소담) ──────────────
   여기 쿠폰은 **아카데미 결제에 못 쓴다.** 늘 펼쳐 두면 정작 쓸 수 있는
   아카데미 쿠폰이 아래로 밀린다. 장수만 보이고, 궁금하면 누른다. */
.my-coupon-list button.coupon-fold {
  width: 100%;
  /* 🔸 단추지만 제목처럼 보여야 한다 — 위 아카데미 제목과 같은 줄에 선다 */
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  text-align: left;
  cursor: pointer;
  /* 🔴 누르는 칸은 넉넉히. 자료 목록에서 27px 이라 손가락에 안 잡혔던 적이 있다 */
  min-height: 40px;
  padding: 12px 0 8px;
}

.my-coupon-list button.coupon-fold:hover .coupon-fold-more {
  text-decoration: underline;
}

/* 「펼쳐 보기」는 오른쪽 끝으로 밀어 둔다 — 이름·장수와 역할이 다르다 */
.coupon-fold-more {
  margin-left: auto;
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
}

.coupon-fold-caret {
  font-size: 11px;
}

.coupon-fold-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}


/* 🔍 사다리 동전에도 돋보기 커서 (2026-08-20 소담).
   소담: *"커서가 닿으면 돋보기로 바꾸는 기능 있었으면해 (테두리처럼)"*
   🔴 프로필 동전과 훈장에는 있었는데 **사다리에만 없었다**(그냥 화살표였다).
      누를 수 있는 것이 안 눌릴 것처럼 보이면, 만들어 두고도 아무도 안 쓴다.
   🔸 훈장(.badge-icon-wrap)과 같은 규칙을 쓴다 — 손 모양·살짝 커짐·초점 테두리. */
.tier-step-coin[role="button"] {
  cursor: zoom-in;
  border-radius: 50%;
  transition: transform 140ms ease;
}

.tier-step-coin[role="button"]:hover {
  transform: scale(1.06);
}

.tier-step-coin[role="button"]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* ── ✎ 사주퀴즈 문항 고치기 (2026-08-21 소담 요청) ─────────────────
   소담: *"굳이 어드민에서 하지 않고도 조절할 수 있었으면 좋겠어."*
   🔴 손님에게는 절대 안 보인다 — 편집 권한을 받은 계정에서만,
      그리고 관리자 모드를 켰을 때만 나온다. */
.admin-edit-panel {
  margin: 10px 0 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfdfd;
}

.admin-edit-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
}

.admin-edit-id {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

/* 고친 적이 있는 문항이라는 표시 — 원본과 다르다는 것을 알아야 되돌릴 생각을 한다 */
.admin-edit-changed {
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff6e6;
  color: #8a6410;
  font-size: 12px;
  font-weight: 850;
}

.admin-edit-row {
  display: block;
  margin-bottom: 10px;
}

.admin-edit-row > span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.admin-edit-panel textarea,
.admin-edit-panel select,
.admin-edit-choice-text {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  /* 🔴 16px 아래로 내리지 않는다 — 사파리가 화면을 확대한다(글자 크기 기준 ③). */
  font-size: 16px;
  font-family: inherit;
  line-height: 1.6;
}

.admin-edit-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 라디오로 정답을 고른다 — 정답 칸을 따로 두면 보기와 안 맞는 값을 적을 수 있다 */
.admin-edit-choice {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-edit-choice input[type="radio"] {
  flex: none;
  width: 18px;
  height: 18px;
}

.admin-edit-warn {
  margin: 0 0 10px;
  padding: 9px 11px;
  border-radius: 8px;
  background: #fdeaea;
  color: #c0392b;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.6;
}

.admin-edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-edit-panel button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.admin-edit-save {
  border-color: var(--blue) !important;
  background: var(--blue) !important;
  color: #fff;
}

/* 되돌리기는 되돌릴 것이 있을 때만 나온다. 늘 띄우면 누를 일 없는 단추가 하나 는다. */
.admin-edit-reset {
  margin-left: auto;
  color: #c0392b;
}

.admin-edit-msg {
  font-size: 13px;
  font-weight: 750;
  color: var(--muted);
}

.admin-edit-btn {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────
   사주퀴즈 관리자 모드 — 저장 표시와 문항 피드백 (2026-08-22)

   🔴 「저장」과 「피드백」은 하는 일이 다르다. 색으로 갈라 둔다.
      저장(난이도·문항)은 손님 화면을 바꾼다 — 흰 단추.
      피드백은 아무것도 안 바꾼다. 나중에 같이 보려고 적어 두는 말이다 — 연보라.
   ───────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.admin-save-btn {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.admin-save-btn:hover { border-color: #94a3b8; }

.admin-save-state {
  font-size: 12.5px;
  font-weight: 750;
  white-space: nowrap;
}
.admin-save-state[data-state="idle"]   { color: transparent; }
.admin-save-state[data-state="saving"] { color: var(--muted); }
.admin-save-state[data-state="done"]   { color: #15803d; }
.admin-save-state[data-state="fail"]   { color: #b91c1c; }

.admin-note-btn {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #c7b8ea;
  border-radius: 8px;
  background: #f6f2fd;
  color: #5b3fa8;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.admin-note-btn:hover { background: #efe7fb; }

.admin-note-panel {
  margin: 10px 0 4px;
  padding: 14px 16px;
  border: 1px solid #d8ccf0;
  border-radius: 12px;
  background: #faf7ff;
}
.admin-note-panel textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  line-height: 1.7;
  resize: vertical;
  background: #fff;
}
.admin-note-panel .admin-edit-msg.is-bad { color: #b91c1c; }

.admin-note-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid #e4dbf5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-note-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.65;
}
.admin-note-empty {
  display: block !important;
  color: var(--muted);
  font-size: 13px;
}
.admin-note-when {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-note-body { white-space: pre-wrap; word-break: break-word; }
.admin-note-del {
  border: 0;
  background: none;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.admin-note-del:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .admin-note-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .admin-note-when { grid-column: 1 / -1; }
}

/* ── 쿠키 동의 띠 (2026-09-08) ────────────────────────────────
   🔴 왜 필요한가 — 마이크로소프트 Clarity 를 붙이면 손님이 무엇을 눌렀는지가
      **우리 서버가 아니라 마이크로소프트(미국) 서버로** 간다. 남의 회사에
      손님 자료를 넘기는 것이라, 알리고 동의를 받아야 한다.
      ⚠️ 우리가 직접 세는 방문 기록(visits.json)은 여기 해당이 없다 —
         쿠키를 안 쓰고 누구인지도 안 남긴다. 이 띠는 오직 Clarity 때문이다.

   🔴 두 단추를 **같은 크기 · 같은 무게**로 둔다. 「동의」만 크고 색을 넣고
      「안 함」은 작은 글씨로 흘려 두는 화면을 흔히 보는데, 그건 고르게 하는 척
      떠미는 것이다. 고를 수 있어야 동의고, 떠밀린 것은 동의가 아니다.

   🔸 화면을 막지 않는다. 덮개를 씌우고 누르기 전엔 아무것도 못 하게 하면
      손님은 읽지 않고 아무 단추나 눌러 치운다. 그렇게 받은 동의는 뜻이 없다.
   🔸 아래에 붙인다. 위에 붙이면 공지 띠와 자리가 겹친다. */
.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  border-top: 1px solid var(--line-strong);
  background: #fff;
  box-shadow: 0 -10px 30px rgba(48, 63, 71, 0.12);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
}
.cookie-bar-text {
  /* 🔴 min-width:0 — 없으면 긴 글이 칸을 밀어 단추가 화면 밖으로 나간다.
     공지 띠에서 똑같이 겪었다. */
  flex: 1;
  min-width: 0;
  margin: 0;
}
.cookie-bar-text b {
  font-weight: 800;
}
.cookie-bar-link {
  color: var(--blue);
  text-decoration: underline;
  white-space: nowrap;
}
.cookie-bar-acts {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
}
.cookie-bar-acts button {
  /* 🔴 44px 아래로 내리지 않는다 — 휴대폰에서 손가락으로 누르는 것이다. */
  min-height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
/* 🔴 두 단추를 **똑같이** 꾸민다 — 글자만 다르다.
   처음에는 「동의합니다」만 파랗게 칠했는데, 그러면 눈이 그리로 먼저 간다.
   크기가 같아도 하나만 칠해 두면 그쪽으로 떠미는 것이라 위 주석과 어긋난다.
   ⚠️ 나중에 「보기 좋게」 한쪽만 색을 넣고 싶어지거든 이 줄을 다시 읽을 것. */
.cookie-no,
.cookie-yes {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
}
.cookie-no:hover,
.cookie-yes:hover { background: #f3f1ed; }
.cookie-bar :focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* 🔴 띠는 떠 있는 것이라 바닥글을 덮는다. 띠가 있는 동안만 아래를 비워 준다.
   덮어 두면 손님이 사업자 정보나 환불정책을 못 본다 — 거기 있어야 하는 글이다. */
body.has-cookie-bar { padding-bottom: 116px; }
@media (max-width: 640px) {
  body.has-cookie-bar { padding-bottom: 190px; }
}

/* 휴대폰 — 가로로 늘어놓으면 글이 두 글자씩 끊긴다. 세로로 쌓는다. */
@media (max-width: 640px) {
  .cookie-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
  }
  .cookie-bar-acts button { flex: 1; }
}

/* 바닥글의 「쿠키 설정」 — 한 번 고른 뒤에 마음을 바꿀 자리다.
   동의는 무를 수 있어야 동의다. 없으면 한 번 누른 것에 갇힌다. */
.cookie-reset {
  border: 0;
  padding: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}