/* PONGE help pages — same tokens as the landing page. Layout: page list on the left, one readable document column. */ /* == generated by site/tools/fetch_fonts.rb — do not edit == */ @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url('/fonts/landing/latin-BricolageGrotesque-500-800.fd3ca827.woff2') format('woff2')} @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/landing/latin-InstrumentSans-400-700.9d26aa09.woff2') format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/landing/latin-JetBrainsMono-500.3d26568c.woff2') format('woff2')} @font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/landing/ja-ZenKakuGothicNew-700.e70ec942.woff2') format('woff2')} @font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/landing/ja-ZenKakuGothicNew-900.e0af48cd.woff2') format('woff2')} @font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/landing/ja-NotoSansJP-400-700.7e227bd0.woff2') format('woff2')} @font-face{font-family:'Noto Sans KR';font-style:normal;font-weight:400 900;font-display:swap;src:url('/fonts/landing/ko-NotoSansKR-400-900.1b6cb207.woff2') format('woff2')} @font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:400 900;font-display:swap;src:url('/fonts/landing/zh-CN-NotoSansSC-400-900.aef79bd6.woff2') format('woff2')} @font-face{font-family:'Noto Sans TC';font-style:normal;font-weight:400 900;font-display:swap;src:url('/fonts/landing/zh-TW-NotoSansTC-400-900.70f0d89e.woff2') format('woff2')} @font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/landing/th-NotoSansThai-400-800.168c59d9.woff2') format('woff2')} /* == end generated == */ :root { --brand: #FF4400; --brand-deep: #CC3700; --brand-tint: #FFF1EA; --bg: #FFFFFF; --surface: #F9F9F8; --hairline: #E8E8E6; --fg: #303030; --fg-soft: #72726E; --font-display: "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", Arial, sans-serif; --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --gutter: clamp(16px, 4vw, 48px); color-scheme: light; } * { box-sizing: border-box; } html { scroll-padding-top: 88px; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.75; -webkit-text-size-adjust: 100%; padding-bottom: env(safe-area-inset-bottom, 0px); } img { max-width: 100%; display: block; } a { color: inherit; } :focus-visible { outline: 2.5px solid var(--brand); outline-offset: 3px; border-radius: 6px; } .wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: var(--gutter); } /* Nav */ .nav { position: sticky; top: 0; z-index: 10; padding-top: env(safe-area-inset-top, 0px); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline); } .nav .wrap { display: flex; align-items: center; gap: 20px; min-height: 64px; } .nav .logo { height: 22px; width: auto; } .nav .back { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--fg-soft); text-decoration: none; } .nav .back:hover { color: var(--fg); } .btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--brand); color: #FFFFFF; font-weight: 700; font-size: 15px; text-decoration: none; } .btn:hover { background: var(--brand-deep); } /* Layout */ .layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); padding-block: clamp(40px, 6vw, 80px) 96px; } .side { position: sticky; top: 96px; align-self: start; font-size: 15px; } .side .group { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--fg-soft); } .side ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 2px; } .side a { display: block; padding: 7px 0; text-decoration: none; color: var(--fg-soft); font-weight: 500; } .side a:hover { color: var(--fg); } .side a[aria-current="page"] { color: var(--fg); font-weight: 700; } /* The app's bolt marks the current page; other pages show a faint one on hover. */ :root { --bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.9525 13.0172C18.4134 12.5851 18.4159 12.0178 18.2642 11.6316C18.1126 11.2453 17.725 10.8325 17.0932 10.8325H15.6117C15.1989 10.8325 14.8246 10.6394 14.5863 10.3014C14.3468 9.9647 14.2878 9.547 14.4226 9.1559L15.9727 4.685C16.2171 3.9789 15.8416 3.4418 15.4444 3.1967C15.259 3.0821 15.0184 3 14.762 3C14.4695 3 14.1566 3.1062 13.8798 3.3923L12.7269 4.5848L6.0221 10.7215C5.5527 11.1512 5.5467 11.7209 5.6971 12.1096C5.8476 12.4994 6.2351 12.9159 6.8706 12.9159H8.2185C8.6313 12.9159 9.0056 13.1102 9.2451 13.4482C9.4846 13.7861 9.5424 14.2038 9.4064 14.5949L7.7588 19.312C7.5181 20.0012 7.8779 20.5371 8.2594 20.7858C8.6409 21.0357 9.274 21.1491 9.8059 20.6506L17.9537 13.0161Z'/%3E%3C/svg%3E"); } .side a { display: flex; align-items: center; gap: 6px; } .side a::after { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--bolt) center / contain no-repeat; mask: var(--bolt) center / contain no-repeat; opacity: 0; transform: translateX(-4px) scale(.7) rotate(-12deg); transition: opacity .2s ease, transform .25s cubic-bezier(.3, 1.6, .5, 1); } .side a:hover::after { opacity: .35; transform: none; } .side a[aria-current="page"]::after { background: var(--brand); opacity: 1; transform: none; animation: zap .6s cubic-bezier(.3, 1.6, .5, 1) .15s both; } @keyframes zap { 0% { opacity: 0; transform: translateX(-6px) scale(.4) rotate(-20deg); } 60% { opacity: 1; transform: scale(1.25) rotate(6deg); } 100% { opacity: 1; transform: none; } } /* Document */ .doc { max-width: 720px; min-width: 0; } .doc-head { display: grid; gap: 14px; padding-bottom: 28px; border-bottom: 1px solid var(--hairline); } .doc-head .bolt { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(204, 55, 0, .3)); } h1 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 6vw, 64px); line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; } .desc { margin: 0; font-size: 18px; color: var(--fg-soft); max-width: 36em; } .meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-soft); } .meta p { margin: 0; } .history summary { cursor: pointer; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } .history ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; } .history li span { display: inline-block; width: 92px; color: var(--fg-soft); } /* Table of contents */ .toc { margin: 28px 0 8px; padding: 18px 20px; background: var(--surface); border-radius: 18px; } .toc summary { cursor: pointer; font-weight: 700; font-size: 15px; } .toc ol { list-style: none; margin: 12px 0 0; padding: 0; columns: 2; column-gap: 28px; font-size: 14px; line-height: 1.45; } .toc li { break-inside: avoid; padding: 4px 0; } .toc a { text-decoration: none; color: var(--fg-soft); display: flex; gap: 10px; } .toc a:hover { color: var(--fg); } .toc .tn { flex: none; min-width: 2.6em; font-family: var(--font-mono); font-size: 12px; color: var(--brand); padding-top: 1px; font-variant-numeric: tabular-nums; } /* Body copy */ .body { padding-top: 8px; } .body h2 { margin: 48px 0 12px; font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; } .body h2 .num { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--fg-soft); } .body h3 { margin: 28px 0 8px; font-size: 17px; font-weight: 700; } .body p { margin: 0 0 14px; max-width: 68ch; } .body ol, .body ul { margin: 0 0 16px; padding-left: 1.5em; max-width: 68ch; } .body li { margin: 6px 0; padding-left: 4px; } .body ol > li::marker { color: var(--brand); font-weight: 700; font-variant-numeric: tabular-nums; } .body ul > li::marker { color: var(--brand); } .body li ul, .body li ol { margin: 6px 0 0; } .body li ul > li::marker { color: var(--fg-soft); } .body strong { font-weight: 700; } .body code { font-family: var(--font-mono); font-size: .88em; background: var(--surface); border: 1px solid var(--hairline); border-radius: 6px; padding: 1px 6px; } .body hr { border: 0; border-top: 1px solid var(--hairline); margin: 40px 0; } /* Support pages */ .mail { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; } .mail .addr { font-family: var(--font-mono); font-size: 18px; font-weight: 500; padding: 10px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--hairline); user-select: all; } .mail .copy, .mail .open { min-height: 44px; padding: 0 18px; border-radius: 999px; font: 700 14px var(--font-body); display: inline-flex; align-items: center; cursor: pointer; text-decoration: none; } .mail .copy { border: 0; background: var(--brand); color: #FFFFFF; } .mail .copy:hover { background: var(--brand-deep); } .mail .open { border: 1px solid var(--hairline); background: var(--bg); color: var(--fg); } .card { margin-top: 32px; padding: 24px; border: 1px solid var(--hairline); border-radius: 22px; } .card .label { margin: 0; font-size: 14px; color: var(--fg-soft); } .empty { margin-top: 32px; } .empty .big { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.25; margin-bottom: 8px; } .body .steps { list-style: none; padding: 0; max-width: none; margin: 32px 0 20px; counter-reset: st; display: grid; gap: 10px; } .steps li { counter-increment: st; display: flex; align-items: center; gap: 16px; padding: 16px 18px; margin: 0; border: 1px solid var(--hairline); border-radius: 16px; } .steps li::before { content: counter(st); flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fg); color: #FFFFFF; font-family: var(--font-display); font-weight: 800; font-size: 15px; } .warn { padding: 14px 18px; border-radius: 14px; background: var(--brand-tint); color: var(--brand-deep); font-weight: 600; } footer { border-top: 1px solid var(--hairline); padding-block: 32px; font-size: 13px; color: var(--fg-soft); } footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; } footer .logo { height: 16px; width: auto; } footer nav { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; } footer a { text-decoration: none; } @media (max-width: 900px) { .layout { grid-template-columns: 1fr; gap: 28px; padding-top: 24px; } .side { position: static; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; } .side .group { display: none; } .side ul { display: flex; gap: 8px; margin: 0; } .side a { white-space: nowrap; padding: 8px 14px; border: 1px solid var(--hairline); border-radius: 999px; } .side a[aria-current="page"] { background: var(--fg); color: #FFFFFF; border-color: var(--fg); } .side a::after { display: none; } .side a[aria-current="page"]::after { display: block; width: 15px; height: 15px; background: var(--brand); } .toc ol { columns: 1; } .nav .back { display: none; } .nav .btn { margin-left: auto; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* FAQ */ .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } [hidden] { display: none !important; } /* 키보드로 들어오면 맨 먼저 보이는 「본문 바로가기」. 평소에는 화면 밖에 둔다. */ .skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--fg); color: var(--bg); font-weight: 600; text-decoration: none; } .skip:focus { top: 12px; } .faq-tools { display: grid; gap: 14px; margin: 28px 0 8px; position: sticky; top: 64px; z-index: 5; padding-block: 12px; background: var(--bg); } .search input { width: 100%; min-height: 52px; padding: 0 18px 0 46px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2372726E' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 18px center; font: 500 16px var(--font-body); color: var(--fg); } .search input:focus { outline: none; border-color: var(--brand); background-color: var(--bg); } .chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; } .chip { flex: none; padding: 7px 14px; border: 1px solid var(--hairline); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--fg-soft); text-decoration: none; white-space: nowrap; } .chip:hover { color: var(--fg); border-color: var(--fg-soft); } .faq-group { scroll-margin-top: 200px; } .body .faq-group h2 { margin: 40px 0 10px; font-size: 22px; } .qa { border-bottom: 1px solid var(--hairline); } .qa:first-of-type { border-top: 1px solid var(--hairline); } .qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 2px; font-size: 17px; font-weight: 600; line-height: 1.4; } .qa summary::-webkit-details-marker { display: none; } .qa summary:hover span { color: var(--brand); } .qa summary i { flex: none; position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); transition: background .2s, transform .25s ease; } .qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: var(--fg); transition: transform .25s ease; } .qa summary i::after { transform: rotate(90deg); } .qa[open] summary i { background: var(--brand); transform: rotate(180deg); } .qa[open] summary i::before, .qa[open] summary i::after { background: #FFFFFF; } .qa[open] summary i::after { transform: rotate(0deg); } .qa .a { padding: 0 2px 18px; color: var(--fg); } .qa .a p:last-child, .qa .a ul:last-child { margin-bottom: 0; } .body .qa .a a { color: var(--brand-deep); } .none { color: var(--fg-soft); } .card.ask { margin-top: 48px; background: var(--surface); border: 0; } .card.ask .big { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin: 0 0 4px; } .card.ask p { margin: 0; } /* Horizontal chip rows: no visible scrollbar, a soft fade at the edge shows there's more. */ .side, .chips { scrollbar-width: none; -ms-overflow-style: none; } .side::-webkit-scrollbar, .chips::-webkit-scrollbar { display: none; } .chips { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 32px; } @media (max-width: 900px) { .side { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 32px; padding-bottom: 0; } .side a { font-size: 14px; padding: 7px 13px; } .layout { gap: 18px; padding-top: 16px; } .doc-head { gap: 10px; padding-bottom: 20px; } .doc-head .bolt { width: 44px; height: 44px; } .desc { font-size: 16px; } .faq-tools { margin-top: 12px; gap: 10px; padding-block: 8px; } .search input { min-height: 46px; font-size: 15px; } .chip { font-size: 13px; padding: 6px 12px; } .body .faq-group h2 { margin-top: 28px; } .toc { margin-top: 20px; } } /* Language menu — a dropdown so more languages can be added later. */ .lang-menu { position: relative; } .lang-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--fg); background: var(--bg); } .lang-menu summary::-webkit-details-marker { display: none; } .lang-menu summary:hover { border-color: var(--fg-soft); } .lang-menu .g { width: 17px; height: 17px; } .lang-menu .c { width: 14px; height: 14px; color: var(--fg-soft); transition: transform .2s ease; } .lang-menu[open] .c { transform: rotate(180deg); } .lang-menu .code { display: none; } .lang-menu ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 168px; margin: 0; padding: 6px; list-style: none; background: var(--bg); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: 0 18px 40px -16px rgba(40, 20, 0, .28); } .lang-menu li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--fg); text-decoration: none; } .lang-menu li a:hover { background: var(--surface); } .lang-menu li a[aria-current="true"] { color: var(--brand); } .lang-menu li a[aria-current="true"]::after { content: "✓"; font-weight: 700; } @media (max-width: 760px) { .lang-menu .full { display: none; } .lang-menu .code { display: inline; } .lang-menu summary { padding: 0 10px; } } .nav .back + .lang-menu { margin-left: 4px; } @media (max-width: 900px) { .nav .lang-menu { margin-left: auto; } .nav .lang-menu + .btn { margin-left: 0; } } /* No blinking text cursor when tapping page text; real inputs keep theirs. */ html, body { caret-color: transparent; } input, textarea, select, [contenteditable="true"] { caret-color: auto; } /* Language list: compact, every row the same height whatever the script. */ .lang-menu ul { padding: 5px; } .lang-menu li { margin: 0; padding: 0; line-height: 1.2; } .lang-menu li a { min-height: 0; height: 34px; padding: 0 12px; line-height: 1.2; } /* Menu is as wide as the longest name; the check sits in a narrow column right after it. */ .lang-menu ul { min-width: 0; width: max-content; } .lang-menu li a { display: grid; grid-template-columns: 1fr 14px; align-items: center; gap: 14px; } .lang-menu li a::after { content: ""; } .lang-menu li a[aria-current="true"]::after { content: "✓"; } /* Terms and privacy exist only in English for zh-CN, zh-TW and th; the note says so above the document. */ .legal-note { margin: 20px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--surface); color: var(--fg-soft); font-size: 14px; } /* Locale faces and line breaking — same tokens as landing.css. :where() keeps the per-page