/* ========================
components/notice-box.css
ver.1.0  2026.04.xx
========================= */

/* ---------------------------------
   Notice Box: base
--------------------------------- */
.notice-box,
.tea-notice-link{
  --nb-accent: #c8b69c;
  --nb-bg: #f9f8f6;
  --nb-text: #444;
  --nb-border: 4px;

  margin: 2em auto;
  padding: 1.2em 1.4em;
  box-sizing: border-box;

  max-width: 720px;
  border-left: var(--nb-border) solid var(--nb-accent);
  border-radius: 8px;
  background-color: var(--nb-bg);
  color: var(--nb-text);

  font-size: 0.95em;
  line-height: 1.7;
}

/* 中の段落 */
.notice-box > *:first-child,
.tea-notice-link > *:first-child{
  margin-top: 0;
}

.notice-box > *:last-child,
.tea-notice-link > *:last-child{
  margin-bottom: 0;
}

/* 中のリンク */
.notice-box a,
.tea-notice-link a{
  color: var(--tea-accent, #8a4b2a);
  text-decoration-thickness: .08em;
  text-underline-offset: .15em;
}

.notice-box a:hover,
.tea-notice-link a:hover{
  text-decoration: underline;
}

/* フォーカス可視化 */
.notice-box :is(a,button,input,textarea):focus-visible,
.tea-notice-link :is(a,button,input,textarea):focus-visible{
  outline: 2px solid var(--tea-accent, #8a4b2a);
  outline-offset: 2px;
}

/* ---------------------------------
   Alignment
--------------------------------- */
.notice-box--center,
.tea-notice-link{
  text-align: center;
}

.notice-box--left{
  text-align: left;
}

/* ---------------------------------
   Variations
--------------------------------- */
.notice-box--compact{
  padding: 1em 1.1em;
  font-size: 0.92em;
}

.notice-box--warm{
  --nb-accent: #c8b69c;
  --nb-bg: #f9f8f6;
  --nb-text: #444;
}

.notice-box--note{
  --nb-accent: #b9a27a;
  --nb-bg: #fbfaf7;
  --nb-text: #444;
}

.notice-box--alert{
  --nb-accent: #b85c38;
  --nb-bg: #fdf6f3;
  --nb-text: #4a342c;
}

/* ---------------------------------
   Responsive
--------------------------------- */
@media (max-width: 640px){
  .notice-box,
  .tea-notice-link{
    margin: 1.5em 0;
    padding: 1em 1.05em;
    max-width: 100%;
  }
}

/* ---------------------------------
   Dark mode
--------------------------------- */
@media (prefers-color-scheme: dark){
  .notice-box,
  .tea-notice-link{
    --nb-bg: #1f1b18;
    --nb-text: #e7dfd7;
    --nb-accent: #b89c7a;
  }
}

/* ---------------------------------
   Reduced motion / Print
--------------------------------- */
@media print{
  .notice-box,
  .tea-notice-link{
    background: #fff;
    color: #000;
  }
}