@layer components {
  .notation-guide { --notation-color: #995029; --notation-light: #fff5eb; }
  .notation-hero { position: relative; overflow: hidden; padding: 32px 0; background: linear-gradient(125deg,#fff8ef,#f4f0ea 70%,#edf3f7); border-bottom: 1px solid #e5ddd3; }
  .notation-hero::after { content: ''; position: absolute; width: 250px; height: 250px; right: -90px; top: -110px; border: 40px solid #ad5d3009; border-radius: 50%; pointer-events: none; }
  .notation-heading { display: flex; gap: 20px; align-items: center; margin-top: 24px; }
  .notation-symbol { display: grid; place-items: center; min-width: 80px; height: 80px; padding: 12px; border-radius: 22px; background: linear-gradient(140deg,#b76a3d,#814122); color: white; font-size: 30px; font-weight: 850; box-shadow: 0 8px 22px #99502924; }
  .notation-eyebrow { color: #995029; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
  .notation-heading h1 { margin: 7px 0 0; font-size: clamp(25px,3vw,36px); font-weight: 850; line-height: 1.2; letter-spacing: -.03em; color: #182940; }
  .notation-lead { margin: 22px 0 0; max-width: 760px; font-size: 16px; line-height: 1.85; color: #4a596b; }
  .notation-content { padding-top: 28px; padding-bottom: 36px; }
  .notation-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
  .notation-toc a { padding: 9px 14px; border: 1px solid #e5ddd3; background: white; color: #814122; border-radius: 100px; font-size: 12px; font-weight: 700; text-decoration: none; transition: background .2s,border-color .2s; }
  .notation-toc a:hover { background: #fff1e2; border-color: #c18b69; }
  .notation-panel { margin-bottom: 22px; padding: clamp(20px,4vw,32px); background: white; border: 1px solid #e2e6ec; border-radius: 20px; box-shadow: 0 5px 22px #15264004; scroll-margin-top: 100px; }
  .notation-panel h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; color: #182940; font-size: 23px; line-height: 1.35; font-weight: 800; letter-spacing: -.02em; }
  .notation-number { display: inline-grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 9px; background: #fff1e4; color: #995029; font-size: 12px; letter-spacing: 0; }
  .notation-panel p,.notation-panel li { color: #4a596b; font-size: 15px; line-height: 1.9; }
  .notation-panel p + p { margin-top: 14px; }
  .notation-callout { padding: 18px 20px; margin-top: 20px; border-left: 4px solid #b76a3d; border-radius: 0 12px 12px 0; background: #fff5eb; color: #744223; font-size: 14px; line-height: 1.8; }
  .notation-table-wrap { overflow-x: auto; border: 1px solid #e2e6ec; border-radius: 13px; margin: 20px 0; }
  .notation-table { border-collapse: collapse; width: 100%; min-width: 510px; font-size: 13px; text-align: left; }
  .notation-table caption { text-align: left; padding: 14px 16px; background: #faf8f5; font-weight: 700; color: #744223; }
  .notation-table th { padding: 12px 16px; background: #f2f5f8; color: #35465d; font-weight: 700; }
  .notation-table td { padding: 14px 16px; color: #4a596b; border-top: 1px solid #e9edf2; line-height: 1.65; }
  .notation-table tbody tr:hover { background: #fffaf5; }
  .notation-result { display: inline-block; padding: 3px 8px; border-radius: 6px; font-weight: 750; white-space: nowrap; }
  .notation-win { background: #eaf7ee; color: #21683a; }.notation-loss { background: #fff0ef; color: #a63d38; }.notation-refund { background: #edf3fc; color: #325e9a; }
  .notation-formula { padding: 20px; border-radius: 14px; background: #142840; color: #fff; font-weight: 750; font-size: 17px; line-height: 1.7; margin-bottom: 18px; }
  .notation-list { margin: 0; padding-left: 21px; }.notation-list li + li { margin-top: 12px; }
  .notation-faq details { border-top: 1px solid #e7ebef; padding: 16px 0; }.notation-faq details:last-child { padding-bottom: 0; }.notation-faq summary { cursor: pointer; font-size: 15px; font-weight: 750; color: #263a52; line-height: 1.6; }.notation-faq details p { margin-top: 12px; font-size: 14px; }
  .notation-bottom { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }.notation-bottom a { padding: 11px 18px; border-radius: 10px; color: #814122; background: #fff1e4; font-size: 13px; font-weight: 750; text-decoration: none; }.notation-bottom a:hover { background: #f7e3cf; }
  .notation-footnote { color: #738092; font-size: 12px; line-height: 1.8; }.notation-footnote a,.notation-panel p a { color: #995029; text-decoration: underline; text-underline-offset: 3px; }
  .notation-toc a:focus-visible,.notation-bottom a:focus-visible,.notation-faq summary:focus-visible { outline: 2px solid #995029; outline-offset: 4px; }
  @media(max-width: 600px) { .notation-hero { padding: 22px 0; }.notation-symbol { min-width: 62px; height: 62px; border-radius: 16px; font-size: 24px; }.notation-heading { gap: 14px; align-items: flex-start; }.notation-panel h2 { font-size: 20px; }.notation-lead { font-size: 14px; }.notation-panel p,.notation-panel li { font-size: 14px; } }
  @media(prefers-reduced-motion: reduce) { .notation-toc a { transition: none; } }
}