/*
* 로그팅 공개 페이지 공통 스타일.
* 토큰은 소개 페이지(index.html)와 같은 값을 쓴다 — 스토어 심사자가 여러 URL을 오갈 때
* 같은 서비스의 페이지로 보여야 한다.
*
* Tomato는 선택·마감·감정 강조에만, 기본 행동/본문 강조는 Cocoa로 안정감을 준다.
*/
:root{
--tomato:#F54856;
--cocoa:#171717;
--cream:#FAF8F4;
--white:#FFFFFF;
--ink:#171717;
--muted:#716E68;
--line:#E9E4DE;
--tomato-soft:#FFE6E8;
/*
* 노란색(--yellow-soft:#FFF3C7)을 걷어냈다. 강조색은 토마토 하나다 —
* 한 화면에 강조가 둘이면 어느 쪽도 강조가 아니고, 포스터와도 어긋난다.
* 이 토큰을 쓰던 곳은 .info와 .formmsg.ok 둘이었고, 아래에서 각각 다시 칠했다.
*/
--shadow:0 10px 20px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;background:var(--cream);color:var(--ink);
font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
word-break:keep-all;
}
.wrap{max-width:680px;margin:0 auto;padding:0 20px}
/* ── 상단 네비 ─────────────────────────────── */
.topnav{padding:20px 0 0;font-size:14px}
.topnav a{color:var(--muted);text-decoration:none}
.topnav a:hover{color:var(--ink)}
/* ── 문서 헤더 ─────────────────────────────── */
header.doc{padding:28px 0 24px;border-bottom:1px solid var(--line)}
header.doc h1{font-size:clamp(24px,6vw,30px);font-weight:800;line-height:1.32;
letter-spacing:-.02em;margin:0 0 10px}
header.doc .lede{color:var(--muted);font-size:16px;margin:0}
.updated{margin-top:14px;font-size:13px;color:var(--muted)}
/* ── 본문 ──────────────────────────────────── */
section{padding:28px 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
h2{font-size:21px;font-weight:700;letter-spacing:-.01em;margin:0 0 16px}
h3{font-size:16px;font-weight:700;margin:24px 0 8px}
p{margin:0 0 14px}
ul,ol{margin:0 0 14px;padding-left:19px}
li{margin-bottom:7px}
a{color:var(--tomato)}
b,strong{font-weight:700}
.muted{color:var(--muted)}
small{font-size:13px}
/* 표는 좁은 화면에서 가로 스크롤 */
.tablewrap{overflow-x:auto;margin:0 0 14px}
table{width:100%;border-collapse:collapse;font-size:15px;background:var(--white);
border:1px solid var(--line);border-radius:12px;overflow:hidden}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{width:38%;font-weight:600;color:var(--muted);background:#FCFAF7;white-space:nowrap}
tr:last-child th,tr:last-child td{border-bottom:0}
.card{background:var(--white);border:1px solid var(--line);border-radius:14px;
padding:18px 18px 4px;box-shadow:var(--shadow);margin:0 0 16px}
.notice{background:var(--tomato-soft);border-radius:12px;padding:14px 16px;
font-size:15px;margin:0 0 14px}
.notice b{color:var(--tomato)}
/* 안심시키는 문단. 색으로 소리치지 않고 흰 카드 + 실선으로 조용히 구분한다. */
.info{background:var(--white);border:1px solid var(--line);border-radius:12px;
padding:14px 16px;font-size:15px;margin:0 0 14px}
.info b{color:var(--tomato)}
/* ── 스토어 내려받기 ───────────────────────── */
/*
* 마크가 스토어의 실제 색을 갖는다(App Store 파랑, Play 4색). 그래서 바탕은 흰 카드로
* 두고 글자는 잉크로 쓴다 — 코코아로 채우면 색이 검은 판 위에서 탁해진다.
* 배지 이미지를 Apple·Google CDN에서 끌어오지 않고 인라인 SVG로 그리는 이유는
* 이 페이지가 남의 CDN에 묶이지 않게 하기 위해서다.
*/
.stores{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.store{display:inline-flex;align-items:center;gap:11px;padding:10px 18px;border-radius:16px;
background:var(--white);border:1px solid var(--line);color:var(--ink);
text-decoration:none;box-shadow:var(--shadow)}
.store:hover{text-decoration:none;border-color:#DCD5CC}
.store .ico{width:28px;height:28px;flex:none}
.store .lines{display:block;text-align:left}
.store .s1{display:block;font-size:11.5px;line-height:1.35;color:var(--muted)}
.store .s2{display:block;font-size:15.5px;line-height:1.3;font-weight:700}
/*
* 폰에서는 두 버튼이 **한 줄에** 서야 한다. 두 줄로 접히면 아래 버튼이 다음 문단처럼
* 보여서 "둘 중 하나를 고르는 자리"라는 게 읽히지 않는다.
* 자리를 만드는 방법은 글자를 줄이는 것이다 — "App Store에서 받기"의 뒷말을 접어
* "App Store"만 남긴다. 위의 iPhone·Android가 이미 무엇을 받는지 말하고 있다.
*/
@media (max-width:560px){
.stores{flex-wrap:nowrap;gap:8px}
.store{flex:1 1 0;min-width:0;padding:9px 12px;gap:8px}
.store .ico{width:24px;height:24px}
.store .s1{font-size:10.5px}
.store .s2{font-size:13.5px}
.store .sfx{display:none}
}
/* ── 폼 ────────────────────────────────────── */
form{margin:0}
.field{margin:0 0 18px}
.field label{display:block;font-weight:600;font-size:15px;margin:0 0 6px}
.field .hint{font-size:13px;color:var(--muted);margin:0 0 8px}
.field .req{color:var(--tomato);margin-left:3px}
input[type=text],input[type=email],select,textarea{
width:100%;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);
background:var(--white);border:1px solid var(--line);border-radius:10px;
}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--tomato);outline-offset:1px;border-color:transparent}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;margin:0 0 18px}
.check input{margin-top:4px;width:18px;height:18px;flex:none;accent-color:var(--tomato)}
button{
width:100%;padding:15px;font:inherit;font-size:16px;font-weight:700;color:var(--white);
background:var(--tomato);border:0;border-radius:12px;cursor:pointer;
}
button:disabled{background:#D8D3CD;cursor:not-allowed}
button:focus-visible{outline:2px solid var(--cocoa);outline-offset:2px}
.formmsg{margin:14px 0 0;padding:14px 16px;border-radius:12px;font-size:15px;display:none}
/* 성공과 실패가 같은 분홍이면 구분이 안 된다 — 성공은 흰 카드에 토마토 세로선으로 둔다. */
.formmsg.ok{display:block;background:var(--white);
border:1px solid var(--line);border-left:3px solid var(--tomato)}
.formmsg.err{display:block;background:var(--tomato-soft)}
/* ── 푸터 ──────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:26px 0 56px;font-size:14px;color:var(--muted)}
footer dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 18px}
footer dt{font-weight:600;color:var(--ink);white-space:nowrap}
footer dd{margin:0}
footer .links{margin:0 0 14px}
footer .links a{color:var(--muted);text-decoration:none}
footer .links a:hover{color:var(--ink)}
footer .copy{margin:0}