/* =========================================================
   cover.css
   Main Cover + Chapter Cover

   적용 대상
   - slide-1  : MAIN COVER
   - slide-5  : WEB CHAPTER COVER
   - slide-15 : PRESENTATION CHAPTER COVER
   - slide-31 : CONTENT CHAPTER COVER

   표지 계열의 캔버스 크기 + 내부 디자인만 담당
   일반 콘텐츠 슬라이드는 common.css에서 관리
   ========================================================= */


/* =========================================================
   00. COVER CANVAS
   ========================================================= */

   .cover,
   .chapter-cover {
       width: min(
           90vw,
           calc(86vh * 16 / 9),
           1440px
       );
   
       aspect-ratio: 16 / 9;
       flex: 0 0 auto;
   
       margin: 0;
       overflow: hidden;
   
       box-shadow:
           0 18px 48px rgba(15, 23, 42, 0.10);
   }
   
   
   /* =========================================================
      01. MAIN COVER · slide-1
      ========================================================= */
   
   .cover {
       display: grid;
   
       grid-template-columns:
           60% 20% 20%;
   
       grid-template-rows: 100%;
   }
   
   
   /* ---------------------------------------------------------
      MAIN COVER · LEFT
      --------------------------------------------------------- */
   
   .cover-main {
       grid-column: 1;
       grid-row: 1;
   
       min-width: 0;
   
       display: flex;
       align-items: flex-end;
   
       background: #f3f0e9;
   
       padding:
           0
           clamp(36px, 4vw, 72px)
           clamp(38px, 5vh, 72px);
   }
   
   
   .cover-content {
       width: 100%;
       max-width: 680px;
   }
   
   
   /* ---------------------------------------------------------
      MAIN COVER TITLE
      --------------------------------------------------------- */
   
   .cover-title {
       margin: 0;
   
       color: #171a20;
   
       font-size: clamp(42px, 4.1vw, 68px);
       font-weight: 800;
   
       line-height: 1.08;
       letter-spacing: -0.045em;
   }
   
   
   /* ---------------------------------------------------------
      MAIN COVER COPY
      --------------------------------------------------------- */
   
   .cover-copy {
       margin:
           clamp(32px, 4vh, 52px)
           0
           0;
   
       color: #3f4650;
   
       font-size: clamp(15px, 1.25vw, 20px);
       font-weight: 400;
   
       line-height: 1.55;
       letter-spacing: -0.025em;
   }
   
   
   /* ---------------------------------------------------------
      MAIN COVER META
      --------------------------------------------------------- */
   
   .cover-meta {
       margin:
           clamp(18px, 2.2vh, 28px)
           0
           0;
   
       color: #68717d;
   
       font-size: clamp(9px, 0.72vw, 12px);
       font-weight: 500;
   
       line-height: 1.4;
   }
   
   
   /* ---------------------------------------------------------
      MAIN COVER · CENTER
      --------------------------------------------------------- */
   
   .cover-message {
       grid-column: 2;
       grid-row: 1;
   
       min-width: 0;
   
       display: flex;
       align-items: flex-start;
   
       background: #dceff9;
   
       padding:
           clamp(50px, 7vh, 90px)
           clamp(24px, 2.7vw, 44px);
   }
   
   
   .cover-message p {
       margin: 0;
   
       color: #111827;
   
       font-size: clamp(22px, 2vw, 34px);
       font-weight: 700;
   
       line-height: 1.18;
       letter-spacing: -0.04em;
   }
   
   
   /* ---------------------------------------------------------
      MAIN COVER · RIGHT
      --------------------------------------------------------- */
   
   .cover-blue {
       grid-column: 3;
       grid-row: 1;
   
       min-width: 0;
   
       background: #4285d4;
   }
   
   
   /* =========================================================
      02. CHAPTER COVER · slide-5 / 15 / 31
      ========================================================= */
   
   .chapter-cover {
       display: grid;
   
       grid-template-columns:
           72% 28%;
   
       grid-template-rows: 100%;
   
       background: #0f1928;
   }
   
   
   /* ---------------------------------------------------------
      CHAPTER LEFT
      --------------------------------------------------------- */
   
   .chapter-main {
       grid-column: 1;
       grid-row: 1;
   
       min-width: 0;
   
       display: flex;
       flex-direction: column;
   
       background: #0f1928;
       color: #ffffff;
   
       padding:
           clamp(48px, 6vh, 76px)
           clamp(42px, 4vw, 72px)
           clamp(48px, 6vh, 76px);
   }
   
   
   /* ---------------------------------------------------------
      CHAPTER NUMBER
      --------------------------------------------------------- */
   
   .chapter-number {
       margin: 0;
   
       color: #66c4ec;
   
       font-size: clamp(12px, 1vw, 16px);
       font-weight: 700;
   
       line-height: 1;
   }
   
   
   /* ---------------------------------------------------------
      CHAPTER CONTENT
      --------------------------------------------------------- */
   
   .chapter-content {
       margin-top: auto;
   }
   
   
   /* ---------------------------------------------------------
      CHAPTER TITLE
      --------------------------------------------------------- */
   
   .chapter-title {
       margin: 0;
   
       color: #ffffff;
   
       font-size: clamp(52px, 5.2vw, 86px);
       font-weight: 400;
   
       line-height: 0.98;
       letter-spacing: -0.045em;
   }
   
   
   /* ---------------------------------------------------------
      CHAPTER COPY
      --------------------------------------------------------- */
   
   .chapter-copy {
       max-width: 760px;
   
       margin:
           clamp(42px, 5vh, 68px)
           0
           0;
   
       color: rgba(255, 255, 255, 0.92);
   
       font-size: clamp(17px, 1.45vw, 23px);
       font-weight: 400;
   
       line-height: 1.55;
       letter-spacing: -0.025em;
   }
   
   
   /* ---------------------------------------------------------
      CHAPTER RIGHT
      --------------------------------------------------------- */
   
   .chapter-side {
       grid-column: 2;
       grid-row: 1;
   
       min-width: 0;
   
       display: flex;
       align-items: flex-start;
   
       background: #65bce2;
   
       padding:
           clamp(64px, 8vh, 104px)
           clamp(36px, 4vw, 64px);
   }
   
   
   /* ---------------------------------------------------------
      CHAPTER KEYWORDS
      --------------------------------------------------------- */
   
   .chapter-keywords {
       margin: 0;
   
       color: #111827;
   
       font-size: clamp(30px, 3vw, 48px);
       font-weight: 400;
   
       line-height: 1.15;
       letter-spacing: -0.045em;
   }
   
   
   /* =========================================================
      03. SMALLER DESKTOP / LAPTOP
      ========================================================= */
   
   @media (max-width: 1280px) {
   
       .cover,
       .chapter-cover {
           width: min(
               92vw,
               calc(84vh * 16 / 9)
           );
       }
   }
   
   
   /* =========================================================
      04. LOW HEIGHT SCREEN
      ========================================================= */
   
   @media (max-height: 760px) {
   
       .cover,
       .chapter-cover {
           width: min(
               90vw,
               calc(88vh * 16 / 9)
           );
       }
   }
   
   
   /* =========================================================
      05. MOBILE
      ========================================================= */
   
   @media (max-width: 768px) {
   
       .cover,
       .chapter-cover {
           width: 96vw;
   
           box-shadow:
               0 10px 28px rgba(15, 23, 42, 0.10);
       }
   
   
       .cover-title {
           font-size: clamp(28px, 6.5vw, 44px);
       }
   
   
       .cover-copy {
           font-size: clamp(10px, 2.3vw, 15px);
       }
   
   
       .cover-message p {
           font-size: clamp(13px, 3vw, 22px);
       }
   
   
       .chapter-title {
           font-size: clamp(32px, 7vw, 54px);
       }
   
   
       .chapter-copy {
           font-size: clamp(10px, 2.4vw, 16px);
       }
   
   
       .chapter-keywords {
           font-size: clamp(16px, 3.6vw, 28px);
       }
   }