:root {
  --tteurang-green: #279a82;
  --tteurang-deep: #073f31;
  --tteurang-red: #e81820;
  --tteurang-paper: #f4f7f3;
  --tteurang-ink: #1d2925;
  --tteurang-brass: #c6a34b;
}

body[data-tteurang-project='true'] .tteurang-scene {
  background: #fff;
  color: var(--tteurang-ink);
  overflow: hidden;
  position: relative;
}

body[data-tteurang-project='true'] .tteurang-scene img { display: block; }

.tteurang-scene-head {
  display: flex;
  justify-content: space-between;
  left: clamp(22px, 4.1vw, 70px);
  position: absolute;
  right: clamp(22px, 4.1vw, 70px);
  top: clamp(20px, 3.7vw, 62px);
  z-index: 6;
}

.tteurang-scene-head span,
.tteurang-hero-copy span,
.tteurang-direction-grid article > span,
.tteurang-dual-panel > span,
.tteurang-table figcaption span,
.tteurang-signature > span {
  font-size: clamp(9px, .75vw, 13px);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tteurang-scene-head strong {
  font-size: clamp(18px, 2vw, 36px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1.08;
  text-align: right;
}

.tteurang-hero { background: var(--tteurang-deep) !important; color: #fff !important; display: grid; grid-template-columns: 46% 54%; }
.tteurang-hero-field { height: 100%; position: relative; z-index: 2; }
.tteurang-hero-photo { height: 100%; object-fit: cover; object-position: center; width: 100%; }
.tteurang-hero-copy { left: 11%; position: absolute; top: 17%; width: 82%; z-index: 6; }
.tteurang-hero-copy span { color: rgba(255,255,255,.7); }
.tteurang-hero-copy strong { display: block; font-size: clamp(28px, 3.7vw, 64px); font-weight: 400; letter-spacing: -.055em; line-height: 1.03; margin-top: 24px; }
.tteurang-sequence { align-items: center; bottom: 9%; display: flex; gap: 10px; left: 11%; position: absolute; z-index: 6; }
.tteurang-sequence span { font-size: clamp(8px, .67vw, 11px); letter-spacing: .13em; }
.tteurang-sequence i { background: rgba(255,255,255,.55); height: 1px; width: 28px; }
.tteurang-motion-stage { height: 74%; position: absolute; right: 5%; top: 13%; width: 58%; z-index: 3; }
.tteurang-motion-stage .tteurang-table-ring { animation: tteurangRing 10s cubic-bezier(.18,.75,.2,1) 1 both; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; height: 48%; left: 53%; opacity: 0; position: absolute; top: 50%; transform: translate(-50%,-50%) scale(.55); width: 34%; }
.tteurang-motion-stage .tteurang-cut { animation: tteurangCut 10s cubic-bezier(.18,.75,.2,1) 1 both; border: 1px solid rgba(255,255,255,.9); height: 13%; left: 53%; opacity: 0; position: absolute; top: 50%; transform: translate(calc(-50% + var(--start-x)), calc(-50% + var(--start-y))) rotate(var(--start-r)); width: 22%; }
.tteurang-motion-stage .tteurang-cut::before { background: currentColor; content: ''; height: 3px; left: 9%; opacity: .9; position: absolute; top: 18%; width: 32%; }
.tteurang-motion-stage .tteurang-cut::after { border: 1px solid currentColor; border-radius: 50%; bottom: 14%; content: ''; height: 18px; position: absolute; right: 9%; width: 18px; }
.tteurang-motion-stage .cut-a { --start-r: -7deg; --start-x: -148%; --start-y: -122%; color: var(--tteurang-green); }
.tteurang-motion-stage .cut-b { --start-r: 5deg; --start-x: 102%; --start-y: -110%; color: var(--tteurang-red); }
.tteurang-motion-stage .cut-c { --start-r: -3deg; --start-x: 112%; --start-y: 100%; color: #f2ead7; }
.tteurang-motion-stage img { animation: tteurangLogo 10s cubic-bezier(.16,.76,.22,1) 1 both; filter: drop-shadow(0 18px 35px rgba(0,0,0,.28)); height: 39%; left: 53%; object-fit: contain; opacity: 0; position: absolute; top: 50%; transform: translate(-50%,-50%) scale(.72); width: 31%; }

.tteurang-directions { column-gap: clamp(18px, 2.6vw, 38px); display: grid; grid-template-columns: minmax(190px, .7fr) minmax(0, 2fr); padding: clamp(20px, 3.7vw, 64px); }
.tteurang-directions .tteurang-scene-head { display: block; left: 0; min-width: 0; position: relative; right: 0; top: 0; }
.tteurang-directions .tteurang-scene-head strong { display: block; margin-top: clamp(16px, 2vw, 28px); max-width: 9.2em; overflow-wrap: keep-all; text-align: left; }
.tteurang-direction-grid { display: grid; gap: clamp(10px, 1.4vw, 22px); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(28px, 4.5vw, 70px); min-width: 0; }
.tteurang-direction-grid article { border-top: 1px solid rgba(29,41,37,.22); min-width: 0; padding-top: clamp(9px, 1vw, 16px); position: relative; }
.tteurang-direction-grid article.selected::after { background: var(--tteurang-green); content: ''; height: 4px; left: 0; position: absolute; right: 0; top: -2px; }
.tteurang-direction-grid img { background: #fff; height: clamp(150px, 19vw, 300px); margin-bottom: clamp(8px, 1vw, 15px); object-fit: contain; width: 100%; }
.tteurang-direction-grid article > span { color: var(--tteurang-green); display: block; padding-top: .35em; }
.tteurang-direction-grid h3 { font-size: clamp(15px, 1.45vw, 25px); font-weight: 400; letter-spacing: -.04em; line-height: 1.08; margin: 7px 0 0; overflow-wrap: keep-all; }

.tteurang-mark { background: var(--tteurang-paper) !important; }
.tteurang-mark-stage { height: 72%; left: 50%; position: absolute; top: 64%; transform: translate(-50%,-50%); width: 82%; }
.tteurang-mark-stage img { height: 100%; object-fit: contain; width: 100%; }
.tteurang-mark-stage .note { color: var(--tteurang-green); font-size: clamp(7px, .68vw, 11px); letter-spacing: .13em; position: absolute; }
.tteurang-mark-stage .note::before { background: currentColor; content: ''; height: 1px; position: absolute; width: 60px; }
.tteurang-mark-stage .face { left: 5%; top: 51%; }
.tteurang-mark-stage .face::before { right: -67px; top: .55em; }
.tteurang-mark-stage .circle { right: 4%; top: 29%; }
.tteurang-mark-stage .circle::before { left: -67px; top: .55em; }
.tteurang-mark-stage .pattern { bottom: 14%; right: 2%; }
.tteurang-mark-stage .pattern::before { left: -67px; top: .55em; }

.tteurang-dual { display: grid; grid-template-columns: 1fr 1fr; }
.tteurang-dual-panel { color: #fff; display: flex; flex-direction: column; padding: clamp(24px, 4vw, 66px); }
.tteurang-dual-panel.green { background: var(--tteurang-deep); }
.tteurang-dual-panel.red { background: var(--tteurang-red); }
.tteurang-dual-panel img { height: 39%; margin: auto 0; object-fit: contain; width: 82%; }
.tteurang-dual-panel strong { font-size: clamp(20px, 2.8vw, 48px); font-weight: 400; letter-spacing: -.045em; line-height: 1.05; }

.tteurang-app-board { background: #fff !important; }
.tteurang-app-board > img { bottom: 3%; height: 77%; left: 2%; object-fit: contain; position: absolute; width: 96%; }

.tteurang-space { background: var(--tteurang-ink) !important; display: grid; gap: 2px; grid-template-columns: 1.25fr .75fr; grid-template-rows: 1fr 1fr; }
.tteurang-space figure { margin: 0; min-height: 0; overflow: hidden; position: relative; }
.tteurang-space .facade { grid-row: 1 / -1; }
.tteurang-space img { height: 100%; object-fit: cover; width: 100%; }
.tteurang-space figcaption { background: #fff; bottom: 13px; color: var(--tteurang-ink); font-size: clamp(7px, .65vw, 10px); left: 13px; letter-spacing: .12em; padding: 8px 10px; position: absolute; }

.tteurang-table { background: #fff !important; display: grid; gap: 2px; grid-template-columns: 1fr 1fr; }
.tteurang-table figure { margin: 0; min-height: 0; overflow: hidden; position: relative; }
.tteurang-table img { height: 100%; object-fit: cover; width: 100%; }
.tteurang-table figcaption { background: rgba(255,255,255,.94); bottom: 0; left: 0; padding: clamp(14px, 2.2vw, 36px); position: absolute; width: min(72%, 430px); }
.tteurang-table figcaption span { color: var(--tteurang-green); }
.tteurang-table figcaption strong { display: block; font-size: clamp(16px, 2.1vw, 34px); font-weight: 400; letter-spacing: -.04em; line-height: 1.06; margin-top: 10px; }

.tteurang-signature { align-items: center; background: var(--tteurang-deep) !important; color: #fff !important; display: flex; flex-direction: column; justify-content: center; }
.tteurang-signature > span { margin-bottom: 3%; }
.tteurang-signature > img { max-height: 36%; max-width: 62%; object-fit: contain; }
.tteurang-signature > strong { font-size: clamp(18px, 2.5vw, 42px); font-weight: 400; letter-spacing: .04em; margin-top: 4%; }
.tteurang-signature > p { bottom: 7%; font-size: clamp(9px, .8vw, 13px); letter-spacing: .16em; position: absolute; }

body[data-tteurang-project='true'] .case__study__info__left { display: grid; gap: var(--pd2); grid-column: 1 / 2; grid-template-columns: 1fr 1fr; }
body[data-tteurang-project='true'] .case__study__info__project__information { grid-column: 1 / -1; }
body[data-tteurang-project='true'] .case__study__info__right { display: flex; flex-flow: column; grid-column: 2 / -1; row-gap: var(--pd2); }
body[data-tteurang-project='true'] .case__study__info h2 { color: var(--color-gray50); margin-bottom: 8px; }
body[data-tteurang-project='true'] .case__study__info h2:not(:first-child) { margin-top: 32px; }
body[data-tteurang-project='true'] .case__study__info p:not(:last-child) { margin-bottom: 12px; }

@keyframes tteurangCut {
  0%, 5.76% { opacity: 0; transform: translate(calc(-50% + var(--start-x)), calc(-50% + var(--start-y))) rotate(var(--start-r)) scale(.88); }
  14.4% { opacity: 1; }
  30.96%, 39.6% { opacity: 1; transform: translate(-50%,-50%) rotate(0) scale(.68); }
  44.64%, 100% { opacity: 0; transform: translate(-50%,-50%) rotate(0) scale(.55); }
}

@keyframes tteurangRing {
  0%, 24.48% { opacity: 0; transform: translate(-50%,-50%) scale(.55); }
  34.56%, 56.16% { opacity: .78; transform: translate(-50%,-50%) scale(1); }
  66.24%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.06); }
}

@keyframes tteurangLogo {
  0%, 43.92% { opacity: 0; transform: translate(-50%,-50%) scale(.72); }
  50.4%, 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

@media (max-width: 1024px) {
  body[data-tteurang-project='true'] .case__study__info__left,
  body[data-tteurang-project='true'] .case__study__info__right { grid-column: 1 / -1; }
  body[data-tteurang-project='true'] .tteurang-directions,
  body[data-tteurang-project='true'] .tteurang-mark,
  body[data-tteurang-project='true'] .tteurang-app-board,
  body[data-tteurang-project='true'] .tteurang-space { aspect-ratio: auto !important; }
  .tteurang-directions { display: block; min-height: 410px; }
  .tteurang-directions .tteurang-scene-head strong { max-width: 12em; }
  .tteurang-direction-grid { margin-top: 32px; }
  .tteurang-direction-grid img { height: 190px; }
  .tteurang-mark { min-height: 420px; }
  .tteurang-mark-stage { height: 64%; top: 65%; width: 92%; }
  .tteurang-app-board { min-height: 480px; }
  .tteurang-space { min-height: 570px; }
}

@media (max-width: 656px) {
  body[data-tteurang-project='true'] .tteurang-directions,
  body[data-tteurang-project='true'] .tteurang-mark,
  body[data-tteurang-project='true'] .tteurang-dual,
  body[data-tteurang-project='true'] .tteurang-app-board,
  body[data-tteurang-project='true'] .tteurang-space,
  body[data-tteurang-project='true'] .tteurang-table,
  body[data-tteurang-project='true'] .tteurang-signature { aspect-ratio: auto !important; }
  .tteurang-hero { grid-template-columns: 57% 43%; }
  .tteurang-hero-copy { left: 8%; top: 12%; width: 88%; }
  .tteurang-hero-copy strong { font-size: 25px; margin-top: 13px; }
  .tteurang-sequence { bottom: 7%; left: 8%; gap: 7px; }
  .tteurang-sequence i { width: 13px; }
  .tteurang-motion-stage { height: 60%; right: 1%; top: 27%; width: 60%; }
  .tteurang-motion-stage .tteurang-table-ring { height: 43%; width: 47%; }
  .tteurang-motion-stage img { height: 34%; width: 42%; }
  .tteurang-motion-stage .tteurang-cut { width: 29%; }
  .tteurang-directions { min-height: 390px; }
  .tteurang-directions .tteurang-scene-head { display: block; }
  .tteurang-directions .tteurang-scene-head strong { font-size: 22px; margin-top: 16px; max-width: none; text-align: left; }
  .tteurang-direction-grid { gap: 8px; margin-top: 24px; }
  .tteurang-direction-grid img { height: 128px; }
  .tteurang-direction-grid article > span { font-size: 6px; }
  .tteurang-direction-grid h3 { font-size: 11px; }
  .tteurang-scene-head strong { max-width: 62%; }
  .tteurang-mark { min-height: 390px; }
  .tteurang-mark-stage { height: 62%; width: 96%; }
  .tteurang-mark-stage .note { display: none; }
  .tteurang-dual { min-height: 360px; }
  .tteurang-dual-panel { padding: 20px 14px; }
  .tteurang-dual-panel img { height: 30%; width: 100%; }
  .tteurang-dual-panel strong { font-size: 18px; }
  .tteurang-app-board { min-height: 430px; }
  .tteurang-app-board > img { bottom: 2%; height: 76%; }
  .tteurang-space { min-height: 480px; }
  .tteurang-space figcaption { font-size: 6px; }
  .tteurang-table { min-height: 390px; }
  .tteurang-table figcaption { padding: 12px; width: 82%; }
  .tteurang-table figcaption strong { font-size: 14px; }
  .tteurang-signature { min-height: 390px; }
  .tteurang-signature > img { max-width: 78%; }
  .tteurang-signature > strong { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .tteurang-motion-stage * { animation: none !important; }
  .tteurang-motion-stage .tteurang-cut { display: none; }
  .tteurang-motion-stage .tteurang-table-ring { opacity: .75; transform: translate(-50%,-50%) scale(1); }
  .tteurang-motion-stage img { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

/* === 그림 자리 예약 (CLS) — 자동 생성. 없으면 지연 로딩 때 아래가 밀린다 === */
img[src$="/tteurang-case-assets/table-setting.jpg"],
img[src$="/tteurang-case-assets/warm-place-wall.jpg"],
img[src$="/tteurang-case-assets/meat-labels.jpg"] { aspect-ratio: 550/367; }
img[src$="/tteurang-case-assets/tteurang-symbol-exact.png"],
img[src$="/tteurang-case-assets/tteurang-symbol-white.png"] { aspect-ratio: 1/1; }
img[src$="/tteurang-case-assets/direction-natural-r2.jpg"],
img[src$="/tteurang-case-assets/direction-direct-r2.jpg"] { aspect-ratio: 944/667; }
img[src$="/tteurang-case-assets/direction-alternates.jpg"] { aspect-ratio: 99/70; }
img[src$="/tteurang-case-assets/tteurang-signature-white.png"] { aspect-ratio: 5/2; }
img[src$="/tteurang-case-assets/tteurang-butcher-white.png"] { aspect-ratio: 113/46; }
img[src$="/tteurang-case-assets/final-applications-board.png"] { aspect-ratio: 1754/1241; }
img[src$="/tteurang-case-assets/tteurang-symbol-exact-r2.png"] { aspect-ratio: 1/1; }
img[src$="/tteurang-case-assets/tteurang-butcher-white-r2.png"] { aspect-ratio: 1536/628; }
img[src$="/tteurang-case-assets/final-applications-board-r2.png"] { aspect-ratio: 4105/2902; }
img[src$="/tteurang-case-assets/restaurant-facade.jpg"] { aspect-ratio: 2200/1451; }
img[src$="/tteurang-case-assets/restaurant-dining.jpg"] { aspect-ratio: 1100/727; }