:root {
   --bg: #f3f5f7;
   --paper: #ffffff;
   --ink: #1f2a29;
   --muted: #63706d;
   --line: #dae1e8;
   --teal: #168276;
   --teal-soft: #e4f3ef;
   --coral: #d9614c;
   --coral-soft: #fae8e4;
   --amber: #b7791f;
   --amber-soft: #fff1cf;
   --violet: #7556a3;
   --violet-soft: #eee8f6;
   --green: #40a379;
   --green-soft: #e7f3e9;
   --blue: #3b71b7;
   --blue-soft: #e8f1ff;
   --shadow: 0 14px 35px rgba(31, 42, 41, 0.08);
 }

 * {
   box-sizing: border-box;
 }

 @font-face {
   font-family: LGSmHa;
   font-weight: 300;
   src: url(../fonts/LGSmHaL.woff) format("woff")
 }

 @font-face {
   font-family: LGSmHa;
   font-weight: 400;
   src: url(../fonts/LGSmHaR.woff) format("woff")
 }

 @font-face {
   font-family: LGSmHa;
   font-weight: 500;
   src: url(../fonts/LGSmHaSB.woff) format("woff")
 }

 @font-face {
   font-family: LGSmHa;
   font-weight: 700;
   src: url(../fonts/LGSmHaB.woff) format("woff")
 }


 html {
   scroll-behavior: smooth;
 }

 body {
   margin: 0;
   background: var(--bg);
   color: var(--ink);
   font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
   font-size: 16px;
   line-height: 1.68;
   letter-spacing: 0;
 }

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

 .page {
   min-height: 100vh;
 }

 .hero {
   background: #2c3238;
   color: #ffffff;
   border-bottom: 5px solid #cbd4de;
 }

 .hero-inner {
   position: relative;
   width: min(1120px, calc(100% - 40px));
   margin: 0 auto;
   padding: 56px 0 38px;
 }

 .eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 14px;
   color: #ff7780;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0;
   text-transform: uppercase;
 }

 .eyebrow::before {
   content: "";
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #ff7780;
 }

 h1 {
   margin: 0;
   font-size: clamp(28px, 3.6vw, 42px);
   line-height: 1.16;
   letter-spacing: 0;
   font-weight: 760;
 }

 .hero-copy {
   max-width: 820px;
   margin: 16px 0 0;
   color: #d8e6e2;
   font-size: 16px;
 }

 .meta-row {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 28px;
 }

 .meta-chip {
   display: inline-flex;
   align-items: center;
   min-height: 34px;
   padding: 6px 12px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 6px;
   background: rgba(255, 255, 255, 0.08);
   color: #ffffff;
   font-size: 14px;
   font-weight: 700;
 }

 .language-switcher {
   position: absolute;
   top: 24px;
   right: 0;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 6px 8px;
   border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.08);
 }

 .language-label {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #d8e6e2;
   font-size: 12px;
   font-weight: 800;
   white-space: nowrap;
 }

 .language-icon {
   width: 18px;
   height: 18px;
   display: block;
 }

 .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;
 }

 .language-select {
   min-height: 32px;
   padding: 4px 34px 4px 10px;
   border: 1px solid rgba(255, 255, 255, 0.24);
   border-radius: 6px;
   background: #ffffff;
   color: #263835;
   cursor: pointer;
   font: inherit;
   font-size: 13px;
   font-weight: 800;
   letter-spacing: 0;
 }

 .language-select:focus {
   outline: 2px solid #ff7780;
   outline-offset: 2px;
 }

 .band {
   border-bottom: 1px solid var(--line);
   background: var(--paper);
 }

 .band.alt {
   background: var(--bg);
 }

 .wrap {
   width: min(1120px, calc(100% - 40px));
   margin: 0 auto;
   padding: 38px 0;
 }

 .summary-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 14px;
 }

 .stat {
   min-height: 126px;
   padding: 18px;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: var(--paper);
   box-shadow: var(--shadow);
 }

 .stat strong {
   display: block;
   margin-bottom: 8px;
   font-size: 34px;
   line-height: 1;
   letter-spacing: 0;
 }

 .stat span {
   display: block;
   color: var(--muted);
   font-size: 14px;
   font-weight: 700;
 }

 .stat.total strong {
   /* color: var(--teal);*/
 }

 .stat.security strong {
   color: var(--coral);
 }

 .stat.performance strong {
   color: var(--green);
 }

 .stat.quality strong {
   color: var(--blue);
 }

 .toc {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
 }

 .toc a {
   display: inline-flex;
   align-items: center;
   min-height: 36px;
   padding: 7px 12px;
   border: 1px solid var(--line);
   border-radius: 6px;
   background: var(--paper);
   color: #34403e;
   font-size: 14px;
   font-weight: 700;
 }

 .toc a:hover {
   border-color: #e24750;
   color: #e24750;
 }

 .section {
   display: grid;
   grid-template-columns: 250px minmax(0, 1fr);
   gap: 42px;
   padding: 46px 0;
   border-bottom: 1px solid var(--line);
 }

 .section:last-child {
   border-bottom: 0;
 }

 .section-title {
   position: sticky;
   top: 18px;
   align-self: start;
 }

 h2 {
   margin: 0 0 10px;
   font-size: 24px;
   line-height: 1.25;
   letter-spacing: 0;
 }

 .section-title p {
   margin: 0;
   color: var(--muted);
   font-size: 14px;
 }

 .section-content {
   min-width: 0;
 }

 .note-list {
   display: grid;
   gap: 10px;
   margin: 0;
   padding: 0;
   list-style: none;
 }

 .note {
   display: grid;
   grid-template-columns: 108px minmax(0, 1fr);
   gap: 14px;
   align-items: start;
   padding: 14px 16px;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: var(--paper);
 }

 .badge {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   min-height: 28px;
   padding: 4px 9px;
   border-radius: 6px;
   font-size: 12px;
   font-weight: 800;
   white-space: nowrap;
 }

 .badge.feature {
   background: var(--teal-soft);
   color: var(--teal);
 }

 .badge.fix {
   background: var(--blue-soft);
   color: var(--blue);
 }

 .badge.mobile {
   background: var(--violet-soft);
   color: var(--violet);
 }

 .badge.performance {
   background: var(--amber-soft);
   color: var(--amber);
 }

 .badge.security {
   background: var(--coral-soft);
   color: var(--coral);
 }

 .badge.quality {
   background: #edf0f2;
   color: #596266;
 }

 .note p {
   margin: 1px 0 0;
   color: #283331;
   font-size: 15px;
 }

 .note p strong {
   color: var(--ink);
 }

 .callout {
   margin-top: 28px;
   padding: 20px 22px;
   border-left: 5px solid #ff7780;
   background: var(--bg);
   color: #263835;
 }

 .callout strong {
   display: block;
   margin-bottom: 6px;
 }

 .footer {
   padding: 34px 0 56px;
   color: var(--muted);
   font-size: 13px;
   text-align: center;
 }

 @media (max-width: 860px) {

   .hero-inner,
   .wrap {
     width: min(100% - 28px, 720px);
   }

   .hero-inner {
     padding: 42px 0 30px;
   }

   .language-switcher {
     /*position: static;*/
     margin-bottom: 18px;
     width: fit-content;
   }

   .summary-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .section {
     grid-template-columns: 1fr;
     gap: 18px;
     padding: 34px 0;
   }

   .section-title {
     position: static;
   }
 }

 @media (max-width: 560px) {
   body {
     font-size: 15px;
   }

   .summary-grid {
     grid-template-columns: 1fr;
   }

   .stat {
     min-height: auto;
   }

   .note {
     grid-template-columns: 1fr;
     gap: 8px;
   }

   .badge {
     width: fit-content;
   }

   .toc a {
     width: calc(50% - 4px);
     justify-content: center;
     text-align: center;
   }
 }

 @media print {
   body {
     background: #ffffff;
     color: #000000;
     font-size: 12px;
   }

   .hero {
     color: #000000;
     background: #ffffff;
     border-bottom: 2px solid #000000;
   }

   .hero-copy,
   .eyebrow,
   .section-title p,
   .footer {
     color: #000000;
   }

   .wrap,
   .hero-inner {
     width: 100%;
     padding-left: 0;
     padding-right: 0;
   }

   .toc {
     display: none;
   }

   .summary-grid,
   .section {
     display: block;
   }

   .stat,
   .note {
     box-shadow: none;
     break-inside: avoid;
     margin-bottom: 8px;
   }

   .section-title {
     position: static;
     margin-bottom: 10px;
   }

   .section {
     padding: 22px 0;
   }
 }

 .platform-tabs {
   display: grid;
   gap: 22px;
 }

 .tab-list {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
   padding: 6px;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: var(--paper);
 }

 .tab-button {
   min-height: 50px;
   border: 1px solid transparent;
   border-radius: 6px;
   background: transparent;
   color: var(--muted);
   cursor: pointer;
   font: inherit;
   font-weight: 800;
   letter-spacing: 0;
 }

 .tab-button:hover {
   color: #e24750;
 }

 .tab-button[aria-selected="true"] {
   border-color: #e24750;
   background: #fff7f7;
   color: #e24750;
   box-shadow: var(--shadow);
 }

 .tab-panel[hidden] {
   display: none;
 }

 .tab-panel {
   display: block;
 }

 .platform-heading {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   justify-content: space-between;
   gap: 12px;
   margin-bottom: 6px;
   padding-bottom: 20px;
   /*border-bottom: 1px solid var(--line);*/
 }

 .tab-panel .platform-heading {
	border-bottom: 1px solid var(--line);
 }

 .platform-heading h2 {
   margin: 0;
 }

 .platform-heading p {
   margin: 0;
   color: var(--muted);
   font-size: 14px;
   font-weight: 700;
 }

 @media (max-width: 560px) {
   .tab-list {
     /*grid-template-columns: 1fr;µð¹ÙÀ̽º ÅÇ ¼¼·Î ¹èÄ¡*/
   }
 }