/* ── APPLE ATELIER · UI 보강 ──────────────────────────────────────────────
   style.css 다음에 읽히는 "덧칠" 파일이에요. 원본은 건드리지 않았으니
   마음에 안 들면 index.html에서 이 한 줄만 지우면 원래대로 돌아갑니다. */
:root{
  --ink:#3d2b22; --ink-soft:#8a7566; --paper:#faf6ee;
  --line:rgba(120,92,70,.16); --apple:#d8402f; --leaf:#4e8055;
  --shadow-s:0 2px 8px rgba(93,63,44,.07);
  --shadow-m:0 10px 30px -12px rgba(93,63,44,.26);
  --round:18px; --ease:cubic-bezier(.22,.68,.32,1);
}
*{ -webkit-tap-highlight-color:transparent; }
body{ text-rendering:optimizeLegibility; }
.eyebrow{ letter-spacing:.20em; font-size:.63rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; }

/* 버튼: 눌리는 맛 */
.button{ border-radius:999px; font-weight:650;
  transition:transform .16s var(--ease), box-shadow .22s var(--ease), background-color .2s var(--ease); }
.button span{ transition:transform .22s var(--ease); display:inline-block; }
.button:hover span{ transform:translateX(3px); }
.button.primary{ box-shadow:var(--shadow-m); }
.button.primary:hover{ transform:translateY(-2px); }
.button:active{ transform:translateY(1px) scale(.985); box-shadow:var(--shadow-s); }
.icon-button,.quiet{ border-radius:999px;
  transition:background-color .18s var(--ease), color .18s var(--ease), transform .16s var(--ease); }
.icon-button:hover,.quiet:hover{ background:rgba(120,92,70,.09); }
.icon-button:active,.quiet:active{ transform:scale(.94); }
:focus-visible{ outline:2.5px solid var(--apple); outline-offset:3px; border-radius:8px; }
#game-canvas:focus-visible{ outline-offset:-3px; }

/* 소리 버튼이 켜졌을 때 확실히 구분되게 */
#sound[aria-pressed="true"]{ background:rgba(78,128,85,.14); color:var(--leaf); }

/* HUD */
.hud{ gap:clamp(10px,2vw,26px); border-radius:var(--round); backdrop-filter:blur(6px); }
.hud strong{ font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
@keyframes bump{ 0%{transform:scale(1)} 34%{transform:scale(1.12)} 100%{transform:scale(1)} }
.score-block.gain strong{ animation:bump .34s var(--ease); color:var(--leaf); }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.52} }
.time-block.urgent strong{ color:var(--apple); animation:pulse 1s ease-in-out infinite; }
#shape-integrity{ transition:color .3s var(--ease); }
#shape-integrity.warn{ color:#c9761f; }
#shape-integrity.bad{ color:var(--apple); }

/* 진행 바 */
.progress-track{ border-radius:999px; overflow:hidden; background:rgba(120,92,70,.13); height:9px; }
#coverage-bar{ display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#f0813f,var(--apple)); transition:width .3s var(--ease); }

/* 보드 */
.board-wrap{ border-radius:calc(var(--round) + 6px); box-shadow:var(--shadow-m); overflow:hidden; }
#game-canvas{ cursor:crosshair; touch-action:none; display:block; }
.angle-controls button{ min-width:60px; min-height:60px; border-radius:50%;
  font-size:1.45rem; backdrop-filter:blur(8px); box-shadow:var(--shadow-s);
  transition:transform .12s var(--ease), background-color .12s var(--ease); }
.angle-controls button.pressed,.angle-controls button:active{ transform:scale(.90); background:rgba(216,64,47,.16); }

/* 카드 */
.how-card,.play-aside,.pause-card{ border-radius:var(--round); border:1px solid var(--line); box-shadow:var(--shadow-s); }
.how-card{ transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.how-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-m); }
.howto-tabs button{ border-radius:999px; transition:all .18s var(--ease); }
.howto-tabs button[aria-selected="true"]{ background:var(--ink); color:var(--paper); }

/* 화면 전환 */
@keyframes rise{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
main>.screen:not([hidden]){ animation:rise .34s var(--ease) both; }
@keyframes stamp{ 0%{opacity:0;transform:rotate(-14deg) scale(1.9)}
  60%{opacity:1;transform:rotate(-7deg) scale(.94)} 100%{opacity:1;transform:rotate(-7deg) scale(1)} }
.result-copy .result-stamp{ animation:stamp .5s var(--ease) .24s both; }
.result-records dd{ font-variant-numeric:tabular-nums; }
@keyframes shine{ 0%,100%{filter:none} 50%{filter:brightness(1.35)} }
#new-best:not([hidden]){ animation:shine 1.2s ease-in-out infinite; }

/* 일시정지 */
.overlay{ backdrop-filter:blur(7px); }
.pause-card{ box-shadow:var(--shadow-m); }
@keyframes breathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }
.pause-apple{ display:inline-block; animation:breathe 2.6s ease-in-out infinite; }

/* 인트로 */
.intro-dots span{ width:6px; height:6px; border-radius:50%; background:rgba(120,92,70,.26);
  transition:background-color .3s var(--ease), transform .3s var(--ease); }
.intro-dots span.active{ background:var(--apple); transform:scale(1.45); }
.intro-frame{ border-radius:var(--round); overflow:hidden; }

/* 접근성 */
.visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; }
}
/* 좁은 화면 */
@media (max-width:760px){
  .hud{ padding:10px 12px; } .hud strong{ font-size:1.35rem; }
  .control-strip{ font-size:.72rem; }
  .button{ min-height:48px; }
}

/* ── 상단 로고 잘림 수정 ───────────────────────────────────────────────
   브랜드 글씨(APPLE ATELIER)의 윗부분이 잘려 보이던 문제. 글자 크기에
   비해 줄 높이가 좁아서 생긴 것이라, 줄 높이를 넉넉히 주고 위아래
   여백을 확보했습니다. */
.brand{
  display:flex; align-items:center; gap:12px;
  padding:6px 4px;                 /* 잘림 방지용 여유 */
  overflow:visible;
  text-decoration:none;
}
.brand img{ flex:0 0 auto; width:38px; height:38px; }
.brand>span{
  display:flex; flex-direction:column; justify-content:center;
  line-height:1.34;                /* 핵심: 여기가 좁아서 잘렸어요 */
  overflow:visible;
  padding-top:2px;
}
.brand>span small{
  display:block; line-height:1.5; font-weight:400;
  letter-spacing:0; margin-top:2px; opacity:.72;
}
.topbar{ overflow:visible; align-items:center; }

/* ── 결과 도장 ────────────────────────────────────────────────────────
   원래 style.css 에서 도장은 사과 그림 위에 절대배치(position:absolute)
   되어 있었어요. 그걸 제목 옆으로 옮기면서, 남아 있던 절대배치 규칙
   때문에 도장이 맨 아래로 밀리고 레이아웃이 3분할처럼 보였습니다.
   아래에서 그 규칙들을 확실히 되돌립니다.

   settings.js 의 stampImage 에 그림 경로를 넣으면 글씨 대신 그림이
   나옵니다.                                                          */

/* 제목 + 도장을 한 줄로 */
.result-copy .result-headline{
  display:flex !important;
  align-items:center;
  gap:14px;
  flex-wrap:nowrap;
  margin:0 0 6px;
  width:100%;
}
.result-copy .result-headline h1{
  margin:0;
  flex:0 1 auto;                  /* 제목 길이만큼만 차지 → 도장이 바로 옆에 붙음 */
  min-width:0;                    /* 긴 제목이 도장을 밀어내지 않게 */
}

/* 절대배치·그리드 잔재를 모두 해제 */
.result-copy .result-stamp{
  position:static !important;
  inset:auto !important;
  top:auto !important; right:auto !important;
  bottom:auto !important; left:auto !important;
  margin:0 !important;
  grid-area:auto !important;
  align-self:center !important;
  order:2;
  flex:0 0 auto;

  display:inline-flex;
  align-items:center; justify-content:center;
  width:66px; height:66px; padding:6px;
  box-sizing:border-box;
  border:2px solid var(--apple); border-radius:50%;
  color:var(--apple); background:rgba(216,64,47,.07);
  font-size:.70rem; font-weight:800; line-height:1.22;
  text-align:center; letter-spacing:-.02em;
  word-break:keep-all;            /* 한글이 어색하게 안 끊기도록 */
  transform:rotate(-7deg);
  box-shadow:0 2px 10px -4px rgba(216,64,47,.45);
}

/* 그림 도장일 때는 테두리와 배경 없이 그림만 */
.result-copy .result-stamp.has-image{
  border:none; background:none; box-shadow:none;
  padding:0; width:auto; height:auto;
}
.result-copy .result-stamp.has-image img{
  display:block; width:74px; height:74px; object-fit:contain;
}

@media (max-width:760px){
  .result-copy .result-stamp{ width:56px; height:56px; font-size:.62rem; }
  .result-copy .result-stamp.has-image img{ width:58px; height:58px; }
}

/* 좁은 화면에서는 결과 글이 가운데 정렬이라 제목+도장 묶음도 가운데로 */
@media (max-width:720px){
  .result-copy .result-headline{ justify-content:center; }
}