/* 이모 수첩과 게임 요소(10/29, 대표님 "좀더 게임 같은 방향으로 작업해봐. 이모수첩은 내가 수정할수 있어도 좋겠네. 좀더 수첩같아도 좋겠고",
   "ui 드롭다운 저런거 구리지 않게 잘해줘"): 위쪽 스프링으로 묶인 주문 수첩. 손글씨(나눔손글씨 펜), 줄 친 종이, 색 붙임 쪽지 탭.
   탭: 나, 이야기, 지난 밤, 단골(도감과 친한 정도), 장소(도감), 도장(열 개면 떡볶이 한 접시) */
.nb { --paper: #fdf7e9; --ink: #283453; --pencil: #8c7a66; --lh: 34px;
  position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(12,8,24,.55); opacity: 0; pointer-events: none; transition: opacity .25s; }
.nb.on { opacity: 1; pointer-events: auto; }
.nb { z-index: 70; } .nlist { z-index: 75; }
.nb-pad { position: relative; margin: 0 10px; height: calc(100% - 46px); max-height: 760px; display: flex; flex-direction: column; transform: translateY(40px) rotate(.4deg); transition: transform .35s cubic-bezier(.2,.9,.3,1.15); }
.nb.on .nb-pad { transform: none; }
/* 수첩 꾸밈은 그림 모델로 그린 그림(10/30, 대표님 "이모수첩에 니가 그린것들있지? 그런거 니가 그리지말고 이미지 만드는거 사용해서 만들어"):
   visual/ui/nb/ 스프링과 판지(rings, board 한 그림에서), 줄 종이와 여백 줄(paper), 펠트 탭 여섯(tab-*), 바느질 카드(card, 9조각), 쪽지와 테이프(slip, tape),
   도장 칸 눌린 자국(slot), 선물 칸 펠트 받침(gift), 풀림 도장(solved). nano-banana-pro로 그리고 이음매 없는 타일과 9조각으로 손질(scratchpad nb/process.py) */
/* 판지 뒷면(종이 아래로 살짝 보임): 스프링 그림과 같은 판지에서 뜬 타일 */
.nb-pad::before { content: ""; position: absolute; inset: 17px -4px -2px -4px; background: url(../visual/ui/nb/board.webp) 0 0 / 113px 45.5px; box-shadow: 0 -6px 26px rgba(0,0,0,.45); }
/* 스프링: 고리와 판지 윗단(구멍 포함) 한 칸을 가로로 반복, 판지 윗선이 위에서 15.6px */
.nb-rings { position: relative; z-index: 1; height: 43.5px; margin: 0 -4px -6px; background: url(../visual/ui/nb/rings.webp) 0 0 / 20px 43.5px round no-repeat; pointer-events: none; }
/* 펠트 탭 */
.nb-tabs { position: relative; z-index: 2; display: flex; gap: 4px; padding: 4px 12px 0; margin-bottom: -2px; }
.nb-tabs button { flex: 1; min-width: 0; height: 34px; border: 0; border-radius: 0; font-family: "Jua", sans-serif; font-size: 14px; color: #5b4a3a; background: center / 100% 100% no-repeat; filter: brightness(.95) saturate(.8); transform: translateY(6px); transition: transform .18s, filter .18s; cursor: pointer; position: relative; padding: 2px 2px 0; white-space: nowrap; }
.nb-tabs button.on { filter: none; transform: none; }
.nb-tabs button[data-tab="me"] { background-image: url(../visual/ui/nb/tab-me.webp); }
.nb-tabs button[data-tab="th"] { background-image: url(../visual/ui/nb/tab-th.webp); }
.nb-tabs button[data-tab="nt"] { background-image: url(../visual/ui/nb/tab-nt.webp); }
.nb-tabs button[data-tab="doc"] { background-image: url(../visual/ui/nb/tab-doc.webp); }
.nb-tabs button[data-tab="pl"] { background-image: url(../visual/ui/nb/tab-pl.webp); }
.nb-tabs button[data-tab="st"] { background-image: url(../visual/ui/nb/tab-st.webp); }
.nb-tabs button b.ndot { position: absolute; top: 5px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #ff5a3c; box-shadow: 0 0 0 2px var(--tc); }
/* 종이: 줄과 빨간 여백 줄까지 그림 타일(2배 1024×544, 줄 간격 34px, 여백 줄은 왼쪽 38px) */
.nb-page { position: relative; z-index: 1; flex: 1; min-height: 0; background: var(--paper); border-radius: 4px 4px 0 0; box-shadow: 0 1px 0 #e9dfcd, 0 3px 0 #f6efe1, 0 4px 0 #e2d6c0, 0 6px 0 #f3ead8; overflow: hidden; }
.nb-scroll { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; padding: 14px 16px calc(84px + env(safe-area-inset-bottom)) 50px;
  background: var(--paper) url(../visual/ui/nb/paper.webp) 0 27px / 512px 272px repeat local; color: var(--ink); }
.nb-x { position: absolute; z-index: 4; right: 14px; top: 0; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(30,22,44,.75); color: #fff4dc; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.nb-x svg { width: 20px; height: 20px; fill: currentColor; }
.nb-foot { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(253,247,233,0), var(--paper) 40%); display: flex; justify-content: center; }
.nb-foot button { border: 0; border-radius: 99px; padding: 11px 34px; background: #2f2640; color: #fff4dc; font-family: "Jua", sans-serif; font-size: 16px; cursor: pointer; box-shadow: 0 4px 12px rgba(30,20,40,.3); }

/* 글씨: 손글씨는 줄에 맞춤(줄 간격 34px) */
.nb .hw { font-family: "Nanum Pen Script", "Gowun Dodum", cursive; font-size: 24px; line-height: var(--lh); color: var(--ink); }
.nb h4 { font-family: "Jua", sans-serif; font-weight: 400; font-size: 15px; line-height: var(--lh); margin: 0; color: #b0673a; height: var(--lh); display: flex; align-items: center; gap: 6px; }
.nb h4 small { font-family: "Gowun Dodum", sans-serif; font-size: 12px; color: var(--pencil); }
.nb .tip { font-size: 12.5px; line-height: 1.45; color: var(--pencil); margin: 2px 0 10px; }
.nb .who-h { display: flex; align-items: center; gap: 10px; min-height: calc(var(--lh) * 2); }
.nb .who-h img { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 2px 5px rgba(0,0,0,.2); transform: rotate(-4deg); }
.nb .who-h .hw { font-size: 30px; }

/* 고칠 수 있는 줄 */
.nb .ln { display: flex; align-items: flex-start; gap: 6px; min-height: var(--lh); position: relative; }
.nb .ln .t { flex: 1; min-width: 0; outline: none; border-radius: 4px; word-break: keep-all; overflow-wrap: anywhere; }
.nb .ln .t[contenteditable="true"] { background: rgba(255,214,120,.28); box-shadow: 0 0 0 2px rgba(255,190,90,.45); caret-color: #d0442a; }
.nb .ln .t:empty::before { content: attr(data-ph); color: #b9ad9c; }
.nb .ln .bt { flex: none; width: 30px; height: 30px; margin-top: 2px; border: 0; border-radius: 50%; background: transparent; color: #b6a690; display: grid; place-items: center; cursor: pointer; }
.nb .ln .bt svg { width: 17px; height: 17px; fill: currentColor; }
.nb .ln .bt:active { background: rgba(0,0,0,.06); }
.nb .ln.mine .t::after { content: " (내가 적음)"; font-family: "Gowun Dodum", sans-serif; font-size: 11.5px; color: var(--pencil); }
.nb .ln.gone .t { text-decoration: line-through; text-decoration-color: #d0442a; text-decoration-thickness: 2px; opacity: .45; transition: opacity .4s; }
.nb .field { display: flex; align-items: baseline; gap: 8px; min-height: var(--lh); }
.nb .field label { flex: none; width: 74px; font-size: 13px; color: var(--pencil); white-space: nowrap; }
.nb .field .t { flex: 1; min-width: 0; outline: none; border-radius: 4px; }
.nb .field .t:empty::before { content: attr(data-ph); color: #b9ad9c; }
.nb .field .t:focus { background: rgba(255,214,120,.28); box-shadow: 0 0 0 2px rgba(255,190,90,.45); }
.nb .add { display: flex; align-items: center; gap: 6px; height: var(--lh); border: 0; background: none; padding: 0; color: #c0703c; font-family: "Nanum Pen Script", cursive; font-size: 23px; cursor: pointer; }
.nb .add svg { width: 18px; height: 18px; fill: currentColor; }
.nb .gap { height: calc(var(--lh) / 2); }
.nb .saved { position: absolute; right: 18px; bottom: 74px; z-index: 5; padding: 6px 12px; border-radius: 99px; background: #2f2640; color: #fff4dc; font-size: 13px; opacity: 0; transform: translateY(6px); transition: .2s; pointer-events: none; }
.nb .saved.on { opacity: 1; transform: none; }

/* 이야기 카드 */
.nb .th { position: relative; margin: 0 0 var(--lh); }
.nb .th .tt { font-family: "Nanum Pen Script", cursive; font-size: 27px; line-height: var(--lh); color: #a8452a; }
.nb .th .ask { font-size: 12.5px; color: var(--pencil); line-height: var(--lh); height: var(--lh); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb .th .acts { display: flex; gap: 6px; height: var(--lh); align-items: center; }
.nb .chip { border: 1.5px solid #d9c7ab; border-radius: 99px; background: #fffaf0; color: #7a6450; font-size: 12.5px; padding: 3px 10px; cursor: pointer; }
.nb .chip.on { background: #e9f4e4; border-color: #9cc58c; color: #3f7a32; }
.nb .th.done .tt { text-decoration: line-through; text-decoration-color: rgba(168,69,42,.6); }
.nb .th.done .ln .bt { display: none; }
.nb .th .solved { position: absolute; right: 0; top: 0; width: 68px; height: 68px; background: url(../visual/ui/nb/solved.webp) center / 100% 100% no-repeat; color: #c42a1c; font-family: "Jua", sans-serif; font-size: 16px; display: grid; place-items: center; transform: rotate(-14deg); opacity: .85; mix-blend-mode: multiply; pointer-events: none; }

/* 지난 밤 */
.nb .night { display: flex; gap: 10px; align-items: baseline; }
.nb .night .d { flex: none; width: 54px; font-family: "Jua", sans-serif; font-size: 13px; color: #b0673a; }
.nb .slipmini { display: block; width: calc(100% - 4px); text-align: left; margin: 10px 0 calc(var(--lh) - 8px); padding: 4px 0 0 8px; border: solid transparent; border-width: 7px 24px 20px 7px; border-image: url(../visual/ui/nb/slip.webp) 14 56 56 14 fill / 7px 28px 28px 7px stretch; background: none; color: #3a2a12; filter: drop-shadow(0 3px 4px rgba(80,60,20,.2)); transform: rotate(-.8deg); position: relative; cursor: pointer; }
.nb .slipmini:nth-child(even) { transform: rotate(.7deg); }
.nb .slipmini::before { content: ""; position: absolute; top: -12px; left: 50%; width: 46px; height: 15px; margin-left: -23px; background: url(../visual/ui/nb/tape.webp) center / 100% 100% no-repeat; transform: rotate(-3deg); }
.nb .slipmini b { display: block; font-family: "Jua", sans-serif; font-weight: 400; font-size: 13px; color: #9a6a1a; }
.nb .slipmini span { font-family: "Nanum Pen Script", cursive; font-size: 22px; line-height: 1.25; }
.nb .slipfull .slip { margin: 6px 0 16px; }

/* 도감(단골, 장소) */
.nb .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; margin: 4px 0 var(--lh); }
.nb .grid.two { grid-template-columns: repeat(2, 1fr); gap: 12px 10px; }
.nb .card { position: relative; padding: 0 0 1px; border: 10px solid transparent; border-image: url(../visual/ui/nb/card.webp) 22 fill / 11px round; background: none; filter: drop-shadow(0 2px 3px rgba(90,70,40,.14)); text-align: center; cursor: pointer; color: var(--ink); font: inherit; }
.nb .card img.av { width: 58px; height: 58px; border-radius: 50%; display: block; margin: 0 auto 4px; }
.nb .card .nm { font-family: "Jua", sans-serif; font-size: 14px; line-height: 1.2; }
.nb .card .lv { font-size: 11px; color: var(--pencil); line-height: 1.3; margin-top: 2px; }
/* 친한 정도 하트: 감정 표시와 같은 펠트 하트 그림, 빈 하트는 색을 빼서 */
.nb .card .hearts { display: flex; justify-content: center; gap: 0; margin-top: 3px; }
.nb .card .hearts i { width: 13px; height: 13px; background: url(../visual/ui/mark2/heart.webp) center / contain no-repeat; filter: grayscale(1) brightness(1.15) opacity(.32); }
.nb .card .hearts i.f { filter: saturate(1.9) brightness(.96); }
.nb .card.locked img.av { border-radius: 50%; background: url(../visual/ui/nb/slot.webp) center / 100% 100% no-repeat; }
.nb .card.locked .nm { color: #b9ad9c; }
.nb .card .new { position: absolute; top: -2px; right: -2px; padding: 1px 6px; border-radius: 99px; background: #ff5a3c; color: #fff; font-family: "Jua", sans-serif; font-size: 10.5px; }
.nb .card.pl { padding: 0 0 2px; }
.nb .card.pl img.th { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; margin-bottom: 6px; border-radius: 6px; }
.nb .card.pl.locked img.th { filter: grayscale(1) brightness(.35) blur(2px); }
.nb .card.pl.locked img.th { clip-path: inset(0 round 6px); } /* 흐림이 둥근 모서리 밖으로 번지지 않게 */
.nb .card.pl.locked::after { content: "?"; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 3 / 2; display: grid; place-items: center; font-family: "Jua", sans-serif; font-size: 34px; color: rgba(255,255,255,.75); }
.nb .detail { margin: 0 0 var(--lh); padding: 2px 4px; border: 10px solid transparent; border-image: url(../visual/ui/nb/card.webp) 22 fill / 11px round; background: none; filter: drop-shadow(0 2px 3px rgba(90,70,40,.14)); }
.nb .detail .who-h img { width: 46px; height: 46px; }
.nb .detail p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #5b4a3a; }
.nb .detail p.hw { font-size: 22px; line-height: 1.3; color: var(--ink); margin: 4px 0; }
.nb .meter { height: 8px; border-radius: 99px; background: #f1e6d4; overflow: hidden; margin: 8px 0 4px; }
.nb .meter i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffb27a, #ff6f61); }

/* 도장판 */
.nb .stampcard { margin: 2px 0 var(--lh); padding: 6px 4px 4px; border: 10px solid transparent; border-image: url(../visual/ui/nb/card.webp) 22 fill / 11px round; background: none; filter: drop-shadow(0 2px 3px rgba(90,70,40,.14)); }
.nb .stampcard .sct { font-family: "Jua", sans-serif; font-size: 17px; text-align: center; color: #b0452a; }
.nb .stampcard .scs { font-size: 12.5px; color: var(--pencil); text-align: center; margin: 2px 0 10px; }
.nb .slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px 6px; }
.nb .slot { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: url(../visual/ui/nb/slot.webp) center / 100% 100% no-repeat; color: #c9ad86; font-family: "Jua", sans-serif; font-size: 15px; }
.nb .slot img { position: absolute; inset: -8%; width: 116%; height: 116%; transform: rotate(var(--r, -8deg)); }
.nb .slot.gift { background-image: url(../visual/ui/nb/gift.webp); }
.nb .slot.gift img { inset: 16%; width: 68%; height: 68%; transform: none; }
.nb .slot small { position: absolute; bottom: -15px; left: 0; right: 0; text-align: center; font-family: "Gowun Dodum", sans-serif; font-size: 10px; color: var(--pencil); }
.nb .slots + .scs { margin-top: 20px; }

/* 앉을 때 도장 쾅, 도감과 친해짐 알림(게임 느낌) */
.gtoast { position: absolute; z-index: 30; left: 50%; top: 58px; translate: -50% -16px; opacity: 0; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 7px 16px 7px 7px; border-radius: 99px; background: #fffaf0; color: #2a2018; box-shadow: 0 8px 22px rgba(10,4,20,.4), inset 0 0 0 1.5px rgba(255,190,110,.6); pointer-events: none; transition: translate .35s cubic-bezier(.2,1.3,.4,1), opacity .25s; }
.gtoast.on { translate: -50% 0; opacity: 1; }
.gtoast img { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: contain; }
.gtoast b { display: block; font-family: "Jua", sans-serif; font-weight: 400; font-size: 15.5px; line-height: 1.2; }
.gtoast small { display: block; font-size: 13px; color: #6b5440; line-height: 1.3; }
.gstamp { position: absolute; z-index: 31; left: 50%; top: 56%; width: 150px; height: 150px; margin: -75px 0 0 -75px; pointer-events: none; opacity: 0; }
.gstamp img { width: 100%; height: 100%; }
.gstamp.on { animation: stampdown .55s cubic-bezier(.3,1.4,.5,1) forwards; }
.hudb.got { animation: gotit .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes gotit { 40% { transform: scale(1.3); box-shadow: 0 0 0 2px #ffb070, 0 0 16px rgba(255,140,70,.8); } }
@keyframes stampdown { 0% { opacity: 0; transform: scale(2.2) rotate(-22deg); } 60% { opacity: 1; transform: scale(.92) rotate(-10deg); } 100% { opacity: 1; transform: scale(1) rotate(-10deg); } }
@keyframes stampout { to { opacity: 0; transform: scale(.6) rotate(-10deg) translateY(-120px); } }
.hudb { position: absolute; z-index: 12; left: 12px; top: 56px; width: 36px; height: 36px; border: 1px solid rgba(255,240,220,.18); display: grid; place-items: center; cursor: pointer; padding: 0; }
.hudb svg { width: 19px; height: 19px; fill: #fff4dc; }
.hudb b.ndot, #lobby #lbook b.ndot { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: #ff5a3c; box-shadow: 0 0 0 2px rgba(22,14,38,.8); }
.phone:not(.chatmode) .hudb { display: none; }

/* 고르기(드롭다운 대신): 지금 고른 것이 알약 단추로, 누르면 아래에서 목록 카드 */
.npick { display: inline-flex; align-items: center; gap: 8px; max-width: 58%; min-width: 0; height: 40px; padding: 0 12px 0 14px; border: 0; border-radius: 99px; background: #fff; color: #2a2018; font: inherit; font-size: 14.5px; box-shadow: inset 0 0 0 1.5px #ead9bd, 0 2px 0 #efe2cc; cursor: pointer; }
.npick span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.npick svg { flex: none; width: 18px; height: 18px; fill: #c0703c; }
.nlist { position: absolute; inset: 0; z-index: 45; display: flex; align-items: flex-end; background: rgba(12,8,24,.4); opacity: 0; pointer-events: none; transition: opacity .2s; }
.nlist.on { opacity: 1; pointer-events: auto; }
.nlist .in { width: 100%; background: #fffaf0; border-radius: 24px 24px 0 0; padding: 8px 12px calc(14px + env(safe-area-inset-bottom)); transform: translateY(30px); transition: transform .28s cubic-bezier(.2,.9,.3,1.1); box-shadow: 0 -8px 26px rgba(0,0,0,.3); }
.nlist.on .in { transform: none; }
.nlist .grab { width: 40px; height: 5px; border-radius: 99px; background: #e2d3bb; margin: 2px auto 10px; }
.nlist h5 { font-family: "Jua", sans-serif; font-weight: 400; font-size: 17px; margin: 0 6px 8px; color: #2a2018; }
.nlist button.op { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px; border: 0; border-radius: 14px; background: none; color: #2a2018; font: inherit; font-size: 15.5px; text-align: left; cursor: pointer; }
.nlist button.op i { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #f6ecdb; display: grid; place-items: center; }
.nlist button.op i svg { width: 18px; height: 18px; fill: #b0673a; }
.nlist button.op span { flex: 1; min-width: 0; }
.nlist button.op small { display: block; font-size: 13px; color: #6b5440; }
.nlist button.op.on { background: #fff0dc; box-shadow: inset 0 0 0 1.5px #ffc58a; }
.nlist button.op .ck { width: 22px; height: 22px; border-radius: 50%; background: #ff8a2a; display: none; place-items: center; }
.nlist button.op.on .ck { display: grid; }
.nlist button.op .ck svg { width: 15px; height: 15px; fill: #fff; }

#lobby #lbook { position: relative; }
#lobby #lbook b.ndot { top: 0; right: calc(50% - 26px); width: 10px; height: 10px; }

/* 신고: 길게 누른 말풍선이 살짝 눌림 */
.msg .b.held { transform: scale(.97); transition: transform .15s; }
.msg:not(.me) .b { -webkit-touch-callout: none; }
/* 들어오기 전 동의 카드 */
.consent .in { padding-bottom: calc(18px + env(safe-area-inset-bottom)); max-height: 92%; overflow: auto; }
.consent ul.cn { margin: 0 4px 12px; padding: 0; list-style: none; }
.consent ul.cn li { position: relative; padding: 9px 12px 9px 14px; margin: 6px 0; border-radius: 14px; background: #f6ecdb; font-size: 13.5px; line-height: 1.5; color: #4a3a2a; }
.consent ul.cn li b { color: #2a2018; }
.consent ul.cn a { color: #c0581a; font-weight: 700; }
.consent label.ck { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px; font-size: 14.5px; color: #2a2018; cursor: pointer; }
.consent label.ck a { color: #b0673a; }
.consent label.ck.all { border-bottom: 1px solid #efe2cc; font-family: "Jua", sans-serif; font-size: 16px; }
.consent label.ck input { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border-radius: 50%; border: 2px solid #e2d3bb; background: #fff; display: grid; place-items: center; cursor: pointer; }
.consent label.ck input:checked { background: #ff8a2a; border-color: #ff8a2a; }
.consent label.ck input:checked::after { content: ""; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.consent .cgo { display: block; width: 100%; height: 54px; margin-top: 12px; border: 0; border-radius: 99px; background: linear-gradient(180deg, #ffa24a, #ff7a1a); color: #fff; font-family: "Jua", sans-serif; font-size: 18px; cursor: pointer; box-shadow: inset 0 1.5px 0 rgba(255,236,210,.6), 0 6px 16px rgba(10,4,16,.25); }
.consent .cgo:disabled { background: #e8dcc8; color: #a8957c; box-shadow: none; }
.consent .cno { text-align: center; font-size: 13px; color: #6b5440; margin: 10px 0 0; }
.llinks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 2px 4px; font-size: 13px; }
.llinks a { color: #b0673a; }
/* 결제 내역 */
.buys { margin: 0 0 6px; }
.buys .buy { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px dashed #efe2cc; font-size: 14px; }
.buys .buy > span { flex: 1; min-width: 0; }
.buys .buy b { font-weight: 400; color: #2a2018; }
.buys .buy small { display: block; font-size: 13px; color: #6b5440; }
.buys .buy em { font-style: normal; font-family: "Jua", sans-serif; color: #4a3a2a; white-space: nowrap; }
.buys .buy.rf em, .buys .buy.rf b { color: #8a735a; }
.buys .buy .rfb { flex: none; }
/* 태어난 해 */
/* 태어난 해(10/30, 대표님 "태어난 해 입력이 오른쪽에 잇어서 이상함. 입력창이 명확하지 않음"): 이름은 위, 아래에 테두리 있는 입력 칸을 왼쪽부터, 뒤에 "년" */
.consent .yr { margin: 4px 4px 10px; padding: 12px 14px 11px; border-radius: 16px; background: #fbf4e8; }
.consent .yr label { display: block; margin: 0 0 8px 2px; font-family: "Jua", sans-serif; font-size: 16px; color: #2a2018; }
.consent .yrbox { display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 2px #e3d0b2; transition: box-shadow .15s; cursor: text; }
.consent .yrbox:focus-within { box-shadow: inset 0 0 0 2px #ff8a2a, 0 0 0 4px rgba(255,138,42,.18); }
.consent .yr input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: "Jua", sans-serif; font-size: 22px; color: #2a2018; letter-spacing: .08em; text-align: left; padding: 0; }
.consent .yr input::placeholder { color: #cbb796; }
.consent .yr input.bad { color: #c0392b; }
.consent .yrbox span { flex: none; font-family: "Jua", sans-serif; font-size: 18px; color: #6b5440; }
.consent .yr small { display: block; margin: 8px 2px 0; font-size: 13px; font-weight: 700; color: #6b5440; }
.consent label.ck span { line-height: 1.45; }
.consent label.ck:not(.all) span { font-size: 13.5px; }
.consent .cpriv { margin: 6px 6px 0; font-size: 13px; color: #6b5440; }
.consent .cpriv a { color: #b0673a; }
.consent .cno:empty { display: none; }
/* 위기 카드: 누르면 바로 전화 */
.pcard.sos { background: #fff6ee; box-shadow: inset 0 0 0 1.5px #ffd2a8, 0 6px 18px rgba(6,2,16,.3); }
.pcard .sosb { flex-direction: column; gap: 6px; }
.pcard .sosb a { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px #f2cfa8; color: #2a2018; text-decoration: none; }
.pcard .sosb a b { font-family: "Jua", sans-serif; font-weight: 400; font-size: 19px; color: #c0581a; line-height: 1.15; }
.pcard .sosb a small { font-size: 13px; color: #6b5440; }
.pcard .sosico { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #ff8a2a radial-gradient(circle at 50% 50%, #fff 0 4px, transparent 5px); }
/* 첫 화면 아래 사업자 정보와 약관 줄(전자상거래법 제10조) */
.bizline { position: absolute; left: 0; right: 0; bottom: max(4px, env(safe-area-inset-bottom)); z-index: 6; text-align: center; font-size: 12px; line-height: 14px; color: rgba(255,241,220,.78); pointer-events: auto; text-shadow: 0 1px 4px rgba(0,0,0,.7);}
.bizline a { color: inherit; text-decoration: none; padding: 4px 3px; }
.bizline a b { font-weight: 700; }
.lobby:not(.on) ~ .bizline.lob { opacity: 0; pointer-events: none; }
/* 내 기록 줄의 작은 버튼: 글자가 잘리지 않게 */
.lrow > .npick, .buys .npick { flex: none; max-width: none; height: 36px; padding: 0 14px; }
.lrow > .npick span, .buys .npick span { overflow: visible; }
.lrow > span { min-width: 0; }
.npick:disabled { opacity: .6; }


/* 로그인 카드(10/30): 카카오와 구글 단추는 각 회사 가이드 색과 모양 */
.lgn .lg-sub { margin: 0 6px 14px; font-size: 14px; line-height: 1.55; color: #6b5844; word-break: keep-all; }
.lgn .lg-btns { display: grid; gap: 10px; margin: 0 4px; }
.lgn .lg-btns button { position: relative; display: flex; align-items: center; justify-content: center; height: 50px; border: 0; border-radius: 12px; font: 600 15.5px/1 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lgn .lg-btns svg { position: absolute; left: 18px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; }
.lgn .lg-btns button:active { transform: scale(.98); }
.lgn .lg-btns button:disabled { opacity: .6; }
.lgn .lg-kakao { background: #FEE500; color: rgba(0,0,0,.85); }
.lgn .lg-google { background: #fff; color: #1f1f1f; box-shadow: inset 0 0 0 1px #747775; font-family: Roboto, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif; font-weight: 500; }
.lgn .lg-later { display: block; width: 100%; height: 46px; margin-top: 6px; border: 0; background: none; color: #8a735a; font-family: "Jua", sans-serif; font-size: 15.5px; cursor: pointer; }
.lgn .lg-fine { margin: 0 6px 2px; text-align: center; font-size: 12.5px; color: #7a6650; word-break: keep-all; }
.lgn .lg-fine a { color: inherit; }