@charset "UTF-8";

/* TASK05: keep every rule local to the approved problems section. */
#problems {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: 32px;
  color: #071c3a;
  background: #fcfeff;
}
#problems .problems-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
#problems > .container { width: min(1280px, calc(100% - 40px)); }
#problems h2 { font-size: clamp(36px, 4.167vw, 60px); font-weight: 900; line-height: 1.24; letter-spacing: -.045em; text-align: center; overflow-wrap: normal; }
#problems .problem-title-line { display: block; }
#problems .problem-title-tail { font-size: .86em; display: inline-block; }
#problems h2 mark { display: inline-block; position: relative; isolation: isolate; padding: 0 .015em; background: none; color: #0877f9; font-size: 1.12em; }
#problems h2 mark::before { content: ""; position: absolute; inset: 72% 0 4%; background: #ffdc27; z-index: -1; }

#problems .problem-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
#problems .problem-group { min-width: 0; padding: 16px; border-radius: 24px; background: #e5f5ff; }
#problems .problem-excel { background: #fff9df; }
#problems .problem-label { display: inline-flex; align-items: center; gap: 16px; max-width: 100%; margin: 0; padding: 12px 20px; border: 1px solid #3395ff; border-radius: 999px; color: white; background: #0879ff; font-size: clamp(19px, 1.667vw, 24px); font-weight: 700; line-height: 1.3; letter-spacing: -.025em; }
#problems .problem-label svg { width: 32px; height: 34px; flex: 0 0 auto; fill: currentColor; stroke: currentColor; stroke-width: 1.5; }
#problems .problem-label-part { display: inline-block; }
#problems .problem-system .problem-label svg path { fill: none; stroke-width: 2; }
#problems .problem-excel .problem-label { color: #071c3a; background: #ffda1d; border-color: #ffe56a; }
#problems .problem-label .problem-sheet-lines { fill: none; stroke: #ffda1d; stroke-width: 2; }

#problems .problem-summary { position: relative; display: flex; align-items: center; min-height: 150px; padding: 20px; background: linear-gradient(#fff 48%, rgba(255,255,255,.45)); border-radius: 18px 18px 0 0; }
#problems .problem-message { position: relative; z-index: 1; width: 61%; font-size: clamp(24px, 2.222vw, 32px); line-height: 1.5; font-weight: 700; letter-spacing: -.05em; }
#problems .problem-hero-art { position: absolute; right: 8px; bottom: 0; width: 40%; max-width: 240px; height: auto; }
#problems .problem-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
#problems .problem-list li { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; min-height: 174px; padding: 10px 10px 14px; background: #fff; border-radius: 17px; }
#problems .problem-list li::before { content: none; }
#problems .problem-card-art { height: 96px; display: flex; align-items: center; justify-content: center; }
#problems .problem-card-art img { width: auto; height: auto; max-width: 100%; max-height: 96px; }
#problems .problem-card-text { color: #071c3a; font-size: clamp(15px, 1.25vw, 18px); font-weight: 700; line-height: 1.55; letter-spacing: -.035em; text-align: center; }

@media (max-width: 1100px) and (min-width: 901px) {
  #problems .problem-group { padding: 12px; }
  #problems .problem-label { gap: 10px; padding-inline: 14px; font-size: 18px; }
  #problems .problem-label svg { width: 26px; height: 30px; }
  #problems .problem-summary { min-height: 142px; padding: 18px 12px; }
  #problems .problem-message { font-size: 23px; }
  #problems .problem-card-text { font-size: 14px; }
  #problems .problem-list li { padding-inline: 7px; }
}

@media (max-width: 900px) {
  #problems { padding-block: 44px; }
  #problems > .container { width: min(680px, calc(100% - 40px)); }
  #problems .problem-groups { grid-template-columns: 1fr; gap: 24px; margin-top: 28px; }
  #problems .problem-label { font-size: 23px; }
  #problems .problem-summary { display: flex; flex-direction: column; min-height: 0; gap: 12px; padding: 22px 20px 10px; }
  #problems .problem-message { width: 100%; font-size: 28px; line-height: 1.5; letter-spacing: -.035em; }
  #problems .problem-hero-art { position: static; width: 210px; max-width: 80%; height: auto; align-self: center; }
  #problems .problem-list { grid-template-columns: 1fr; gap: 10px; }
  #problems .problem-list li { display: grid; grid-template-columns: 88px minmax(0,1fr); align-items: center; gap: 18px; min-height: 86px; padding: 10px 20px; border-radius: 13px; }
  #problems .problem-card-art { height: 66px; }
  #problems .problem-card-art img { max-height: 66px; }
  #problems .problem-card-text { font-size: 18px; text-align: left; letter-spacing: -.02em; }
}

@media (max-width: 600px) {
  #problems { padding-block: 36px; }
  #problems h2 { font-size: clamp(25px, 7.2vw, 30px); line-height: 1.5; letter-spacing: -.035em; }
  #problems .problem-title-tail { font-size: .82em; }
  #problems h2 mark { font-size: 1.05em; }
  #problems .problem-groups { margin-top: 24px; gap: 22px; }
  #problems .problem-group { padding: 12px; border-radius: 18px; }
  #problems .problem-label { gap: 8px; padding: 10px 12px; font-size: 16px; line-height: 1.5; border-radius: 16px; letter-spacing: -.02em; }
  #problems .problem-label svg { width: 24px; height: 28px; }
  #problems .problem-summary { padding: 20px 12px 10px; gap: 10px; border-radius: 13px 13px 0 0; }
  #problems .problem-message { font-size: clamp(21px, 6.15vw, 24px); letter-spacing: -.05em; }
  #problems .problem-hero-art { width: 200px; }
  #problems .problem-list li { grid-template-columns: 72px minmax(0,1fr); gap: 12px; min-height: 84px; padding: 9px 10px; }
  #problems .problem-card-art { height: 64px; }
  #problems .problem-card-art img { max-height: 64px; }
  #problems .problem-card-text { font-size: 14px; line-height: 1.65; letter-spacing: -.025em; }
}